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()选择器的内容.该部分内容并非没有出现在<锋利的 ...
随机推荐
- XCOJ 1249: 全自动奖学金计算系统
1249: 全自动奖学金计算系统 时间限制: 1 Sec 内存限制: 64 MB提交: 305 解决: 54 标签提交统计讨论版 题目描述 宣城校区从今年开始,在原有奖学金制度上,设立专项奖学金. ...
- 电脑读取U盘总提示格式化
参考: https://zhidao.baidu.com/question/588981499.html 1.进入命令提示符界面:在此我们需要以管理员的身份进入命令提示符界面,可以通过右击桌面左下角的 ...
- VS中编码格式的问题(待总结)
今天又遇到这样的事情了,VS中代码明明是正确的,却报某个变量未定义.百思不得解,前面增加了一个换行之后,竟然又神奇般的复原了. 最后确认是编码格式的问题,后来把有问题的那部分代码粘贴到微软的" ...
- 树莓派4B踩坑指南 - (6)安装常用软件及相关设置
安装软件 安装LibreOffice中文包 sudo apt-get install libreoffice-l10n-zh-cn sudo reboot 安装codeblocks并汉化: sudo ...
- 安装scikit-learn
首先到官网下载安装 python ,之后下载setuptools 进行安装. 'python' 不是内部或外部命令 可运行 set PATH=%PATH%;C:\Python34 安装完成之后,运行 ...
- 最全Pycharm教程(39)——Pycharm版本控制之本地Git用法
1.主题 介绍如果通过Pycharm使用本地Git集. 2.准备工作 (1)PyCharm版本为2.7或更高 (2)已经创建一个工程 (3)Git插件可用,对应可执行文件在 Git page页面正确配 ...
- 如何优雅的使用python中的代码注释
在编写代码时,确保您的代码易于被其他人理解时很重要的,给变量,函数起合适的名字以及合理的组织代码都是很好的方法. 使用代码注释时增加代码可读性的另一种方便简单且重要的方法! 1.为什么代码注释如此重要 ...
- Duilib 窗口之间的消息传递
转载:https://www.cnblogs.com/Alberl/p/3404240.html 1.定义消息ID #define WM_USER_POS_CHANGED WM_USER + 2 2. ...
- js实现超范围的数相加
在js中能表示的最大安全整数是 9007199254740991,可以用API Number.MAX_SAFE_INTEGER 看一下 超出范围就会发生精度丢失,像这样 解决方法: 相当于一个字符串 ...
- RGB 和 YUV 的转换公式