- 浏览: 183420 次
- 性别:
- 来自: 深圳
文章分类
最新评论
- 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同,即选择器都可以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤选择器,内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器
- 1. 基本过滤选择器
- 选择器
- 描述
- 返回
- 示例
- :first
- 选取第一个元素
- 单个元素
- $(“div:first”) 选取所有 <div> 元素中第一个 <div> 元素
- :last
- 选取最后一个元素
- 单个元素
- $(“div:last”) 选取所有 <div> 元素中最后一个 <div> 元素
- :not(selector)
- 去除所有与给定选择器匹配的元素
- 集合元素
- $(“input:not(.myClass)”) 选取 class 不是 myClass 的 <input> 元素
- :even
- 选取索引是偶数的所有元素,索引从 0 开始
- 集合元素
- $(“input:even”) 选取索引是偶数的 <input> 元素
- :odd
- 选取索引是奇数的所有元素,索引从 0 开始
- 集合元素
- $(“input:odd”) 选取索引是奇数的 <input> 元素
- :eq(index)
- 选取索引等于 index 的元素( index 从 0 开始)
- 集合元素
- $(“input:eq(1)”) 选取索引等于 1 的 <input> 元素
- :gt(index)
- 选取索引大于 index 的元素( index 从 0 开始)
- 集合元素
- $(“input:gt(1)”) 选取索引大于 1 的 <input> 元素(注:大于 1 ,而不包括 1 )
- :lt(index)
- 选取索引小于 index 的元素( index 从 0 开始)
- 集合元素
- $(“input:lt(1)”) 选取索引小于 1 的 <input> 元素(注:小于 1 ,而不包括 1 )
- :header
- 选取所有的标题元素,例如 h1,h2,h3 等等
- 集合元素
- $(“:header”) 选取网页中所有的 <h1> , <h2> , <h3> ……
- :animated
- 选取当前正在执行动画的所有元素
- 集合元素
- $(“div:animated”) 选取当前正在执行动画的 <div> 元素
- 2 .内容过滤选择器
- 选择器
- 描述
- 返回
- 示例
- :contains(text)
- 选取含有文本内容为“ text ”的元素
- 集合元素
- $(“div:contains(‘ 我 ”)”) 选取含有文本“我”的 <div> 元素
- :empty
- 选取不包含子元素或者文本的空元素
- 元素集合
- $(“div:empty”) 选取不包含子元素(包括文本元素)的 <div> 元素
- :has(selector)
- 选取含有选择器所匹配的元素的元素
- 元素集合
- $(“div:has(p)”) 选取含有 <p> 元素的 <div>
- :parent
- 选取含有子元素或者文本的元素
- 元素集合
- $(“div:parent”) 选取拥有子元素(包括文本元素)的 <div>
- 3 .可见性过滤选择器
- 选择器
- 描述
- 返回
- 示例
- :hidden
- 选取所有不可见的元素
- 集合元素
- $(“:hidden”) 选取所有不可见的元素,包括 <input type=”hidden”/> , <div style=”display:none;”> 和 <div style=”visibility:hidden;”> 等元素,如果只想选取 <input> 元素,可以使用 $(“input:hidden”)
- :visible
- 选取所有可见元素
- 集合元素
- $(“div:visible”) 选取所有可见的 <div>
- 4 .属性过滤选择器
- 选择器
- 描述
- 返回
- 示例
- [attribute]
- 选取拥有此属性的元素
- 集合元素
- $(“div[id]”) 选取拥有属性 id 的元素
- [attribute=value]
- 选取属性的值为 value 的元素
- 集合元素
- $(“div[title=test]”) 选取属性 title 为“ test ”的 <div> 元素
- [attribute!=value]
- 选取属性的值不等于 value 的元素
- 集合元素
- $(“div[title!=test]”) 选取属性 title 不等于“ test ”的 <div> 元素(注:没有属性 title 的 <div> 元素也会被选取)
- [attribute^=value]
- 选取属性的值以 value 开始的元素
- 集合元素
- $(“div[title^=test]”) 选取属性 title 以“ test ”开头的 <div> 元素
- [attribute$=value]
- 选取属性的值以 value 结尾的元素
- 集合元素
- $(“div[title$=test]”) 选取属性 title 以“ test ”结束的 <div> 元素
- [attribute*=value]
- 选取属性的值含有 value 的元素
- 集合元素
- $(“div[title$=test]”) 选取属性 title 含有“ test ”的 <div> 元素
- [selector1][selector2][selector]
- 用属性选择器合并成一个复合的属性选择器,满足多个条件。没选取一次,缩小一次范围
- 集合元素
- $(“div[id][title$=’test’]”) 选取拥有属性 id ,并且属性 title 以“ test ”结束的 <div> 元素
- 5 .子元素过滤选择器
- 选择器
- 描述
- 返回
- 示例
- :nth-child
- (index/even/odd/equation)
- 选取每个父元素下的第 index 个子元素或者奇( odd )偶( even )元素,( index 从 1 开始)
- 集合元素
- :eq(index) 只匹配一个元素,而 :nth-child 将为每一个父元素匹配子元素,并且 :nth-child(index) 的 index 是从 1 开始的,而 :eq(index) 是从 0 开始的
- :first-child
- 选取每个父元素的第一个子元素
- 集合元素
- :first 只返回单个元素,而 :first-child 将为每个父元素匹配第一个子元素。
- 例如: $(“ul li:first-child”) 选取每个 <ul> 中第一个 <li> 元素
- :last-child
- 选取父元素的最后一个子元素
- 集合元素
- :last 只返回单个元素,而 :last-child 将为每个父元素匹配最后一个子元素。
- 例如: $(“ul li:last-child”) 选取每个 <ul> 中最后一个 <li> 元素
- :only-child
- 如果某个元素的它父亲中唯一的子元素,那么将会被匹配,如果父元素中含有其他元素,则不会被匹配
- 集合元素
- $(“ul li:only-child”) 在 <ul> 中选取是唯一子元素的 <li> 元素
- 6 .表单对象属性过滤选择器
- 选择器
- 描述
- 返回
- 示例
- :enabled
- 选取所有可用元素
- 集合元素
- $(“#form1 :enabled”) 选取 id 为“ form1” 的表单中所有可用元素
- :disabled
- 选取所有不可用元素
- 集合元素
- $(“#form1 :disabled”) 选取 id 为“ form1” 的表单中所有不可用元素
- :checked
- 选取所有被选中的元素(单选框,复选框)
- 集合元素
- $(“input :checked”) 选取所有被选中的 <input> 元素
- :selected
- 选取所有被选中的选项元素(下拉列表)
- 集合元素
- $(“select :selected”) 选取所有被选中的选项元素
- 改变表单内可用 <input> 元素的值,代码如下:
- $(“form1 input:enabled”).val(“ 这里的值改变了 ”);
- 获取多选框选中的个数,代码如下:
- $(“input : checked ”).length;
- 获取下拉框选中的内容,代码如下:
- $(“select:selected”).text();
- 同理,其他对象属性选择器的操作与此类似
- 7 .表单对象属性过滤选择器
- 选择器
- 描述
- 返回
- 示例
- :input
- 选取所有的 <input>,<textarea>,
- <select>,<button> 元素
- 集合元素
- $(“:input) 选取所有的 <input>,<textarea>,<select>,
- <button> 元素
- :text
- 选取所有的单行文本框
- 集合元素
- $(“:text”) 选取所有的单行文本框
- :password
- 选取所有的密码框
- 集合元素
- $(“:password”) 选取所有的密码框
- :radio
- 选取所有的单选框
- 集合元素
- $(“:radio”) 选取所有的单选框
- :checkbox
- 选取所有的多选框
- 集合元素
- $(“:checkbox”) 选取所有的多选框
- :submit
- 选取所有的提交按钮
- 集合元素
- $(“:submit”) 选取所有的提交按钮
- :image
- 选取所有的图形按钮
- 集合元素
- $(“:image”) 选取所有的图形按钮
- :reset
- 选取所有的重置按钮
- 集合元素
- $(“:reset”) 选取所有的重置按钮
- :button
- 选取所有的按钮
- 集合元素
- $(“:button”) 选取所有的按钮
- :file
- 选取所有的上传域
- 集合元素
- $(“:file”) 选取所有的上传域
- :hidden
- 选取所有的不可见元素
- 集合元素
- $(“:hidden”) 选取所有的不可见元素
- 得到表单内表单元素的个数,代码如下:
- $(“form1 :input”).length;
- 得到表单内单行文本的个数,代码如下:
- $(“form1 :text”).length;
- 得到表单内密码框的个数,代码如下:
- $(“form1 :password”).length;
- 同理,其他表单选择器的操作与此类似
发表评论
文章已被作者锁定,不允许评论。
-
使用SignalR构建一个最基本的web聊天室
2015-01-06 15:09 728使用SignalR,可以使用服务器消息推送到客户端,件demo ... -
lazyload异步加载图片
2014-12-24 15:18 488如果一个网页很长并且有很多图片的话,下载图片就需要很多时间 ... -
checbox,redio超强样式运用
2013-06-04 16:49 757<html xmlns="http://ww ... -
一个避免用户重复点击按钮造成重复数据的小技巧
2013-01-13 16:13 1173<script> //启用 ... -
.net 用JQuery+ajax实现批量上传图片
2012-08-07 23:15 1466先看效果图 点击增加按钮,会增加一个选择框, ... -
类似QQ选择组
2012-04-11 19:07 716<style>td {font:12px;}.ti ... -
javascript弹出窗口大全
2011-09-21 20:27 660关键字: 弹出窗口 如何利用网页弹出各种形式的窗口,我想大家大 ... -
合并单元格
2011-07-21 17:33 840<html ><head><me ... -
一些实用的jQuery代码片段
2011-07-19 15:42 8081.jQuery得到用户IP: $.ge ... -
10大Ajax开发守则
2011-06-08 14:14 7441.前、端后都要做好安全的把关工作不能单靠前端做安全验证工作, ... -
Asp.net前台调后台方法
2011-05-30 16:51 1489 这个当然不用说大家都知道的一种就是ajax ... -
jQuery中常用的函数方法汇总
2011-05-23 00:16 752事件处理 ready(fn) 代 ... -
jquery选择器,过滤器介绍
2011-05-19 19:20 854一、JQuery与JavaScript 1.Jav ... -
jquery函数
2011-05-18 23:25 657函数:after(content)功能:在每个匹配的元素后面添 ...
相关推荐
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。 基本选择器: $(“#myELement”) 选择id值等于myElemen
下面小编就为大家带来一篇JQuery的常用选择器、过滤器、方法全面介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了jQuery过滤选择器用法,包括可见性过滤:hidden、:visible,包含过滤:contains等各种常用的过滤选择器,需要的朋友可以参考下
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div ... 5) $('sele1,sele2') 用‘,'逗号隔开可以...10) $('div:first') 过滤选择器,:first用:与父级元
主要介绍了jQuery过滤选择器用法,实例分析了:first、:last、:odd、:even等等常用的过滤选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下
一、Jquery常用的过滤选择器如下所示: 1、:first,选取第一个元素,比如$(“div:first”)选取第一个div元素 2、:last,选取最后一个元素,比如$(“div:last”)选取最后一个div元素 3、:not(选择器),选取不满足...
2.2.8 表单对象属性过滤选择器/32 2.2.9 表单选择器/34 2.3 综合案例分析—导航条在项目中的应用/37 2.3.1 需求分析/37 2.3.2 效果界面/38 2.3.3 功能实现/38 2.3.4 代码分析/40 2.4 本章小结/41 第3章 ...
Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器 一、基本选择器:jquery中最常用的选择器,也是最简单的选择器。通过元素id、class和标签名等来查找DOM元素。 表-基本选择器 选择器 描述 ...
2.2.5 可见性过滤选择器 2.2.6 属性过滤选择器 2.2.7 子元素过滤选择器 2.2.8 表单对象属性过滤选择器 2.2.9 表单选择器 2.3 综合案例分析—导航条在项目中的应用 2.3.1 需求分析 2.3.2 效果界面 ...
第9章 jQuery常用算法 9.1 jQuery遍历算法 9.2 jQuery祖先算法 9.3 jQuery后代算法 9.4 jQuery同胞算法 9.5 jQuery过滤算法 9.6 对一个列表进行排序 9.7 实现JSN对象数组的排序 9.8 将12343778转成12.343.778的形式 ...
一份清晰明了的,覆盖有jquery选择器、过滤器以及ajax等常用知识点,细节明了(请配合xmind使用)
(详情可以参见:jQuery.ajax文档) 此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。 2. 延迟对象 延迟对象(Deferred Object,jQuery.Deferred对象)是...
Safari 2 3575ms 475ms 753% Opera 9.1 3196ms 326ms 980% Average improvement: 867% <br>下表为jQuery1.1.3与常用的一些JS库选择器的对比: Browser Prototype jQuery Mootools Ext Dojo ...
本文给大家展示50个jquery代码片段,这些代码...//允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分。在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.s
10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 4 jquery对象集合遍历的四种形式及...
jQuery选择器 实例多选反选取消 删选器以及Tab菜单示例 示例:模态编程框 jQuery 样式以及属性操作 示例:TAB切换菜单 jQuery内容操作 点赞以及jQuery css操作 JQuery高度以及位置操作 JQuery 事件绑定的方式 JQuery...