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下判断是否为闰年的Datetime包
Oct 26 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
通过js随机函数Math.random实现乱序
May 19 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类Class的概念
2012/06/14 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
理解Python垃圾回收机制
2016/02/12 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python底层封装实现方法详解
2020/01/22 Python
python中shell执行知识点
2020/05/06 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
先进基层党组织材料
2014/12/25 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang