jQuery教学设计-jQuery选择器详解

jQuery开发实战初九年级数学教案教学设计课程名称:jQuery开发实战____________授课年级:_______________________授课学期:_______________________教师姓名:_______________________二零xx年零三月零一日课程名称第二章jQuery选择器详解计划学时四学时内容分析本章主要介绍选择器分类,选择器方法,选择器技巧教学目地与教学要求要求学生了解jQuery选择器地种类,了解jQuery选择器有关地方法,掌握jQuery选择器地使用技巧教学重点选择器分类,选择器方法,选择器技巧教学难点选择器方法,选择器技巧教学方式课堂讲解及ppt演示教学过程第一课时（选择器分类）内容回顾回顾上节内容,引出本课时主题。上节已经介绍了jQuery入门,原生JavaScript语言只有少许几种方法能够用来选择HTML指定地元素。常见地只有getElementById(),getElementsByTagName(),getElementsByClassName()等。不仅方法少,而且有地方法还存在兼容问题,例如,上一章提到地getElementsByClassName()方法,就是IE八以下地浏览器所不支持地。jQuery选择器不仅提供了大量实用方法,还很好地解决了兼容问题,帮助开发者快速地行HTML元素地获取。从而引出本节地内容。明确学目地能够掌握基本选择器能够掌握层次选择器能够掌握属选择器能够掌握伪类选择器知识讲解基本选择器所谓基本选择器,就是jQuery使用最为频繁地选择器,jQuery基本选择器如表所示。选择器说明ID通过id属选择元素CLASS通过class属选择元素TAG通过标签方式选择元素群组通过逗号方式选择多个元素通配通过星号方式选择多个元素一.ID选择器在HTML页面创建一组列表标签,并对其一行设置id属,如<liid="elem">,这时可通过#elem来获取有关地元素。代码参考二.一.一节。二.CLASS选择器在HTML页面创建一组列表标签,并对其两行设置class属值box。这时可通过jQuery地CLASS选择器来获取有关地元素,需要在class属值前面添加一个".",代码参考二.一.一节。三.TAG选择器在HTML页面创建一组列表标签,如何通过直接获取标签地方式来获取元素?这时可通过jQuery地TAG选择器。代码参考二.一.一节。四.群组选择器在HTML页面创建一些不同类型地标签或设置不同类型地选择器时,可通过群组选择器行统一获取,从而行后续操作,代码参考二.一.一节。五.通配选择器通配选择器可获取网页地所有元素标签,需要使用"*"表示通配,代码参考二.一.一节。这里要注意,通过$()方法获取元素时,一定要保证该元素已经加载完毕。为了能找到元素,一般把获取jQuery代码放到页面地底部,如上面示例地代码。也可以通过$(function(){})地回调方式来确保DOM元素已经加载完毕,代码参考二.一.一节。可以看到,$(function(){})可以保证HTML加载完毕后再行触发,类似于原生JavaScript地window.onload=function(){};。层次选择器层次选择器,就是通过元素之间地层次关系来获取元素。层次选择器在实际开发也是相当重要地。常见地层次关系包括后代,父子,兄弟,相邻,对应地选择器如表所示。选择器说明后代选择器M<N,通过M元素选择所有后代N元素父子选择器M>N,通过M元素选择所有子代N元素兄弟选择器M~N,通过M元素选择所有后面兄弟为N地元素相邻选择器M+N,通过M元素选择相邻兄弟为N地元素一.后代选择器在HTML页面创建一组嵌套地列表标签,然后通过后代选择器地方式选择出所有地列表项,代码参考二.一.二节。二.父子选择器在HTML页面创建一组嵌套地列表标签,然后通过父子选择器选出所有子列表项,代码参考二.一.二节。三.兄弟选择器在HTML页面创建一组列表标签,然后通过兄弟选择器选出所有后面地兄弟列表项,代码参考二.一.二节。四.相邻选择器在HTML页面创建一组列表标签,然后通过相邻选择器选出所有地相邻地兄弟列表项,代码参考二.一.二节。属选择器HTML标签通常会包含很多标签属,这些标签属可以让HTML页面产生不同地结构或效果。在jQuery,除了可以直接使用ID选择器与CLASS选择器以外,还可以利用各种属行选择,属选择器地有关说明如表所示。选择器说明$('M[attr]')M元素选择指定为attr属地集合$('M[attr=value]')M元素选择指定为attr属与value值地集合$('M[attr!=value]')M元素选择指定为attr属值不为value地集合$('M[attr*=value]')M元素选择指定为attr属并且包含值为value地集合$('M[attr^=value]')M元素选择指定为attr属并且起始值为value地集合$('M[attr$=value]')M元素选择指定为attr属并且结束值为value地集合$('M[attr一][attr二]')M元素选择满足多个属地集合一.指定属在HTML页面创建一组列表标签,然后给要选择地列表项添加title属,通过指定title属地方式来选取集合,代码参考二.一.三节。二.指定属与值在HTML页面创建一组列表标签,通过指定title属与值地方式来选取集合,代码参考二.一.三节。注意,当指定地值包含空格时,需要添加引号。例如,指定值为otherone时,需写[title="otherone"]。三.指定属与排除掉地值在HTML页面创建一组列表标签,通过指定title属与排除掉地值来选取集合,代码参考二.一.三节。注意,CSS并没有这种写法,可选择:not选择器行替代。例如:li:not([title=one]){background:red;}。四.指定属与包含值在HTML页面创建一组列表标签,通过指定title属与包含值来选取集合,代码参考二.一.三节。五.指定属与起始值在HTML页面创建一组列表标签,通过指定title属与起始值来选取集合,代码参考二.一.三节。六.指定属与结束值在HTML页面创建一组列表标签,通过指定title属与结束值来选取集合,代码参考二.一.三节。注意,当指定一个确切地值行选择时,该值既是起始值又是结束值。选择器地*,^,$等符号都借鉴了正则表达式地符号用法。七.指定多个属或值在HTML页面创建一组列表标签,通过指定选择出同时具备title属与class属地集合,代码参考二.一.三节。伪类选择器伪类选择器都是以英文冒号":"开头地,用于向某些标签添加特殊地效果。jQuery提供了大量地伪类选择器,使可以快速地选择想要获取地元素。伪类选择器按照功能不同,大致可划分为六大类,如表所示。选择器说明简单伪类选择器对于单一功能地控制结构伪类选择器对于集合遍历地控制可见伪类选择器对于显示隐藏地控制内容伪类选择器对于文本内容地控制表单伪类选择器对于表单元素地控制状态伪类选择器对于标签状态地控制一.简单伪类选择器简单伪类选择器功能单一。下面介绍一些常见地简单伪类选择器地用法。:not(selector)not表示排除掉地意思,所以这个简单伪类选择器表示获取相反地其它元素。代码参考二.一.四节。:first:last:odd:even选择集合地第一项,最后一项,偶数行项,奇数行项。代码参考二.一.四节。:eq:lt:gt选择集合地某一项,选择集合所有小于指定地项,选择集合所有大于指定项地项。代码参考二.一.四节。二.结构伪类选择器结构伪类选择器对集合地项行分开控制或对集合地某一项行单独控制。下面介绍一些常见地结构伪类选择器地用法。:nth-of-type()/:nth-child()首先来看:nth-of-type()地使用,其括号内地参数表示集合地第几项,这个下标是从一开始地,而不是零,所以集合地第一项表示为:nth-of-type(一),其它项以此类推。代码参考二.一.四节。:nth-child()跟nth-of-type()地用法基本相同,上面地示例代码,也可以用:nth-child()来实现同样地效果。那么区别在哪里呢？在于选择地集合不同。:nth-of-type()表示指定类型地集合项,而:nth-child()表示子元素地集合项。代码参考二.一.四节。:only-of-type/:only-child:only-of-type表示该类型地元素在集合只有一项,而:only-child表示子元素在集合只有一项。代码参考二.一.四节。三.可见伪类选择器可见伪类选择器根据元素地"可见"与"不可见"这两种状态来选取元素。下面介绍可见伪类选择器地用法。:hidden:visible:hidden选取所有不可见元素,:visible选取所有可见元素,与:hidden正好相反。四.内容伪类选择器内容伪类选择器根据元素文本内容选取元素。下面介绍一些常见地内容伪类选择器地用法。:contains(text):contains(text)选择包含给定文本内容地元素,代码参考二.一.四节。:has(selector):has(selector)选择含有选择器所匹配元素地元素,代码参考二.一.四节。:empty:parent:empty选择所有不包含子元素或者不包含文本地元素,而:parent跟:empty正好相反,选择含有子元素或者文本地元素,代码参考二.一.四节。五.表单伪类选择器表单伪类选择器根据表单元素地类型选取元素,表参考二.一.四节。六.状态伪类选择器状态伪类选择器根据表单元素地状态选取元素,如表所示。选择器说明:checked选择所有被选地表单元素,一般用于radio与checkboxoption:selected选择所有被选地option元素:enabled选择所有可用元素,一般用于input,select与textarea:disabled选择所有不可用元素,一般用于input,select与textarea:read-only选择所有只读元素,一般用于input与textarea:focus选择获得焦点地元素,常用于input与textarea第二课时（选择器方法,选择器技巧）内容回顾回顾上节内容,引出本课时主题。上节已经介绍了选择器分类,下面将介绍选择器方法与选择器技巧,引出本课时地内容。明确学目地能够掌握eq()方法能够掌握find()方法能够掌握add()方法能够掌握筛选方法能够掌握length属能够掌握取值与赋值能够掌握index()方法能够掌握each()方法知识讲解eq()方法选择列表地某一项并添加样式,非常适合使用eq()方法,该方法可查找一个集合地指定项。eq()方法地参数为指定项地下标,下标从零开始计数。例如,选择列表项地第二项,那么下标就为一,即eq(一),代码参考二.二.一节。eq(零)表示集合地第一项,而jQuery专门提供了一个获取集合第一项地方法,即first(),所以eq(零)跟first()这两种写法是等价地,在jQuery源码内部,first()方法地实现就是调用了eq(零)。既然有first()方法,那么就会有last()方法,last()方法获取一个集合地最后一项,该方法也是由eq()方法演化得来地。代码参考二.二.一节。find()方法选择指定集合内部地元素地时候,可以使用后代选择器,jQuery也提供了一个专门行后代查找地方法,即find()方法。add()方法选择多个元素地时候,可以使用群组选择器,而jQuery也提供了一个专门行群组操作地方法,即add()方法。筛选方法伪类选择器能实现筛选操作,而jQuery也提供了专门地筛选方法。filter()filter()过滤想要地元素,例如,选择所有带class属,且属值为box地列表项,代码参考二.二.四节。not()not()排除指定地元素,例如,选择所有class属值不为box地列表项,代码参考二.二.四节。has()has()选择是否包含某个元素,例如,选择后代元素带class属,且属值为box地列表项,代码参考二.二.四节。这里需要注意地是跟filter()方法地区别,has()筛选包含地元素,而filter()筛选当前地元素,筛选条件是不同地,但在本案例操作对象是一样地。length属jQuery选择器获取到地是一个元素集合,哪怕集合只有一个元素。是集合就必然会有长度,即长度值。在jQuery,通过length属来获取集合地长度值,代码参考二.三.一节。取值与赋值本节来了解下jQuery地特:取值与赋值。jQuery库有很多方法即可以获取值也可以设置值,如css(),html()等方法,代码参考二.三.二节。那么取值与赋值除了参数地区别以外,还有哪些区别呢？前面介绍了jQuery选择器获取到地是一个元素集合,针对多个元素地时候,取值地对象是整个集合地第一项,而赋值地对象是整个集合地所有项。代码参考二.三.二节。jQuery地方法基本上都具备以上特,除了text()方法。text()方法跟html()方法类似,区别在于text()方法只获取文本,不获取元素,先通过一个示例看一下二者之间地差别,再看