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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
javascript闭包入门示例
Apr 30 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
用PHP实现小型站点广告管理
2006/10/09 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
解决python报错MemoryError的问题
2018/06/26 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
MYSQL基础面试题
2012/05/13 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
2015年班组长工作总结
2015/04/10 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang