1、选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。

2、选择的优点:

--写法简洁;

--完善的事件处理机制。

3、基本选择器:

--基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用);

4、层次选择器:

--如果想通过DOM之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器;

--$("prev ~ div")选择器只能选择"#prev"元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取;

5、过滤选择器:

--过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以 ":" 开头;

--按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器;

--1)基本过滤选择器:

--2)内容过滤选择器:内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上;

--3)可见性过滤选择器:根据元素的可见和不可见状态来选择相应的元素;

--可见选择器:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(<input type="hidden"/>) 和visible:hidden之类的元素;

--4)属性过滤选择器:通过元素的属性来获取相应的元素

--5)子元素过滤选择器:

--nth-child()选择器详解如下:

  --①:nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素;

  --②:nth-child(2):能选取每个父元素下的索引值为2的元素;

  --③:nth-child(3n):能选取每个父元素下索引值是3的倍数的元素;

  --④:nth-child(3n+1):能选取每个父元素下索引值是3n+1的元素;

--6)表单对象属性过滤选择器:此选择器主要对所选择的表单进行过滤:

--7)表单选择器:

JavaScript--选择器的更多相关文章

  1. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

    × 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...

  2. jQuery 选择器和JavaScript 选择器的技巧与异常原因

    jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...

  3. 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法

    前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...

  4. 使用HTML5的JavaScript选择器操作页面中的元素

    <!doctype html><html lang="en"> <head>     <meta charset="UTF-8& ...

  5. HTML5的JavaScript选择器介绍

    在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...

  6. JavaScript选择器和节点操作

    感谢:链接(视频讲解很清晰) 下文中讲解用到Chrome中的console调试台,如果不懂最好先看一下:链接 JavaScript选择器 作用:选取html中的标签等内容,最重要的还是为节点的操作(增 ...

  7. 深入理解javascript选择器API系列第二篇——getElementsByClassName

    × 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...

  8. 深入理解javascript选择器API系列第一篇——4种元素选择器

    × 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...

  9. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  10. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

随机推荐

  1. 201771010135杨蓉庆《面向对象程序设计(java)》第二周学习总结

    第一部分:理论知识学习部分 3.1 标识符:由字母.下划线.美元符号和数字组成, 且第一个符号不能为数字,可用作:类名.变量名.方法名.数组名.文件名等.有Hello.$1234.程序名.www_12 ...

  2. Python读取MNIST数据集

    MNIST数据集获取 MNIST数据集是入门机器学习/模式识别的最经典数据集之一.最早于1998年Yan Lecun在论文: Gradient-based learning applied to do ...

  3. hive启动报错(整合spark)

    spark整合hive后,hive启动报错: ls: cannot access /export/servers/spark/lib/spark-assembly-*.jar: No such fil ...

  4. Linux 命令中 which、whereis、locate 命令的用法

    which 命令 which 命令的作用是,在 PATH 变量指定的路径中搜索可执行文件的所在位置.它一般用来确认系统中是否安装了指定的软件. (1)命令格式 which 可执行文件名称 wherei ...

  5. C++中的内联函数

    (1)定义.函数声明和定义时,在返回值类型前加inline关键字. (2)作用.避免调用时的额外开销. (3)使用情况.函数体很小,且频繁调用. (4)本质.通过牺牲代码段空间,来提高程序运行的时间效 ...

  6. springboot后端时间到前端,相差8小时,时间格式不对

    spring boot后台时间正确,返回给前台的时间不正确,和后台差8个小时 { "code": 1, "msg": "SUCCESS", ...

  7. 学习之学习--混沌大学商学院--第一课--HHR计划

    <学习之学习> 第一课:混沌初开 李善友 1,课程目标:建立个人的多元思维模型,帮助企业找到创新驱动的增长战略. 2,创新:第二曲线创新,创新理论之父熊彼特. 3,核心课:第二曲线,非连续 ...

  8. 七 Spring的分模块开发的配置,保存客户案例

    Spring的分模块开发的配置 加载配置文件的时候,加载多个 在一个配置文件中引入多个配置文件(常用) 保存客户案例 applicationContext.xml: <?xml version= ...

  9. Java 调用系统系统可执行文件

    public class Test { public static Map<String, String> executeCmd(String cmd) { Runtime rt = Ru ...

  10. Linux centosVMware php-fpm的pool、php-fpm慢执行日志、open_basedir

    一.php-fpm的pool vim /usr/local/php/etc/php-fpm.conf//在[global]部分增加 include = etc/php-fpm.d/*.conf mkd ...