jQuery温习篇 强大的JQuery选择器

maomaoyu卟大

maomaoyu卟大

2016-02-19 13:04

下面图老师小编要向大家介绍下jQuery温习篇 强大的JQuery选择器,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

在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");
添加样式

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

: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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

匹配所有的可见元素

$("div:visible")//元素来匹配

$(".divH:visible")//根据class来匹配

例子就不用多讲了,大家对于jQuery应该都有一定的见地了。呵呵…

展开更多 50%)
分享

猜你喜欢

jQuery温习篇 强大的JQuery选择器

Web开发
jQuery温习篇 强大的JQuery选择器

jQuery的强大选择器小结

Web开发
jQuery的强大选择器小结

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery之Document元素选择器篇

Web开发
jquery之Document元素选择器篇

jQuery 选择器理解

Web开发
jQuery 选择器理解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 选择器部分整理

Web开发
jquery 选择器部分整理

Jquery选择器 $实现原理

Web开发
Jquery选择器 $实现原理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

基于JQuery.timer插件实现一个计时器

基于JQuery.timer插件实现一个计时器

autoconf 和automake生成Makefile文件

autoconf 和automake生成Makefile文件
下拉加载更多内容 ↓