锋利的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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
iview table高度动态设置方法
Mar 14 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php自定义错误处理用法实例
2015/03/20 PHP
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
关于打架的检讨书
2014/01/17 职场文书
骨干教师个人总结
2015/02/11 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Python基础之元组与文件知识总结
2021/05/19 Python