锋利的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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
原生js实现商品筛选功能
Oct 28 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中cookie的使用方法
2014/03/29 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
深入理解Javascript里的依赖注入
2014/03/19 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python线程中对join方法的运用的教程
2015/04/09 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python实现支付宝转账接口
2019/05/07 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python解释器安装教程的方法步骤
2020/07/02 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
给民警的表扬信
2014/01/08 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年教研组工作总结
2014/11/26 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
法定代表人资格证明书
2015/06/18 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
python基础之类方法和静态方法
2021/10/24 Python