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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
12 种使用Vue 的最佳做法
Mar 30 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
yii框架搜索分页modle写法
2016/12/19 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
js 对象是否存在判断
2009/07/15 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
npm 语义版本控制详解
2019/09/10 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
pyramid配置session的方法教程
2013/11/27 Python
python模块restful使用方法实例
2013/12/10 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python全栈之列表数据类型详解
2019/10/01 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
三个Unix的命令面试题
2015/04/12 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
应届生财务管理求职信
2013/11/06 职场文书
国庆节演讲稿
2014/05/27 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js