JavaScript--选择器
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--选择器的更多相关文章
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- jQuery 选择器和JavaScript 选择器的技巧与异常原因
jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...
- 使用HTML5的JavaScript选择器操作页面中的元素
<!doctype html><html lang="en"> <head> <meta charset="UTF-8& ...
- HTML5的JavaScript选择器介绍
在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...
- JavaScript选择器和节点操作
感谢:链接(视频讲解很清晰) 下文中讲解用到Chrome中的console调试台,如果不懂最好先看一下:链接 JavaScript选择器 作用:选取html中的标签等内容,最重要的还是为节点的操作(增 ...
- 深入理解javascript选择器API系列第二篇——getElementsByClassName
× 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...
- 深入理解javascript选择器API系列第一篇——4种元素选择器
× 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
随机推荐
- python opencv:使用鼠标当做画笔
鼠标事件 import cv2 events=[i for i in dir(cv2) if 'EVENT'in i] print events 双击画圆圈 import cv2 import num ...
- flask_migrate
flask_migrate 1. flask_migrate doc: https://flask-migrate.readthedocs.io/en/latest/ 1.1. 简介 ...
- twisted task.cpperator
twisted task.cpperator 1. twisted task.cpperator 1.1. 简介-cooperator 官方文档: https://twistedmat ...
- ES5-Object扩展方法
1.Object新增一个方法,Object.create();,用来以一个对象为基础创建另一个对象,新建的对象的__proto__指向基础对象 var obj = {name:'maycpou',a ...
- POJ1321棋盘问题(暴搜)
在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆放方案C. ...
- Fiddler一次性发多个请求
Fiddler一次发送多个请求 选中某个请求: 选中 : Raw, 将request数据拷出: 包含请求header和request body 替换request header里面的ASP.NET_S ...
- PyCharm调试方法
1.调试部分代码以后继续执行剩余代码,点击Resume Program:
- mcast_set_if函数
#include <errno.h> #include <string.h> #include <net/if.h> #include <sys/ioctl. ...
- 测试Nginx中location的优先级!(重点)
location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ~ 开头表示区分大小写的正则匹配 ~* 开头表示不区分大小写的正则匹配 ^~ 开头表示uri以某个常规字符串开头 ...
- MySQL忘记密码如何重置
一]进入服务器下,我用的是centos版本 vim /etc/my.cnf 1 vim[二]找到mysqld的部分然后在下面添加上一句代码,意思是跳过密码直接进入,然后保存退出 skip-grant- ...