1、JQuery基础基础第10章 jQuery基础主要内容jQuery概述概述jQuery中的中的$jQuery与与CSS使用选择器使用选择器管理选择结果管理选择结果10.1 jQuery概述概述10.1.1 Jquery及其优势及其优势jQuery是一个优秀的是一个优秀的JavaScript框架框架，集，集JavaScript、CSS、DOM、Ajax功能于一体。功能于一体。简化JavaScript的复杂操作方便地选取页面元素方便地选取页面元素DOM的主要工作。的主要工作。简化常用的简化常用的JavaScript操作，如数组的操作，迭代等。操作，如数组的操作，迭代等。提供了提供了Ajax操作，简
2、化了代码的书写，方便了异步操作，简化了代码的书写，方便了异步交互的开发和使用。交互的开发和使用。简化了制作动画效果的过程。简化了制作动画效果的过程。提供大量实用方法10.1 jQuery10.1 jQuery概述概述解决了浏览器的兼容性问题便捷地修改页面的表现便捷地修改页面的表现CSS的主要工作，并解决了的主要工作，并解决了浏览器的兼容性问题。浏览器的兼容性问题。轻松地处理轻松地处理事件事件，解决了浏览器的兼容问题。，解决了浏览器的兼容问题。10.1.2 jQuery10.1.2 jQuery的下载的下载下载地址：下载地址：10.1.3 jQuery10.1.3 jQuery设计思想设计思想1
3、、选择网页元素的方法、选择网页元素的方法模拟模拟CSS选择元素选择元素独有表达式选择独有表达式选择多种筛选方法多种筛选方法（1 1）模拟）模拟CSSCSS选择元素选择元素document.getElementById(div1);$(#div1)$(div)$(.box).document.getElementsByTagName(div);getByClass(document,box);（2 2）独有表达式选择）独有表达式选择$(li.box)$(lititle)$(li:last)1 1 1 1 1（3 3）多种筛选方法）多种筛选方法$(li:last)$(li).filter(titl
4、e=world)$(li:eq(4)1 1 1 1 1$(lititle=world)（4 4）JqueryJquery兼容性处理兼容性处理window.onload=function()var oUl=document.getElementsByTagName(ul)0;var aChild=oUl.childNodes;for(var i=0;iaChild.length;i+)if(aChildi.nodeType=1)aChildi.style.background=blue;);$(ul).children().css(background,red);10.1.3 jQuery10.
5、1.3 jQuery设计思想设计思想2、jQuery写法写法方法函数化方法函数化取值赋值合体取值赋值合体链式操作链式操作window.onload=function();$(function();innerHTML=123;html(123)onclick=function();click(function()（1 1）JqueryJquery的方法函数化的方法函数化（1 1）JqueryJquery的方法函数化的方法函数化$(function()$(div).click(function()$(this).html(div div);)window.onload=function()var
6、oDiv=document.getElementById(div1);oDiv.onclick=function()oDiv.innerHTML=div;（2）取值和赋值方法合体html()css()注意：当操作一组元素的时候注意：当操作一组元素的时候取值是一组中的第一个取值是一组中的第一个赋值是一组中的所有元素赋值是一组中的所有元素$(“div”).css(“background”)读取读取$(“div”).css(“background”,“red“)赋值赋值（3）Jquery的链式操作var oDiv=$(#div1);oDiv.html(hello);oDiv.css(backgrou
7、nd,red);oDiv.click(function()alert(123);)$(#div1).html(hello).css(background,red).click(function()alert(123););10.2 jQurey10.2 jQurey中的中的$是什么？是什么？函数！等同于函数！等同于“jQuery$能接收的参数能接收的参数函数（函数（$是函数的前缀）是函数的前缀）字符串字符串选择选择DOM元素元素创建创建DOM元素元素对象对象“$”调用调用jQuery中的自定义函数中的自定义函数alert(typeof$)1.$(document).ready()1.$(doc
8、ument).ready()页面页面HTML框架需要在页面完全加载后才能使用，框架需要在页面完全加载后才能使用，因此因此JavaScript编程时要使用编程时要使用window.onload函数。函数。如果需要在页面中多处使用该函数，或者其他如果需要在页面中多处使用该函数，或者其他.js文文件中也包含件中也包含window.onload，冲突将十分棘手。，冲突将十分棘手。jQuery中的中的ready函数解决了这个问题，可以自动函数解决了这个问题，可以自动将其中的函数在页面加载完成后运行，并且同一个将其中的函数在页面加载完成后运行，并且同一个页面中可以使用多个页面中可以使用多个ready方法，
9、互相不冲突。方法，互相不冲突。$(document).ready(function()/do something);$(function()/do something);2.2.利用利用$创建创建DOM DOM 元素元素JavaScript创建创建DOM 的方法的方法创建节点元素创建节点元素创建文本节点创建文本节点将文本节点作为孩子添加到节点将文本节点作为孩子添加到节点document.onclick=function()var oNewP=document.createElement(p);var oText=document.createTextNode(这是一个感人肺这是一个感人肺腑的故
10、事腑的故事);oNewP.appendChild(oText);document.body.appendChild(oNewP);2.2.利用利用$创建创建DOM DOM 元素元素jQuery创建创建DOM 的方法的方法$()$(document).click(function()var oNewP=$(这是一个感人肺腑的故事这是一个感人肺腑的故事);$(document.body).append(oNewP););3.3.包装包装JavaScriptJavaScript对象对象JS对象在对象在JQ中的引用方法：使用中的引用方法：使用$选取选取$(this)$(document)$(docum
11、ent.body)$(window)var oDiv;$(oDiv)3.3.包装包装JavaScriptJavaScript对象对象JQ与与JS代码可以共存，但在一个表达式中不能混代码可以共存，但在一个表达式中不能混写写JavaScript中的原生对象可以调用原生的方法中的原生对象可以调用原生的方法/属性属性JQ对象可以调用对象可以调用JQ中的方法中的方法$(this).html()/jq的写法的写法 this.innerHTML /js的写法的写法$(this).innerHTML /错误！错误！this.html()/错误！错误！4.4.使用使用$调用调用jQureyjQurey的功能函数
12、的功能函数jQuery中提供了很多功能函数，完成诸多方中提供了很多功能函数，完成诸多方面的功能，涉及面的功能，涉及Javascript的方方面面。的方方面面。调用方法：调用方法：$.4.4.使用使用$调用调用jQureyjQurey的功能函数的功能函数var sStr=123456 ;sStr=$.trim(sStr);alert(sStr.length);【例例】$引用功能函数的用法。引用功能函数的用法。10.3 jQuery10.3 jQuery与与CSS3CSS3CSS1：1996年由年由W3C推出推出CSS2：1998年推出，陆续得到多数浏览器支持年推出，陆续得到多数浏览器支持CSS3
13、：陆续发布中，吸取了：陆续发布中，吸取了web发展的需求，提出发展的需求，提出了很多新颖的了很多新颖的CSS特性。增强了选择器，如属性选特性。增强了选择器，如属性选择器，位置选择器等。择器，位置选择器等。存在的问题：各浏览器对存在的问题：各浏览器对CSS3的支持还有待提高。的支持还有待提高。jQuery：提供了几乎：提供了几乎CSS3下的所有选择器，具有下的所有选择器，具有很好的兼容性，使理论上的很好的兼容性，使理论上的CSS3选择器变成了事选择器变成了事实。实。10.3 jQuery10.3 jQuery与与CSS3CSS3CSS 选择器参考手册10.4 10.4 使用选择器使用选择器基本选
14、择器基本选择器层叠选择器层叠选择器属性选择器属性选择器位置选择器位置选择器过滤选择器过滤选择器反向过滤选择器反向过滤选择器10.4.1 10.4.1 基本选择器基本选择器$(#id)id选择器选择器$(tagName)标签选择器，标签选择器，返回数组返回数组$(.class)类选择器，返回数组类选择器，返回数组$(*)选择文档中的所有的元素选择文档中的所有的元素组合形式：组合形式：$(E.C)选择样式名称为选择样式名称为C的的E标记标记$(E#I)选择选择id为为I的的E标记标记10.4.2 10.4.2 层叠选择器层叠选择器目前主流的浏览器尚不完全支持目前主流的浏览器尚不完全支持CSS3选择
15、器，选择器，jQuery在满足兼容性的前提下，实现按照在满足兼容性的前提下，实现按照CSS3方方式选择元素式选择元素10.4.2 10.4.2 层叠选择器层叠选择器$(E,F)选择所有选择所有E元素元素和所有和所有F 元素元素（并集）（并集）$(E F)选择选择E元素内部的所有元素内部的所有F元素元素（子孙节（子孙节点）点）$(EF)选择父元素是选择父元素是E的所有的所有F元素元素（子节点）（子节点）$(E+F)选择选择E元素后面的直接兄弟元素后面的直接兄弟F元素元素（兄（兄弟）弟）$(EF)选择选择E元素后面的兄弟元素后面的兄弟F元素元素，包括非直，包括非直接兄弟节点接兄弟节点10.4.2
16、10.4.2 层叠选择器层叠选择器$(E F)选择选择E元素下面的所有子节点，包括非直元素下面的所有子节点，包括非直接子节点接子节点$(form input)10.4.2 10.4.2 层叠选择器层叠选择器$(EF)选择选择E元素下面的直接子节点元素下面的直接子节点$(forminput)10.4.2 10.4.2 层叠选择器层叠选择器$(E+F)选择选择E元素后面的直接兄弟节点元素后面的直接兄弟节点$(label+input)10.4.2 10.4.2 层叠选择器层叠选择器$(E+F)选择选择E元素后面的直接兄弟节点元素后面的直接兄弟节点$(form+input)10.4.2 10.4.2
17、层叠选择器层叠选择器$(EF)选择选择E元素后面的兄弟节点，包括非直接元素后面的兄弟节点，包括非直接兄弟节点兄弟节点$(labelinput)10.4.3 10.4.3 属性选择器属性选择器基本语法：基本语法：$(E属性及其逻辑关系属性及其逻辑关系)E属性属性 设置了该属性的标记设置了该属性的标记E属性属性=V 属性值等于属性值等于V的的E标记标记E属性属性!=V 属性值不等于属性值不等于V的的E标记标记E属性属性=V 属性值属性值以以V开头开头的的E标记标记E属性属性$=V 属性值属性值以以V结尾结尾的的E标记标记E属性属性*=V 属性值属性值包含包含V的的E标记标记10.4.3 10.4.
18、3 属性选择器属性选择器a text-decoration:none;color:#000000;(设置了设置了href)10-6.html 10-7.html(设置了设置了href)10-8.html（设置了（设置了href和和title）10-9.html（设置了（设置了href）isaac.html（设置了（设置了href和和title）10.4.3 10.4.3 属性选择器属性选择器1、选择设置了、选择设置了title属性的属性的a标记，将其样式设置为标记，将其样式设置为显示下划线显示下划线2、将链接属性为、将链接属性为10-9.html的的a标记，样式设置为标记，样式设置为显示下划线
19、显示下划线3、将链接以、将链接以http:/开头的开头的a标记设置显示下划线标记设置显示下划线4、将链接以、将链接以html结尾的结尾的a标记设置为显示下划线标记设置为显示下划线5、将链接中包含、将链接中包含isaac字符串的设置显示下划线字符串的设置显示下划线10.4.4 10.4.4 位置选择器位置选择器$(E:first)选择所有E元素的第一个$(E:last)选择所有E元素的最后一个$(“E:even”)选择所有E元素偶数序列（全局计数，从0开始）$(“E:odd”)选择所有E元素奇数序列（全局计数，从0开始）10.4.4 10.4.4 位置选择器位置选择器$(E:first-chil
20、id)选择作为第一个子节点存在作为第一个子节点存在的E$(E:last-child)选择作为最后一个子节点存在作为最后一个子节点存在的E$(E:nth-child(n)选择作为作为第n个子节点存在的E（从1开始计数）$(E:nth-child(odd|even)选择作为奇数序或偶数序存在的子节点E（局部计数，从1开始）$(E:parent)选择作为作为父节点的E元素10.4.4 10.4.4 位置选择器位置选择器$(E:eq(n)选择所有的E中序号为n+1的元素$(E:gt(n)选择E元素中序号大于n的所有元素（不包括n本身）$(E:lt(n)选择E元素中序号小于n的所有的元素（不包括n本身）
21、10.4.4 10.4.4 位置选择器位置选择器$(p:first)$(p:last)$(p:first-child)$(p:last-child)$(p:odd)$(p:even)$(p:nth-child(odd)$(p:nth-child(even)$(p:eq(2)$(p:gt(2)$(p:lt(2)10.4.4 10.4.4 位置选择器位置选择器$(p:first)整个页面排序整个页面排序$(p:first-child)根据各自的父节点排序根据各自的父节点排序10.4.4 10.4.4 位置选择器位置选择器$(p:nth-child(odd)根据各自的父元素单独排序，局部排序根据各自
22、的父元素单独排序，局部排序从从1开始开始$(p:odd)整个页面排序，全局排序整个页面排序，全局排序从从0开始开始10.4.4 10.4.4 位置选择器位置选择器$(p:nth-child(1)从开始计数从开始计数10.4.4 10.4.4 位置选择器位置选择器$(p:eq(2)整个页面排序整个页面排序从从0开始开始$(p:gt(2)整个页面排序整个页面排序从从0开始开始$(p:lt(2)整个页面排序整个页面排序从从0开始开始10.4.4 10.4.4 位置选择器位置选择器从从1开始计数开始计数nth-child(n):nth-child(odd|even)：奇偶从：奇偶从1开始计数开始计数从
23、从0开始计数的选择器开始计数的选择器oddeven:eq():gt():lt()10.4.4 10.4.4 位置选择器位置选择器练习：练习：1、选择最后一个、选择最后一个p标记标记2、选择每个、选择每个div中的偶数行中的偶数行3、选择页面中所有奇数、选择页面中所有奇数p标记标记4、选择所有、选择所有p标记中的第标记中的第5个个5、选择、选择3-6的的p标记标记6、选择、选择1-3的的p标记标记补充补充slice()函数的使用函数的使用7、选择、选择3-5的标记的标记10.4.4 10.4.4 位置选择器位置选择器【练习练习】利用利用jQuery使用使用CSS3的选择器：的选择器：:nth-c
24、hild(n)。.myclassbackground-color:#069;color:#900;波斯帝国波斯帝国 罗马帝国罗马帝国 匈奴帝国匈奴帝国 拜占庭帝国拜占庭帝国 孔雀王朝孔雀王朝 查理曼帝国查理曼帝国10.4.4 10.4.4 位置选择器位置选择器【练习练习】实现表格的隔行变色。实现表格的隔行变色。10.4.4 10.4.4 位置选择器位置选择器NameClassBirthdayConstellationMobileisaacW13Jun 24thCancer111815910.4.4 10.4.4 位置选择器位置选择器比较比较:odd 和和:nth-child(odd)的区别的区
25、别$(table tr:nth-child(odd)$(table tr:odd)从从0开始开始从从1开始开始10.4.5 10.4.5 过滤选择器过滤选择器$(E:has(F)选择所有含有F标签的E元素（根据子元素确定父元素）$(E:contains(XX)选择所有E中含有XX文本的元素（按内容做选择）:hidden页面中被隐藏的元素 display=none:disable页面中被禁用了的元素:enable页面中未被禁用的元素:animated所有处于动画中的元素:header所有标题元素.10.4.5 10.4.5 过滤选择器过滤选择器:text所有文本输入框,inputtype=tex
26、t:checkbox所有复选框,inputtype=checkbox:input表单元素，包括:password密码文本框,inputtype=password:radio所有单选按钮,inputtype=radio:submit所有提交按钮,inputtype=submit,buttontype=submit:reset所有重置按钮,inputtype=reset,buttontype=reset:image图片提交按钮,inputtype=image:file上传文件的元素,inputtype=file:button按钮，inputtype=button和 标记:selected下拉菜单中
27、被选中的项:checked复选框和单选框中被选中的项10.4.5 10.4.5 过滤选择器过滤选择器【例】输出表单上填写的各项信息。【例】输出表单上填写的各项信息。JavaScript：表单元素的获取：表单对象表单元素的获取：表单对象.name元素值的获取：元素值的获取：文本框：元素文本框：元素.value下拉框：元素下拉框：元素.options元素元素.selectedIndex.value单选按钮：元素单选按钮：元素i.value（checked为为true）复选按钮：元素复选按钮：元素i.value（checked为为true）10.4.5 10.4.5 过滤选择器过滤选择器$(:tex
28、t)$(:password)$(:selected)$(:radio:checked)$(:checkbox:checked)10.4.6 10.4.6 反向过滤器反向过滤器:not(标签/过滤器)$(input:not(:checked)过滤掉所有被checked的input元素 10.4.6 10.4.6 反向过滤器反向过滤器:not(过滤器)$(:input:not(:checked)过滤掉所有被checked的input,select,textarea元素 10.4.6 10.4.6 反向过滤器反向过滤器连续使用反向过滤器$(:input:not(:checkbox):not(text
29、area)10.5 jQuery10.5 jQuery遍历函数遍历函数 jQuery遍历：each()jQuery 过滤：find(),has(),filter(),add(),not(),is()jQuery 祖先：parent(),parents(),offsetParent()jQuery 后代：children()jQuery 同胞：next(),prev(),siblings()10.5.1 jQuery10.5.1 jQuery遍历遍历遍历元素的方法遍历元素的方法each(遍历函数遍历函数)遍历函数有一个参数：遍历函数有一个参数：index，标识集合中每个，标识集合中每个元素的索引
30、值（从元素的索引值（从0开始）开始）10.5.1 jQuery10.5.1 jQuery遍历遍历【实例实例】设置每幅图片的设置每幅图片的title属性。属性。10.5.1 jQuery10.5.1 jQuery遍历遍历$(function()$(img).each(function(index)this.title=这是第这是第+index+幅图，幅图，id是：是：+this.id;););遍历元素的方法遍历元素的方法each(遍历函数遍历函数)遍历函数有一个参数：遍历函数有一个参数：index配合配合this对象的使用对象的使用10.5.2 jQuery10.5.2 jQuery过滤过滤查询
31、函数查询函数find()find().find(表达式表达式/JQ对象对象/DOM元素元素)搜索所有与指定参数匹配的元素。搜索所有与指定参数匹配的元素。可以方便地选择正在处理的元素的子孙元素。可以方便地选择正在处理的元素的子孙元素。Hello,how are you?$(p).find(span)Hello 10.5.2 jQuery10.5.2 jQuery过滤过滤查询函数查询函数find()find().has(选择器选择器/DOM元素元素)功能同功能同$(E:has(F)选择所有含有选择所有含有F标签的标签的E元素元素（根据子元素确定父元素）（根据子元素确定父元素）将匹配元素集合缩减为拥
32、有匹配指定选择器或将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元元素的子集。素的子集。111$(“ul).has(“li)11110.5.2 jQuery10.5.2 jQuery过滤过滤查询函数查询函数find()find()has()和和find()的比较的比较has()的功能同的功能同:has()过滤器，获取当前对象的子过滤器，获取当前对象的子集集find()的功能同的功能同E F层叠选择器，获取当前元素层叠选择器，获取当前元素的子孙元素的子孙元素10.5.2 jQuery10.5.2 jQuery过滤过滤查询函数查询函数find()find()HomeNews Lastest N
33、ews All News Sports Basketball Football Volleyball Weather Todays Weather Forecast Contact Me10.5.2 jQuery10.5.2 jQuery过滤过滤查询函数查询函数find()find()$(li).has(ul).css(background-color,#3C6);10.5.2 jQuery10.5.2 jQuery过滤过滤查询函数查询函数find()find()$(li).find(ul).css(background-color,#3C6);10.5.2 jQuery10.5.2 jQue
34、ry过滤过滤过滤函数过滤函数filter()filter()在集合中继续过滤元素在集合中继续过滤元素.filter(通用表达式通用表达式).filter(过滤函数过滤函数)filter()函数过滤功能更加灵活，强大函数过滤功能更加灵活，强大10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter().filter(通用表达式通用表达式)选择器表达式，可以有多个条件，用逗号分隔(逻辑“或或”关系)属性表达式写在“”中用途：实现链式操作（递进并且）书写简便10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()fi
35、lter()【实例实例】实现实现DIV样式的修改。样式的修改。.middle背景色背景色#FCF蓝色边框蓝色边框10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()$(div).css(background,#FCF);$(div.middle).css(border,2px solid#009);10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()$(div).css(background,#FCF).filter(.middle).css(border,2px solid#009
36、);10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()$(ahref*=isaac)注意：在注意：在filter()的参数中，不能使用的的参数中，不能使用的=，而只能使用而只能使用!=,=,“$=和和*=。$(a).filter(href*=isaac).filter(.middle).filter(class*=middle).filter(class=middle)10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()【练习练习】筛选筛选div元素。元素。id是是blue以及以及
37、class是是green的所有元素的所有元素class是是green，并且并且id是是ok的所有元素的所有元素10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()【练习练习】筛选筛选div元素。元素。id是是1和和class是是middle的的所有元素所有元素id是是1并且并且class是是middle的所有元素的所有元素10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()【练习练习】使用使用filter函数实现表格的隔行变色。函数实现表格的隔行变色。$(table tr).filt
38、er(:nth-child(odd)$(table tr:nth-child(odd)$(table tr:odd)$(table tr).filter(:odd)10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter().filter(过滤函数过滤函数)用户可以利用函数进行自定义筛选条件。用户可以利用函数进行自定义筛选条件。过滤函数需要返回布尔值。过滤函数需要返回布尔值。10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()【实例实例】修改所有修改所有DIV的背景，并将第的背景，并将第2个
39、个DIV和和id取值为取值为“fourth”的的DIV加上蓝色边框。加上蓝色边框。10.5.2 jQuery10.5.2 jQuery过滤过滤过滤函数过滤函数filter()filter()$(function()$(div).css(background,#FCF).filter(function(index)return index=1|this.id=fourth;).css(border,2px solid#009););10.5.2 jQuery10.5.2 jQuery过滤过滤添加函数添加函数add()add()向集合中添加元素向集合中添加元素.add(选择器选择器/DOM元素元素
40、/jQuery对象对象)相等于相等于*,*$(imgalt).add(imgtitle)$(imgalt,imgtitle)10.5.2 jQuery10.5.2 jQuery过滤过滤删除函数删除函数not()not()从集合中删除元素从集合中删除元素.not(表达式表达式).not()的功能同的功能同:not()过滤器，但表达式提供了过滤器，但表达式提供了比过滤器更便捷的方式比过滤器更便捷的方式not适用于反向逻辑问题适用于反向逻辑问题10.5.2 jQuery10.5.2 jQuery过滤过滤删除函数删除函数not()not()【实例实例】将绿色和蓝色之外的将绿色和蓝色之外的DIV加上边框
41、。加上边框。10.5.2 jQuery10.5.2 jQuery过滤过滤删除函数删除函数not()not()$(div:not(.green):not(#blue)$(div).not(.green,#blue)练习：练习：使用使用filter()+表达式表达式使用使用filter()+函数函数10.5.2 jQuery10.5.2 jQuery过滤过滤删除函数删除函数not()not()list item 1 list item 2 list item 3 list item 4 list item 5【练习练习】将将id是是notli之外的之外的li加上背景色。加上背景色。$(li:not
42、(id=notli)$(li).not(id=notli)10.5.2 jQuery10.5.2 jQuery过滤过滤删除函数删除函数not()not()【练习练习】筛选出除复选框和单选按钮之外的其筛选出除复选框和单选按钮之外的其他元素。他元素。not()函数not过滤器filter()函数+表达式filter()函数+函数参数10.5.2 jQuery10.5.2 jQuery过滤过滤函数函数is()is()is(表达式)：表达式：字符串值，包含匹配元素的选择器表达式。根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。10
43、.5.2 jQuery10.5.2 jQuery过滤过滤函数函数is()is()【实例实例】判断判断input的双亲是否是的双亲是否是form。$(“input:checkbox).parent().is(form)10.5.2 jQuery10.5.2 jQuery过滤过滤函数函数is()is()aaa【实例实例】判断判断div是否隐藏。是否隐藏。$(div).is(:hidden)10.5.3 jQuery10.5.3 jQuery函数函数获取祖先、孩子、兄弟获取祖先、孩子、兄弟获取祖先：parent(),parents(),offsetParent()parent()：获得被选元素集合的
44、所有父元素parents()：获得被选元素集合的所有祖先元素offsetParent()：获得用于定位的第一个父元素jQuery 后代：children()children():返回被选元素集合的所有直接子元素jQuery 同胞：next(),prev(),siblings()prev():返回被选元素集合的上一个同胞元素next():返回被选元素集合的下一个同胞元素siblings():获得被选元素集合的同辈元素10.5.3 jQuery10.5.3 jQuery函数函数获取祖先、孩子、兄弟获取祖先、孩子、兄弟HelloHello Again$(p).parent(.selected).cs
45、s(background,pink);10.5.3 jQuery10.5.3 jQuery函数函数获取祖先、孩子、兄弟获取祖先、孩子、兄弟 Hello Hello Again And Again And One Last Time$(div).children(.selected).css(color,blue);10.5.3 jQuery10.5.3 jQuery函数函数获取祖先、孩子、兄弟获取祖先、孩子、兄弟 Hello Hello Again And Again$(p).prev().css(background,yellow);$(p).prev(.selected).css(back
46、ground,yellow);10.5.3 jQuery10.5.3 jQuery函数函数获取祖先、孩子、兄弟获取祖先、孩子、兄弟 list item 1 list item 2 list item 3 list item 4 list item 5$(li.third-item).siblings().css(background-color,pink);实战实战-两级伸缩菜单两级伸缩菜单两级伸缩菜单两级伸缩菜单-页面部分HomeNews Lastest News All News Sports Basketball Football Volleyball Weather Todays We
47、ather Forecast Contact Me两级伸缩菜单两级伸缩菜单jQueryjQuery实现实现介绍介绍2个个jQuery函数函数show():显示元素hide():隐藏元素10.6 10.6 管理选择结果管理选择结果获取元素的个数获取元素的个数提取元素提取元素10.6.1 10.6.1 获取元素的个数获取元素的个数size()【实例实例】页面单击添加页面单击添加div块，并显示序号。块，并显示序号。10.6.2 10.6.2 提取元素提取元素 将将jQuery对象转换为对象转换为JS对象对象index 获取指定位置元素，从获取指定位置元素，从0开始开始.get(index)获取指定
48、位置元素获取指定位置元素.get()获取元素对象数组获取元素对象数组10.6.2 10.6.2 提取元素提取元素$(function()alert($(div)0.title);/JS对象对象alert($(div).get(0).title);/JS对象对象alert($(div:eq(0).attr(title);alert($(div).attr(title);)10.6.2 10.6.2 提取元素提取元素 【实例实例】提取页面上的提取页面上的div元素，并逆序创建元素，并逆序创建在页面上。在页面上。10.6.2 10.6.2 提取元素提取元素 【实例实例】鼠标指向鼠标指向DIV时，显示其序号。时，显示其序号。.index()：获取元素所在的位置。：获取元素所在的位置。
