前端框架部分很精彩

一、简介框架是一个兼容多浏览器的爪哇岛描述语言库，核心理念是少写，多做（写得更少，做得更多)。框架在2006年一月由美国人约翰瑞西格在纽约的自由讨论营发布，吸引了来自世界各地的众多Java脚本语言高手加入，由戴夫梅特文率领团队进行开发。如今，jQuery已经成为最流行的爪哇岛描述语言库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

二、选择器1.id选择器

bodydiv id='demo '我是一个div/div脚本rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' # demo ').css('color '，' red ')；/脚本/正文2 .元素标签名选择器元素

bodydiv我是一个div/divdiv我是一个div/divdiv我是一个div/divh3标题1/h3h3标题2/h3h3标题3/h3h3标题4/H3脚本rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' div ').css('color '，' red ')；$('h3 ').css(“”颜色','红色')。css('font-size '，' 30px ')；/脚本/正文3 .类选择器

bodyh3类='演示'我是一个拥有班级的H3/H3 3类="演示"我是一个拥有班级的H3/H3 3类="演示"我是一个拥有班级的H3/H3脚本rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' .演示')。css('color '，' red ')；/script4 .*选择器（匹配所有元素)

bodydiv id='demo '我是一个div/divdiv我是一个div/divdiv我是一个div/divdiv我是一个div/divh3标题1/h3h3标题2/h3h3标题3/h3h3标题4/h3h3类="演示"我是一个拥有班级的H3/H3 3类="演示"我是一个拥有班级的H3/H3 3类="演示"我是一个拥有班级的H3/H3脚本rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(“*”).css('color '，' red ')；//选择所有元素脚本/正文5。群组选择器

bodydiv id='demo '我是一个div/divh3标题1/h3h3类='demobox '我是一个拥有班级的H3/H3脚本rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' # demo，H3的demobox ' .css('color '，' red ')；/脚本/正文6 .后代选择器

bodyulli aul的里的a标签/a aul的里的a标签/a aul的里的a标签/a/Li/ulscript rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' ul阿利')。css('color '，' red ')；/脚本/正文6 .指定选择器

bodydiv类='演示'类的div/divp class='demo '类的p/pdiv普通div/div脚本rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' div。演示' .css('color '，' red ')；/脚本/正文7 .子选择器

bodydiv id='demo'p子p1/pp子p2/pp子p3/pdiv p孙子p1/p p孙子p2/p p孙子P3/p/div/div脚本rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(“# demop”).css('color '，' red ')；/script/body8.next(选择器)

body PP 1/PPP 2/PPP 3/pdiv id=' demo ' div/div pp4/Pp5/PPP 6/PPp 7/Pscript rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script/$(' # demo ').下一个(' p ').css('color '，' red ')；//第一种方法$('#demo p ').css('color '，' red ')；//第二种方法/script/body 9.nextall(选择器)

body PP 1/PPP 2/PPP 3/pdiv id=' demo ' div/div pp4/Pp5/PPP 6/PPp 7/Pscript rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script/$(' # demo ').nextAll().css('color '，' red ')；//第一种方法$('#demo~p ').css('color '，' red ')；//第二种方法/script/body10.prev方法

body PP 1/PPP 2/PPP 3/pdiv id=' demo ' div/div pp4/Pp5/PPP 6/PPp 7/Pscript rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' # demo ').prev().css('color '，' red ')；/script /body11.prevall方法

body PP 1/PPP 2/PPP 3/pdiv id=' demo ' div/div pp4/Pp5/PPP 6/PPp 7/Pscript rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' # demo ').普雷瓦尔()。css('color '，' red ')；/script/body12.slbings()方法

body PP 1/PPP 2/PPP 3/pdiv id=' demo ' div/div pp4/Pp5/PPP 6/PPp 7/Pscript rel=' script ' src=' http : jquery-2。2 .3 .量滴js '/script script $(' # demo ').兄弟姐妹()。css('color '，' red ')；/脚本/正文三、筛选器（过滤选择器)

