锋利的jQuery 要点归纳(一) jQuery选择器


Posted in Javascript onMarch 21, 2010

1 基本选择器

$(#id)
    根据给定的id匹配一个元素
$(.class)
    根据给定的类名匹配元素
$(element)
    根据给定的元素名匹配元素
$(*)
    匹配所有元素
$(selector1,selector2,...,selectorN)
    将每一个选择器匹配到的元素合并后一起返回

2 层次选择器

$("ancestor descendant")
    选取ancestor元素里的所有descendant(后代)元素
$("parent > child")
    只选取parent元素下的child(子层级)元素,与$("ancestor descendant")有区别,前者选择所有后代元素(含且不限于子层级)
$('prev + next')
    选取紧接在prev元素后的next元素
$('prev ~ siblings')
    选取prev元素之后的next元素

3 过滤选择器

3.1 基本过滤选择器

$("selector:first")
    选取第一个元素
$("selector:last")
    选取最后一个元素
$("selector:not(selector2)")
    去除所有与给定选择器匹配的元素
$("selector:even")
    选取索引是偶数的所有元素,索引从0开始
$("selector:odd")
    选取索引是奇数的所有元素,索引从0开始
$("selector:eq(index)")
    选取索引等于index的元素,index从0开始
$("selector:gt(index)")
    选取索引大于index的元素,index从0开始
$("selector:lt(index)")
    选取索引小于index的元素,index从0开始
$(":header")
    选取所有的标题元素,如h1,h2,h3等等
$(":animated")
    选取当前正在执行动画的所有元素

3.2 内容过滤选择器

$(":contains(text)")
    选取含有文本内容为"text"的元素
$(":empty")
    选取不包含子元素或者文本的空元素
$(":has(selector2)")
    选取含有选择器所匹配的元素的元素
$(":parent")
    选取含有子元素或者文本的元素

3.3 可见性过滤选择器

$(":hidden")
    选取所有不可见的元素
$(":visible")
    选取所有可见的元素

3.4 属性过滤选择器

$("selector[attribute]")
    选取拥有此属性的元素
$("selector[attribute=value]")
    选取属性的值为value的元素
$("selector[attribute!=value]")
    选取属性的值不等于value的元素
$("selector[attribute^=value]")
    选取属性的值以value开始的元素
$("selector[attribute$=value]")
    选取属性的值以value结束的元素
$("selector[attribute*=value]")
    选取属性的值含有value的元素
$("selector[selector2][selectorN]")
    用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围,如$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素

3.5 子元素过滤选择器

$(":nth-child(index/even/odd/equation)")
    选取每个父元素下的第index个子元素或者奇偶元素,index从1算起
$("selector:first-child")
    选取每个父元素的第一个子元素
$("selector:last-child")
    选取每个父元素的最后一个子元素
$("selector:only-child")
    如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配

3.6 表单对象属性过滤选择器

$("selector:enabled")
    选取所有可用元素
$("selector:disabled")
    选取所有不可用元素
$("selector:checked")
    选取所有被选中的元素(radio,checkbox)
$("selector:selected")
    选取所有被选中的选项元素(select)

4 表单选择器

$(":input")
    选取所有的<input>,<textarea>,<select>,<button>元素
$(":text")
    选取所有的单行文本框
$(":password")
    选取所有的密码框
$(":radio")
    选取所有的单选框
$(":checkbox")
    选取所有的复选框
$(":submit")
    选取所有的提交按钮
$(":image")
    选取所有的图像按钮
$(":reset")
    选取所有的重置按钮
$(":button")
    选取所有的按钮
$(":file")
    选取所有的上传域
$(":hidden")

    选取所有不可见元素

Javascript 相关文章推荐
Js的MessageBox
Dec 03 Javascript
JavaScript实现禁止后退的方法
Dec 27 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
express.js中间件说明详解
Mar 19 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
vue2.x 对象劫持的原理实现
Apr 19 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 #Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 #Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 #Javascript
js 居中漂浮广告
Mar 21 #Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 #Javascript
javascript中的new使用
Mar 20 #Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 #Javascript
You might like
PHP新手上路(十)
2006/10/09 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python MySQLdb使用教程详解
2018/03/20 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python返回数组的索引实例
2019/11/28 Python
如何解决安装python3.6.1失败
2020/07/01 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
车间主管岗位职责
2013/11/14 职场文书
中学门卫岗位职责
2013/12/26 职场文书
中学生自我鉴定
2014/02/04 职场文书
剪彩仪式主持词
2014/03/19 职场文书
表彰会主持词
2014/03/26 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript