jQuery温习篇 强大的JQuery选择器

在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

 

匹配所有正在执行动画效果的元素

 

暂无例子

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxpsy.html