开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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")  获取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系列之目录汇总


 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/834217,如需转载请自行联系原作者

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

相关文章
jQuery基础选择器
jQuery引入及其选择器 jQuery是JS的一个库,它里面封装了一些我们开发中常用的一些功能;它提供了一些方便的选择器,可以让我们更方便的操作DOM。
0 0
每日一学—jQuery css()方法
jQuery css()方法的学习
0 0
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
0 0
jquery的基础选择器-9
jquery的基础选择器-9
0 0
jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选 择,而且不必担心浏览器的兼容性,写法更加简洁。
663 0
jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式。 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程。
846 0
《jQuery Cookbook中文版》——1.3 用选择器和jQuery函数选择DOM元素
如果你在Web浏览器中运行这个HTML页面,就会看到这段代码执行一个浏览器alert()方法,告诉我们该页面包含6个元素。我首先选择所有的元素,然后用length属性返回jQuery包装器集中元素的数量,并将其传递给alert()方法。
828 0
跟我学jquery(二)大话jquery选择器 .
本篇博客我将带大家来学习一下jquery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquery的操作都是基于对象上的,我们只有正确的选择好了我们要操作的对象,我们才能进行我们下一步的操作。
420 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
JS零基础入门教程(上册)
立即下载
JavaScript异步编程
立即下载