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 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
javascript操作css属性
Dec 30 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
js日期联动示例
May 02 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
子页向父页传值示例
2013/11/27 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
python编写爬虫小程序
2015/05/14 Python
Python中的变量和作用域详解
2016/07/13 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
《我不是最弱小的》教学反思
2014/02/23 职场文书
奠基仪式策划方案
2014/05/15 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
房屋认购协议书
2015/01/29 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS