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 isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
vue 运用mock数据的示例代码
Nov 07 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 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
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
js玩一玩WSH吧
2007/02/23 Javascript
javascript  Error 对象 错误处理
2008/05/18 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python如何实现爬取B站视频
2020/05/20 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
《秋姑娘的信》教学反思
2014/02/28 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
政风行风建设责任书
2014/07/23 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL