锋利的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 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
js style动态设置table高度
Oct 21 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 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 zend 相对路径问题
2009/01/12 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
javascript 闭包
2011/09/15 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
Python 常用string函数详解
2016/05/30 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
关于Java finally的面试题
2016/04/27 面试题
上班看电影检讨书
2014/02/12 职场文书
小学学校评估方案
2014/06/08 职场文书
校车安全责任书
2014/08/25 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Python关于OS文件目录处理的实例分享
2021/05/23 Python