jQuery的强大选择器小结


Posted in Javascript onDecember 27, 2009

一 基本选择器
$("input“) :选择所有是input标签的元素
$("#input1"):选择id为input1的元素
$(".acss"):选择所有包含acss 这个css类样式的
代码

<body> 
<a href="">link</a> 
<input id="input1" class="acss"> 
<input id="Text1" class="acss"> 
<input id="Text2" > 
<script> 
var oo = $("input"); //oo是以上3个的集合 
var pp = $("#input1");//pp是第一个 
var qq = $(".acss");//qq 是前两个的集合 
</script> 
</body>

可以用以上3个尽兴组合式的查询
var ww = $("input.acss"); //选择具有acss的input标签元素
var ee = $("input#Text1.acss");//选择具有acss 的 id为 Text1的 标签为input的元素
二、子选择器
父节点和直接子节点用(>)隔开,即实现子选择器方式
<p class="acss"> 
<a href="" id="a1"></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
</p> 
<p> 
<a href="" id="a2"></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
</p> 
<script> 
var oo = $("p a "); //选择了p下面的所有的a 
var pp = $("p>a"); //选择了2个a元素 ,id为a1 和a2 
var qq = $("p.acss a"); //选择了id为a1的元素 
</script>

三、特征选择器
根据元素特征进行选择 a[href^=http://]
代码
<div> 
<input id="Text3" name="myInput" /> 
<input id="Text5" name="myput" /> 
<input id="Text4" name="yourInput" /> 
<a id="a3" href="http://www.baidu.com"></a> 
<a id="a4" href="www.baidu.com"></a> 
</div> 
<script> 
var oo = $("a[href^=http://]"); //选择href以 http:// 开头的a。a3选中 
var pp = $("input[name$=Input]"); //选择name以 Input 结尾的input 。Text3,Text4选中 
var qq = $("a[href*=com]"); //选择href以 包含com的a 。a3,a4选中 
var ww = $("input[id=Text3]"); //选择正好等于的 
</script>

另外 jQuery还提供了 has方法,如上面例子中
div:has(input) 含义是。选择包含input的所有div
注意: div input 是选择的是div中的所有input 元素
四、位置选择器
位置选择器主要是根据元素的位置进行选择,
div a:first 返回页面第一个在div中的a
div a last 返回页面最后一个在div中的a
div odd 返回页面偶数位置的div
div even 返回页面奇数位置的idv
div first-child 返回div 中第一个子选择
div last-child 返回div 中最后一个子选择
only-child 没有兄弟节点的元素
nth-child(n):第n个子节点
eq(n) 第n个匹配元素
gt(n) n之后的匹配元素 不包含
lt(n) n之前的匹配元素 不包含
五、jQuery自定义选择
名称 说明 解释
:input 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素: $(":input")
:text 匹配所有的文本框 查找所有文本框: $(":text")
:password 匹配所有密码框 查找所有密码框: $(":password")
:radio 匹配所有单选按钮 查找所有单选按钮
:checkbox 匹配所有复选框 查找所有复选框: $(":checkbox")
:submit 匹配所有提交按钮 查找所有提交按钮: $(":submit")
:image 匹配所有图像域 匹配所有图像域: $(":image")
:reset 匹配所有重置按钮 查找所有重置按钮: $(":reset")
:button 匹配所有按钮 查找所有按钮: $(":button")
:file 匹配所有文件域 查找所有文件域: $(":file")

名称 说明 解释
:enabled 匹配所有可用元素 查找所有可用的input元素: $("input:enabled")
:disabled 匹配所有不可用元素 查找所有不可用的input元素: $("input:disabled")
:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) 查找所有选中的复选框元素: $("input:checked")
:selected 匹配所有选中的option元素 查找所有选中的选项元素: $("select option:selected")
Javascript 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
Jquery 效果使用详解
Nov 23 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
详解JS预解析原理
Jun 16 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 #Javascript
JavaScript 拾漏补遗
Dec 27 #Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 #Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 #Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 #Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 #Javascript
jQuery中的常用事件总结
Dec 27 #Javascript
You might like
php数组去重复数据示例
2014/02/25 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
任意位置显示html菜单
2007/02/01 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
js实现滚动条自动滚动
2020/12/13 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python字典排序的方法
2019/10/12 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
优质的学校老师推荐信
2013/10/28 职场文书
机械个人求职信范文
2014/01/24 职场文书
技术员个人工作总结
2015/03/03 职场文书
《我是什么》教学反思
2016/02/16 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript