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 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
vue配置多页面的实现方法
May 22 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
从vue源码看props的用法
Jan 09 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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+xslt在windows平台上
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
在javascript中对于DOM的加强
2013/04/11 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
bootstrap模态框示例代码分享
2017/05/17 Javascript
Vue自定义指令详解
2017/07/28 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python基础教程之五种数据类型详解
2017/01/12 Python
python机器学习之神经网络(三)
2017/12/20 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
创业计划书怎样才能打动风投
2014/01/01 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
中学教师培训制度
2014/01/31 职场文书
个人党性剖析材料
2014/02/03 职场文书
会计入职心得体会
2016/01/22 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js