jquery获取css中的选择器(实例讲解)


Posted in Javascript onDecember 02, 2013

开始写之前先复习一下元素和节点的区别:

元素是W3C文档对象模型(DOM)当中使用最广泛的节点之一。

元素拥有关联的“属性”。

XmlElement类拥有许多方法来访问它的“属性”(GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, 等等)。

你也可以使用“Attributes”属性来返回一个支持“名字”或者“序号”访问的“XML属性集”。

那么,从XmlElement类的解释来看,我们很容易就知道XmlNode和XmlElement类的区别了:

XmlElement类是只拥有“属性”的一个节点,而XmlNode则是不仅拥有“属性”,还拥有“子节点”的一个节点。

所以,我们在使用它们的时候,如果你需要获取或者设置节点中的innerText或者innerXml,那么你就需要用XmlNode;而如果你需要获取或者设置节点本身的属性(参数)的时候,你就需要用XmlElement,当然,你也可以用(XmlElement)对XmlNode进行转换得到。

下面开始进入正题

在javascript中,除了对id的选择器比较好取一些,其他的都不是很好取,jquery在这一块要比它优秀多了,提供了很多的获取方法主要包括

1、基础选择器(主要包括标签选择器,id选择器,类选择器,通用选择器,组选择器)

$("#divId") 获取ID为divId的元素
 $("a") 获取所有<a>元素

$(".bgRed") 获取所用CSS类为bgRed的元素

$("*")获取页面所有元素

$("#divId, a, .bgRed")获取三个满足条件的选择器

2、层级选择器(主要包括子元素选择器、后代元素选择器、紧邻同辈元素选择器、相邻同辈元素选择器)

2.1   子元素选择器>  ===============选择儿子元素

<ul class="topnav"> 
    <li>Item 1</li> 
    <li>Item 2  
        <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul> 
       </li> 
    <li>Item 3</li> 
</ul> <script>    $("ul.topnav > li").css("border", "3px double red");</script>

这是官方的代码,可以参考以下其用法

2.2   后代选择器 直接用空格表示 不仅包括儿子还包括孙子........===============选择后代元素

 <form> 
    <div>Form is surrounded by the green outline</div> 
    <label>Child:</label> 
    <input name="name" />     <fieldset> 
      <label>Grandchild:</label> 
      <input name="newsletter" /> 
    </fieldset> 
  </form> 
  Sibling to form: <input name="none" /> 
<script>    $("form input").css("border", "2px dotted blue");</script>

2.3    紧邻同辈元素选择器 所有符合条件的都可以会被选择 主要是选择一个元素之后的平行元素 ===============选择指定元素的下一个平辈元素
   <form>     <label>Name:</label> 
    <input name="name" /> 
    <fieldset> 
      <label>Newsletter:</label> 
      <input name="newsletter" /> 
    </fieldset> 
  </form> 
  <input name="none" /> 
<script>$("label + input").css("color", "blue").val("Labeled!")</script>

2.4  相邻同辈元素选择器 ===============选择指定元素的所有指定的平辈元素,可以隔几个不是指定的元素
  <div>div (doesn't match since before #prev)</div> 
  <span id="prev">span#prev</span> 
  <div>div sibling</div>   <div>div sibling <div id="small">div niece</div></div> 
  <span>span sibling (not div)</span> 
  <div>div sibling</div> 
<script>$("#prev ~ div").css("border", "3px groove blue");</script>

3、表单选择器主要选择表单、用的时间要注意$(":input")注意引号里面的冒号也可以选择类型如$(":button")不过多介绍

4、基本过滤器主要包括

名称 说明 举例
:first 匹配找到的第一个元素 查找表格的第一行:$("tr:first")
:last 匹配找到的最后一个元素 查找表格的最后一行:$("tr:last")
:not(selector) 去除所有与给定选择器匹配的元素 查找所有未选中的 input 元素: $("input:not(:checked)")
:even 匹配所有索引值为偶数的元素,从 0 开始计数 查找表格的1、3、5...行:$("tr:even")
:odd 匹配所有索引值为奇数的元素,从 0 开始计数 查找表格的2、4、6行:$("tr:odd")
:eq(index) 匹配一个给定索引值的元素 注:index从 0 开始计数 查找第二行:$("tr:eq(1)")
:gt(index) 匹配所有大于给定索引值的元素 注:index从 0 开始计数 查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)")
:lt(index) 选择结果集中索引小于 N 的 elements 注:index从 0 开始计数 查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)")
:header 选择所有h1,h2,p一类的header标签. 给页面内所有标题加上背景色: $(":header").css("background", "#EEE");
:animated 匹配所有正在执行动画效果的元素 只有对不在执行动画效果的元素执行一个动画特效: $("#run").click(function(){   $("div:not(:animated)").animate({ left: "+=20" }, 1000); });

5、内容过滤器(主节点的子节点为文本节点)

名称 说明 举例
:contains(text) 匹配包含给定文本的元素 查找所有包含 "John" 的 div 元素:$("div:contains('John')")
:empty 匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector) 匹配含有选择器所匹配的元素的元素 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");
:parent 匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的 td 元素:$("td:parent")

6、可见性过滤器  Visibility Filters

:hidden

:visible

7、属性过滤器 Attribute Filters

名称 说明 举例
[attribute] 匹配包含给定属性的元素 查找所有含有 id 属性的 div 元素: $("div[id]")
[attribute=value] 匹配给定的属性是某个特定值的元素 查找所有 name 属性是 newsletter 的 input 元素: $("input[name='newsletter']").attr("checked", true);
[attribute!=value] 匹配给定的属性是不包含某个特定值的元素 查找所有 name 属性不是 newsletter 的 input 元素: $("input[name!='newsletter']").attr("checked", true);
[attribute^=value] 匹配给定的属性是以某些值开始的元素 $("input[name^='news']")
[attribute$=value] 匹配给定的属性是以某些值结尾的元素 查找所有 name 以 'letter' 结尾的 input 元素: $("input[name$='letter']")
[attribute*=value] 匹配给定的属性是以包含某些值的元素 查找所有 name 包含 'man' 的 input 元素: $("input[name*='man']")
[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器,需要同时满足多个条件时使用。 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的: $("input[id][name$='man']")

8.子元素过滤器 Child Filters

名称 说明 举例
:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) 在每个 ul 查找第 2 个li: $("ul li:nth-child(2)")
:first-child 匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 在每个 ul 中查找第一个 li: $("ul li:first-child")
:last-child 匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 在每个 ul 中查找最后一个 li: $("ul li:last-child")
:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。 在 ul 中查找是唯一子元素的 li: $("ul li:only-child")
Javascript 相关文章推荐
javascript if条件判断方法小结
May 17 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
node.js实现登录注册页面
Apr 08 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
Vue.js用法详解
Nov 13 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 #Javascript
jquery中的过滤操作详细解析
Dec 02 #Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 #Javascript
用JS实现3D球状标签云示例代码
Dec 01 #Javascript
js arguments,jcallee caller用法总结
Nov 30 #Javascript
js中arguments的用法(实例讲解)
Nov 30 #Javascript
JavaScript中的undefined学习总结
Nov 30 #Javascript
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
详解JavaScript中的六种错误类型
2017/09/21 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python构建自定义回调函数详解
2017/06/20 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
大学生职业生涯规划范文
2014/01/22 职场文书
小学一年级评语大全
2014/04/22 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书