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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
js实现坦克移动小游戏
Oct 28 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python 布尔操作实现代码
2013/03/23 Python
Python入门教程之if语句的用法
2015/05/14 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python模块导入的细节详解
2018/12/10 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
工商管理系学生的自我评价分享
2013/11/29 职场文书
产品质量承诺书
2014/03/27 职场文书
小学新学期寄语
2014/04/02 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python