原文:https://blog.csdn.net/colorapp/article/details/44279645

一. jQuery选择器是什么
1. CSS选择器
要是某个样式应用于特定的HTML元素,首先需要找到该元素,在CSS中,执行这一任务的表现规则称为CSS选择器。参见之前CSS的学习博客:http://blog.csdn.net/colorapp/article/details/43706585。

2. jQuery选择器
jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。学会使用选择器是学习jQuery的基础,jQuery的行为规则都必须在获取到元素后才能生效。
jQuery选择器的写法与CSS 选择器的写法十分相似,只不过两者的作用效果不同,CSS选择器找到元素后是添加样式,而jQuery选择器找到元素后是添加行为。需要说明的是,jQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大,并且拥有夸浏览器的功能。

二. jQuery选择器的优势
1. 简洁的写法:$()函数在很多 JavaScript 类库中都被作为一个选择器函数来使用,在jQuery中也不例外
2. 支持CSS1到CSS3选择器
3. 完善的处理机制:使用jQuery选择器不仅比使用传统的getElementById() 和 getElementsByTagName() 函数简洁的多,而且还能避免某些错误。需要注意的是,使用$(“#tt”)获取的永远是对象,即使网页上没有此元素。因此需要使用jQuery检查某个元素在网页上是否在存在时,可以使用 if($(“#tt”).length > 0){}根据获取到元素的长度来判断或者if($(“#tt”)[0]){} 转化成DOM对象来判断

三. jQuery选择器
1. 基本选择器
基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,它通过元素id、class 和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。

2. 层次选择器
如果要通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。

可以使用next()方法代替 $(‘prev + next’)选择器,使用nextAll()方法代替 $(‘prev ~ siblings’)选择器

3. 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
(1) 基本过滤选择器

(2)  内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

(3) 可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见来选择相应的元素。

(4) 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

(5) 子元素过滤选择器
子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂,只要将元素的父元素和子元素区分清除,那么使用起来也非常简单。另外要注意它与普通的过滤选择器的区别。

注意:eq(index) 只匹配一个元素,而:nth-child将为每一个符合条件的父元素匹配子元素。同时应该注意到 nth-chile(index) 的 index 是从1开始的,而 :eq(index) 是从0开始的。同理 :first 和 :first-child,:last和:last-child也类似。

(6) 表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素。

4. 表单选择器
为了使用户能够更加灵活地操作表单,jQuery中专门加入了表单选择器。

四 选择器中的一些注意事项
1. 选择器中含有特殊符号的注意事项
选择器中含有“.”、“#”、“(”或“]”等特殊字符。根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理的话就会出错。解决此类错误的方法是使用转义符转义。

2. 选择器中含有空格的注意事项
选择器中的空格也是不容忽视的,多一个空格或少一个空格也许会得到截然不同的结果。带空格为后代选择器,不带空格为过滤选择器。

JQuery选择器(转载)的更多相关文章

  1. jQuery选择器详解及实例---《转载》

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  2. 在.NET中使用JQuery 选择器精确提取网页内容

    1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...

  3. jQuery选择器。 5.21 《深夜还在编码的你》

    (之所以字体弄那么大是因为省眼,程序员不容易,程序员的眼睛更不容易,请保护我们的眼睛) 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 熟练地使用选 ...

  4. jquery 选择器大全

    jquery 选择器大体上可分为4 类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表单选择器 其中过滤选择器可以分为: 1.简单过滤选择器 2.内容过滤选择器 3.可见性过滤选择器 4.属 ...

  5. 【前端学习】【jQuery选择器】

    jQuery选择器     jQuery选择器 本文内容引自于单东林<锋利的jQuery>,未经原作者准许,禁止以商业目的转载发布! 选择器是jQuery的根基,在jQuery中,对事件处 ...

  6. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. 分针网——每日分享: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  8. 分针网—IT教育: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  9. Jquery 使用和Jquery选择器

    jQuery中的顶级对象($) jQuery 中最常用的对象即 $ 对象,要想使用 jQuery 的方法必须通过 $ 对象.只有将普通的 Dom 对象封装成 jQuery 对象,然后才能调用 jQue ...

随机推荐

  1. 合唱队形【dp】

    链接:https://ac.nowcoder.com/acm/contest/1082/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言2621 ...

  2. 在VMware下安装CentOS 7.6

    转载自https://blog.51cto.com/hnyuanzijian/2343716?appinstall=0a.点击左上角文件,新建虚拟机,选择典型安装,并下一步   b.选择稍后安装操作系 ...

  3. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(4.12-加-6.2-加-7.2.5.2)Fused_Operations

    4.12 Fused Operations 融合操作 融合操作通过“fusing”把两个简单的命令融合一起来支持一个更复杂的命令.协议规定这个特性是可选的:如果支持此特性,需要在Figure 247 ...

  4. mybatis-plus热部署mapper.xml插件JRebel MybatisPlus extension,报错:java.lang.NullPointerException

    事件 mybatis转mybatis-plus,结果原来的Jrebel for intrllij 不能热部署mapper.xml文件,百度得知得添加新的插件 JRebel MybatisPlus ex ...

  5. 展开折叠效果 height未知 transition无效

    展开折叠效果,没有设置height时 transition 不起作用 可以设置max-height .default { max-height: 500px; transition: all 1000 ...

  6. 设置Eclipse中的字符集为UTF-8

    Eclipse 修改字符集 默认情况下 Eclipse 字符集为 GBK,但现在很多项目采用的是 UTF-8,这是我们就需要设置我们的 Eclipse 开发环境字符集为 UTF-8, 设置步骤如下: ...

  7. idea的插件库连不上网络

    如果你试遍了网上的方法都没有解决网络问题,建议换个网络,比如切换到电信网络.

  8. js及jsp.java查错的几种方式

    一.js 1.console.log("你想输出的内容"); 2.alert("你想输出的内容"); 3.debugger;(记得打开F12) 4.快速找到js ...

  9. svg 放大缩小后的比例

    function getCoords(evt) { // 计算出当前屏幕与svg的比例    var canvas = document.getElementById("canvase&qu ...

  10. HTML网站右键禁用F12代码 屏蔽审查元素 防止修改页面代码

    <script>//禁止右键 function click(e) { if (document.all) { if (event.button==2||event.button==3) { ...