JQ选择器.docx

一·通过一个简单的例子，简单区分下jQuery对象与DOM对象： p id=”imooc”/p 我们要获取页面上这个id为imooc的div元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。 普通处理，通过标准JavaScript处理： var p = document.getElementById(imooc); p.innerHTML = 您好！通过慕课网学习jQuery才是最佳的途径; p.style.color = red; 通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。 jQuery的处理： var $p = $(#imooc); $p.html(您好！通过慕课网学习jQuery才是最佳的途径).css(color,red); 通过$(#imooc)方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。 二·利用数组下标的方式读取到jQuery中的DOM对象 HTML代码 div元素一/div div元素二/div div元素三/div JavaScript代码 var $div = $(div) //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = red //操作dom对象的属性 用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0 通过jQuery自带的get()方法 jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引： var $div = $(div) //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = red //操作dom对象的属性 其实我们翻开源码，看看就知道了，get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。 三·通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了 HTML代码 div元素一/div div元素二/div div元素三/div JavaScript代码 var div = document.getElementsByTagName(div); //dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素 $first.css(color, red); //给第一个元素设置颜色 通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色 四·选择器 1. id选择器：一个用来查找的ID，即元素的id属性 $( #id ) id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器 值得注意： id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的 2. 类选择器，顾名思义，通过class样式类名来获取节点 描述： $( .class ) 类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选 同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的 右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较 我们不难发现： jQuery除了选择上的简单