锋利的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 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
angular4实现带搜索的下拉框
Mar 25 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
js倒计时小程序
2013/11/05 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python+django快速实现文件上传
2016/10/24 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
影子教师研修方案
2014/06/14 职场文书
初中学习计划书范文
2014/09/15 职场文书
儿园租房协议书范本
2014/12/02 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python