开发者社区> zting科技> 正文

jQuery温习篇---强大的JQuery选择器

简介:
+关注继续查看

 学习jQuery已经有1年多的时间了,但是一直由于做WinForm程序开发没有经常实践。现在又开始重拾WebForm开发。写几篇jQuery系列,温习下jQuery框架的知识。

jQuery出世以来,它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理JavaScriptDOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点,它已经被微软官方认可加入VS IDE中拥有强大的智能提示,并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本。

1:首先是JavaScriptDOM  jQuery包装集的区分


1.1:JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有:

1: document.getElementById("ID"):根据ID获取DOM对象。

2document.getElementsByName("name"):根据HTML标记name属性获取一个DOM数组。

3document.getElementsByTagName("Tag"):根据HTMLTag获取一个DOM数组。

1.2jQuery相对DOM则提供了许多可用的方法和属性。

 jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式,它的书写方式和css3.0相似 id#classcss)用.HTMl Tag则直接书写。关于jquery的选择器在下面讲述,这里不急。         

1.3:JavaScriptDOM对象转可以化为jQuery包装集:通过$(element)赴会就为jQuery包装集。

 

2jQuery最强大的就是提供了一个万能的属性选择器。


2.1基本选择器

选择表达式

说明

举例

#id

根据给定的ID匹配一个元素用#

$("#testDiv2")  获取IDtestDiv2的元素

.class

根据给定的类匹配元素(也就是取class的值).

$(".myDiv")    获取classmyDiv的一组元素

element

根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div)

$("div")    获取所有的div元素

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element,隔开

$("#testDiv2,p")

$("p,span,div.myDiv") 获取所有的p,spanclassmyDiv的元素

*

选择所有的元素

$("*")

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

匹配所有索引值为偶数的元素,从开始计数

$("div:even") 
查找第1,3,5div

:odd

匹配所有索引值为奇数的元素,从开始计数

$("div:odd") 
查找第2,4div

: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-child1开始的,而: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系列之目录汇总


本文转自破狼博客园博客,原文链接:http://www.cnblogs.com/whitewolf/archive/2010/04/23/1717994.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19980 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23523 0
jQuery选择器总结[转]
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".
677 0
JQuery选择器之[attribute^=value]使用注意事项
注意事项一: Firefox下JQuery选择器之[attribute^=value]使用注意事项 之前写的一个脚本中用到了 var bindAttrs = $("[databind^='attr'", item);大家都看出存在的问题了吧? 这脚本用了一段时间了,但一直没用Firefox下测试过, 在其它浏览器下都能正常使用! 今天突然有人发现在Firefox下加载的数据不正确, 经过一段时间的调试,最后发现是代码写的有问题, 犯了一个低级的错误,只写了左中括号,忘了写右中括号。
606 0
+关注
3550
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载