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 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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
php上传、管理照片示例
2006/10/09 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
解析php取整的几种方式
2013/06/25 PHP
php cli换行示例
2014/04/22 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
小程序实现投票进度条
2019/11/20 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
python技能之数据导出excel的实例代码
2017/08/11 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python 修改本地网络配置的方法
2019/08/14 Python
python单例设计模式实现解析
2020/01/07 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
生产部主管岗位职责
2014/01/06 职场文书
小学清明节活动总结
2014/07/04 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
保护环境的宣传语
2015/07/13 职场文书