jQuery学习2 选择器的使用说明


Posted in Javascript onFebruary 07, 2010

1.利用CSS的基本选择器:
a:匹配所有链接<a>元素。
#*:匹配id为*的元素
.*:匹配CSS类为*的元素
a#*id.*class:匹配id为*id,并拥有CSS类为*class的链接元素。
以上是CSS中的写法,在jQuery中用$("")包起来,如:jQuery("p a.Class")

利用子选择器、容器选择器和特性选择器,以下面的为例:

<ul class="myList"> 
<li><a href=http://jquery.com>jQuery supports</a> 
<ul> 
<li><a href="css1">CSS1</a></li> 

<li><a href="css2">CSS2</a></li> 

<li><a href="css3">CSS3</a></li> 

<li>Basic XPath</li> 
</ul> 
</li> 
<li> 
<ul> 
<li>Custom selectors</li> 
<li>Form selectors</li> 
</ul> 
</li> 
</ul>

如果要选择第一个列表<li>中的所有链接做操作就应利用子选择器:ul.myList > li >a 而不能像这样ul.myList li a 因为所有这些链接<a>都是列表<li>元素的后代节点.
子选择器:父节点与直接子节点以右尖括号(>)隔开。
特性选择器:将符合特定内容的元素包起来。比如选择包含以http://开头的href值的链接:a[href^=http://]
input[type=text]:匹配type特性为text的所有<input>元素
div[title=^my]:匹配title特性值以my开头的所有<div>元素。
通过位置选择
a:first:选择器匹配页面上的第一个<a>元素
p:odd,p:even 分别匹配奇数和偶数元素
其他就不一一举例了,如有需要可到相关网站查找。
Javascript 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 #Javascript
JQuery 获取和设置Select选项的代码
Feb 07 #Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 #Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 #Javascript
javascript 函数速查表
Feb 07 #Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 #Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 #Javascript
You might like
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
诚信贷款承诺书
2014/05/30 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python