滤器主要通过特定的过滤规则来筛选所需的数字正射影像图元素，和半铸钢钢性铸铁(铸造半钢)中的伪类的语法类：使用冒号(:)开头。

1.基本筛选

$('li:first ')。css('背景'，' # CCC ')；//第一个元素$ ('li:last)。CSS('背景'，' # CCC ')；//最后一个元素$ ('li:not(。红色))。CSS('背景'，' # CCC ')；//元素$ ('li:even ')。类中不为红色的CSS ('background '，' # CCC ')；//元素$ ('li:odd)。带有偶数索引的CSS ('background '，' # CCC ')；//具有奇数索引$ ('li:eq (2))的元素。CSS('背景'，' # CCC ')；//指定元素$(“Li : gt(2)”)。索引值的CSS('背景'，' # CCC ')；//元素$ ('li:lt (2)')。CSS ('background '，' # CCC ')大于索引值；//元素$ (':Header ')。CSS ('background '，' # CCC ')小于索引值；//页面上所有h1 ~ h6元素的焦点过滤器必须是网页初始状态下为了获取元素而激活的元素。而不是鼠标点击或Tab键击。$(“输入”)。获取(0)。焦点()；//首先初始化并激活一个元素focus $ (':focus ')。CSS('背景'，'红色')；//聚焦元素：first、last和first()，last()。当相同的元素出现时，首先会实现第一个父元素的第一个子元素，最后会实现最后一个父元素的最后一个子元素。因此，如果您需要知道它是哪个父元素，您需要指定：$ ('# boxli:last ')。CSS('背景'，' # CCC ')；//# box元素//或$ ('# boxli)的最后一个li//。最后()。CSS('背景'，' # CCC ')；//同上

2.内容过滤器。

//选择元素$ ('div:contains ('ycku.com ')')。元素文本节点包含ycku.com文本的CSS ('background '，' # CCC ')；$(“div : empty”)。css('背景'，' # CCC ')；//选择空元素$ ('ul:has()。红色)')。CSS('背景'，' # CCC ')；//选定的子元素包含元素$ (':parent ')。类为红色的CSS ('background '，' # CCC ')；//选择非空元素jQuery提供了一个名称类似于：parent的方法，但是这个方法并不选择包含子元素或文本的元素，而是获取当前元素的父元素并返回元素集合。

$('li ')。父项()。css('背景'，' # CCC ')；//选择父元素$ ('Li ')。父母()。当前元素的CSS('背景'，' # CCC ')；//选择父元素和祖先元素$ ('Li ')。父母直到(' div ')。当前元素的CSS('背景'，' # CCC ')；//选择当前元素遇到div父元素停止3。可见性过滤器。

-

$('p:hidden)。size()；//元素p隐藏元素$('p:visible ')。size()；//元素p显示元素注意：hidden filter一般是一个CSS样式为display:none的元素，输入表单类型为type='hidden '，visibility:hidden。

4.子元素过滤器。

子元素过滤器的过滤规则是通过父元素与子元素之间的关系获取对应的元素。

$('li:first-child ')。css('背景'，' # CCC ')；//每个父元素$ ('li:last-child ')的第一个li元素。CSS('背景'，' # CCC ')；//每个父元素$(li :独生子)的最后一个Li元素。CSS('背景'，' # CCC ')；//每个父元素只有一个li元素$(“Li : th-child(奇数)”)。CSS('背景'，' # CCC ')；//每个父元素都有奇数li元素$(' Li : th-child(偶数)')。CSS('背景'，' # CCC ')；//每个父元素都有偶数个li元素$(“Li : th-child(2)”)。CSS('背景'，' # CCC ')；//每个父元素5的第三个li元素。其他方法。

四.基本的DOM和css操作。

1.元素内容操作。

在常规的DOM元素中，我们可以使用html()和text()方法来获取内部数据。Html()方法可以获取或设置html内容，text()可以获取或设置文本内容。

$('#box ')。html()；//获取html内容$('#box ')。text()；//获取文本内容和html标记$('#box ')。html('emwww.li.cc/em ')将被自动清除；//设置html内容$('#box ')。文本(' emwww . Li . cc/em ')；//设置文本内容会自动转义html标记。注意：当我们使用html()或text()设置元素中的内容时，原始数据将被清空。如果我们期望添加数据，我们需要首先获取原始数据。$('#box ')。html($('#box ')。html()' emwww . Li . cc/em ')；//追加数据如果元素是表单，jQuery提供val()方法获取或设置内部文本数据。

$(“输入”)。val()；//获取表单内容$('input ')。val(' www . Li . cc ')；//设置表单内容如果要设置多个选项的选中状态，如下拉列表、单选复选框等。可以通过数组传递操作。$(“输入”)。val(['check1 '，' check2 '，' radio 1 '])；//将选择这些的//值。

2.元素属性操作。

jQuery除了设置和获取元素的内容外，还可以对元素本身的属性进行操作，包括获取属性值、设置属性的属性值、删除属性。

$(“div”)。attr(' title ')；//获取属性$('div ')的属性值。attr('title '，'我是域名')；//设置属性及其值$ ('div ')。attr ('title '，function(){//通过匿名函数返回属性值'我是域名'；});$(“div”)。attr ('title '，函数(index，value){//可以接受两个参数：返回值(index 1 ')，我就是域名'；});3.元素样式操作。

元素操作包括直接设置CSS样式、增加CSS类别、切换类别、删除类别等几种操作方式。就使用jQuery的频率而言，CSS样式的操作性极高，需要着重把握。

$(“div”)。CSS(' color ')；//获取color $('div ')。元素行中css样式的css('color '，' red ')；//将元素行中CSS样式的颜色设置为红色。当需要设置多个样式时，我们可以传递多个CSS样式的键值对。

$(“div”)。css({ '底色' : '#ccc '，'颜色' : '红色'，'字号' : ' 20px ' })；除了内嵌的CSS设置，我们还可以将CSS类直接添加到元素中，添加单个或多个CSS类，并删除它们。

$(“div”)。addClass('红色')；//添加一个CSS类$('div ')。addClass('红色BG ')；//添加多个CSS类$('div ')。remove CLaSS(' BG ')；//删除一个CSS类$('div ')。removeClass('红色BG ')；//删除多个CSS类。我们还可以结合事件来实现CSS类的样式切换功能。

$(“div”)。click(function () {//单击时，触发$(this)。toggleClass('红色大小')；//可以使用单一样式和多种样式})；的第二个参数。方法可以在布尔值中传递。true表示切换到该类，false表示返回默认类(默认为空类)。有了这个功能，我们可以设置开关频率。var计数=0；$(“div”)。点击(function () {//switch red $(这个)。每两次单击切换一次类('红色'，计数% 3==0 );});4.css方法。

JQuery不仅提供了css的核心操作方法，比如。CSS()，addClass()等等。它还封装了一些具有特殊功能的CSS操作方法。让我们分别看一下。

$(“div”)。宽度()；//获取元素的长度，返回的类型是number$('div ')。宽度(500)；//设置元素长度，直接传值，加px$('div ')。默认情况下宽度(' 500 pt ')；//同上，pt单位$ ('div ')。Width(函数(index，value) {//index为索引，value为原值返回值-500；//不调整类型直接计算})；

$(“div”)。高度()；//获取元素的高度，返回的类型是number$('div ')。身高(500)；//设置元素高度，直接传递给数值。默认情况下，px$('div ')。增加了高度(' 500磅')。//同上，pt单位$ ('div ')。Height(函数(index，value) {//index为索引，value为原值返回值-1；//不调整类型直接计算})；

警报($(“div”)。width())；//不包含alert($('div ')。innerWidth())；//包含填充提醒($ ('div ')。外部宽度())；//borderralert($(' div ')。带填充边框的外部宽度(true );//包含内边距填充边框外边距。

$(“strong”)。偏移量()。向左；//视口的偏移量$('strong ')。位置()。向左；//与父元素$(窗口)的偏移量。scroll top()；//获取当前滚动条$(窗口)的位置。scroll top(300)；//设置当前滚动条的位置以上就是本文的全部内容，希望对大家的学习有所帮助。