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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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中利用XML技术构造远程服务(上)
2006/10/09 PHP
一个显示天气预报的程序
2006/10/09 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python3+Appium安装使用教程
2019/07/05 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
python 用struct模块解决黏包问题
2020/11/07 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
2014年后勤工作总结范文
2014/12/16 职场文书
起诉状范本
2015/05/20 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
python基础入门之字典和集合
2021/06/13 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS
深入理解pytorch库的dockerfile
2022/06/10 Python