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 1.5最新版本的改进细节分析
Jan 19 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 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+javascript的日历控件
2009/11/19 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
Python 多线程的实例详解
2017/09/07 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
计算机学生求职信范文
2014/01/30 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
岗位聘任报告
2015/03/02 职场文书
国富论读书笔记
2015/06/26 职场文书
小学记事作文之200字
2019/08/06 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL