jQuery温习篇 强大的JQuery选择器


Posted in Javascript onApril 24, 2010

在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应该都有一定的见地了。呵呵…

Javascript 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
AngularJS 霸道的过滤器小结
Apr 26 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
javascript 二分法(数组array)
Apr 24 #Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 #Javascript
JavaScript 比较时间大小的代码
Apr 24 #Javascript
google 搜索框添加关键字实现代码
Apr 24 #Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 #Javascript
javascript之AJAX框架使用说明
Apr 24 #Javascript
基于jquery的一个图片hover的插件
Apr 24 #Javascript
You might like
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
浅谈PHP表单提交(POST&GET&URL编/解码)
2017/04/03 PHP
sina的lightbox效果。
2007/01/09 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
详解参数传递四种形式
2015/07/21 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
微信小程序实现星级评分和展示
2018/07/05 Javascript
vue实现图片上传功能
2020/05/28 Javascript
js实现全选和全不选
2020/07/28 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python中random模块详解
2021/03/01 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
成教自我鉴定
2013/10/27 职场文书
给面试官的感谢信
2014/02/01 职场文书
和谐社区口号
2014/06/19 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
感恩教育观后感
2015/06/17 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
小学主题班会教案
2015/08/17 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
2022微信温控新功能上线
2022/05/09 数码科技