参考PPT.pptx

锋利的JQueryJQuery选择器 .NET4班 一组组员：陈龙宽、秦磊、程小娇、王娅、张德婷、宁雷、况建伟、罗冠骁知识回顾Jquery有哪些优势？在页面中如何引入Jquery？关于$(document).ready()函数轻量级、强大的选择器、出色的DOM操作封装、可靠的事件处理机制、完善的Ajax、不污染顶级变量、出色的浏览器兼容性、链式操作方式、隐式迭代、行为层与结构层分离、丰富的插件支持、完善的文档、开源。在编写页面代码中head标签内引入jQuery库后就可以使用Jquery了1.所有在页面运行得JavaScript函数，就必须写在该函数中2.每个页面可以有多个$(document).ready()函数3.可以使用$(function(){….})来代替$(document).ready()函数，作为缩写形式锋利的JQuery本章任务锋利的JQuery了解JQuery选择器和CSS选择器的区别掌握JQuery基本选择器掌握JQuery层次选择器掌握JQuery过滤选择器了解其他选择器本章课程锋利的JQuery2.1 选择器是什么Jquery选择器：jquery选择器按照功能主要分为”选择“和”过滤。并且是配合使用的。可以同时使用组合成一个选择器字符串,同时是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置CSS选择器：它是一项出色的技术,它使得网页结构和表现样式完全分离，CSS选择器共有标签选择器、ID选择器、类选择器等等。如果要让样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元 素就是通过CSS选择器进行控制的，添加使用不同的CSS规则,就可以得到各种不同网页样式CSS选择器以文档元素作为选择符标签选择器ID选择器类选择器群组选择器后代选择器通配选择符常用的CSS选择器 以文档元素的惟一标识的ID作为选择符以文档元素的Class作为选择符多个选择符应用同样的样式规则元素E的任意后代元素F以文档的所有元素作为选择符锋利的JQueryjQuery选择器jQuery分别有3个选择器，6个过滤选择器选择器每个层次选择器使用之前都会有一个“$”符号过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器子元素过滤选择器表达对象属性过滤选择器基本选择器层次选择器表单选择器锋利的JQuery相同点与不同点相同点：区别：CSS选择器:css中很多选择器是IE6所不支持的. jQuery选择器:可以非常便捷和快速的找出特定的DOM元素无需担心浏览的是否支持。都是用于html网页样式布局2.2 JQuery选择器的优势1、简单的写法 $()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。 其中，$(“#ID”)使用代document.getElementById()函数，即通过ID获取元素：$(“tagName”)用来代替document.getElementByTagName()函数，通过标签名获取HTML元素 *选择器的写法可以参见第2.3节。 锋利的JQuery2.2 JQuery选择器的优势2、支持CSS1到CSS3选择器 jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时它也是少量独有的选择器，因此对拥有一定CSS基础的开发人员来说，学习jQuery选择器是件非常容易的事，而对于没有接触过CSS技术的开发人员来说，在学习jQuery选择器的同时也可以掌握CSS选择器的基础规则。使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些选择器。而在jQuery中，开发人员则可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器。 注意：为了能有更快的选择器解析速度，从版本后， jQuery废除了不需要常用的XPath选择器，但在引 用相关插件后，依然可以至此XPath选择器。锋利的JQuery2.2 JQuery选择器的优势3、完善的处理机制 使用jQuery选择器不仅比使用传统的getElementById()和getElementByTagName()函数简洁得多，而且还能避免某些错误。 看下面这个例子： 运行这段代码。浏览器就会报错，原因是网页中没有id为“tt”的元素，改进后的代码如下：divtest/div script type=“text/javascript” If(Document.getElementById(“tt”).){Document.getElementById(“tt”).style.color=“red”; }/scriptdivtest/div script type=“text/jav