在jQuery出世以来，它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架，它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果，轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点，它已经被微软官方认可加入VS IDE中拥有强大的智能提示，并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本。 1：首先是JavaScript的DOM 和 jQuery包装集的区分 1.1:在JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有： 1: document.getElementById("ID")：根据ID获取DOM对象。 2：document.getElementsByName("name")：根据HTML标记name属性获取一个DOM数组。 3：document.getElementsByTagName("Tag")：根据HTML的Tag获取一个DOM数组。 1.2：jQuery相对DOM则提供了许多可用的方法和属性。 jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式，它的书写方式和css3.0相似 id用#，class（css）用.，HTMl Tag则直接书写。关于jquery的选择器在下面讲述，这里不急。 1.3:JavaScript的DOM对象转可以化为jQuery包装集：通过$(element)赴会就为jQuery包装集。 2：jQuery最强大的就是提供了一个万能的属性选择器。 2.1基本选择器 选择表达式 说明 举例 #id 根据给定的ID匹配一个元素用# $("#testDiv2") 获取ID为testDiv2的元素 .class 根据给定的类匹配元素(也就是取class的值)用. $(".myDiv") 获取class为myDiv的一组元素 element 根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等) $("div") 获取所有的div元素 selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开 $("#testDiv2,p") $("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素 * 选择所有的元素 $("*") 2.2简单选择器 选择表达式 说明 举例 :first 匹配找到的第一个元素 $("div:first") :last 匹配找到的最后一个元素 $("div:last") :eq(index) 匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始 $("div:eq(1)") :gt(index) 匹配所有大于给定索引值的元素 $("div:gt(0)") 查找第1个以后的元素 :lt(index) 匹配所有小于给定索引值的元素 $("div:lt(2)") 查找第一行和第二行的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 $("div:even") 查找第1,3,5个div :odd 匹配所有索引值为奇数的元素，从 0 开始计数 $("div:odd") 查找第2,4个div :not(selector) 去除所有与给定选择器匹配的元素selector为表达式,可以是属性里面的一个值 $("input:not(:checked)") 查找所有未选中的input 元素[注 :checked为自定义筛选选择器,后面会讲到] :header 匹配如 h1, h2, h3之类的标题元素 $(":header").css("background", "#EEE"); 添加样式 :animated 匹配所有正在执行动画效果的元素 暂无例子 3.3：内容选择器 选择表达式 说明 举例 :contains(text) 匹配包含给定文本的元素,只要里面出现即可 $("p:contains('段落')") 找带有段落字样的p元素 :empty 匹配所有不包含子元素或者文本的空元素 $("div:empty") :has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has('p')") :parent 匹配含有子元素或者文本的元素 $("div:parent") 4.4子元素选择器 选择器 说明 举例 :first-child 匹配第一个子元素 $("ul li:first-child")//在每个 ul 中查找第一个 li :last-child 匹配最后一个子元素 $("ul li:last-child")//在每个 ul 中查找最后一个 li :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 可以使用:nth-child(even)//偶数行:nth-child(odd)//奇数行:nth-child(3n):nth-child(2)//索引为2的:nth-child(3n+1):nth-child(3n+2) $("ul li:nth-child(2)")//在每个 ul 查找第 2 个li :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素 $("ul li:nth-child(2)")//在每个 ul 查找第 2 个li :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。 $("ul li:only-child")//在 ul 中查找是唯一子元素的 li 4.5：可见性选择器 选择器 说明 举例 :hidden 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到 $("div:hidden") :visible 匹配所有的可见元素 $("div:visible")//元素来匹配$(".divH:visible")//根据class来匹配 例子就不用多讲了，大家对于jQuery应该都有一定的见地了。呵呵…

　　推荐阅读

　　基于jquery的一个图片hover的插件

先来看看使用方法。 演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htmHTML文件中这样写： 复制代码 代码如下: <div class="jcutter"> <img src="1.jpg" alt=""> <div class="jcutter-content"> 这是点开>>>详细阅读

本文标题：jQuery温习篇 强大的JQuery选择器

地址：http://www.17bianji.com/kaifa2/JS/26532.html

 1/2    1