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()选择器的内容.该部分内容并非没有出现在<锋利的 ...
随机推荐
- .NET中的字符串(5):字符串驻留
StringBuilder对象 通过上面的分析可以看出,String类型在做字符串的连接操作时,效率是相当低的,并且由于每做一个连接操作,都会在内存中创建一个新的对象,占用了大量的内存空间.这样就引出 ...
- python opencv:色彩空间
RGB色彩空间 常见的色彩空间 色彩空间的转换 cv2.cvtColor(image, 转换选项) 常见的两个颜色转换 HSV与RGB YUV与RGB inRange方法 函数参数: 第一个参数:是原 ...
- 九、Appium-python-UI自动化之通过text定位
1.通过xpath定位text xpath路径为://android.widget.EditText[@text='请输入包含街道的完整地址'] 2.通过AndroidUIAutomator # 这个 ...
- 树莓派Ubuntu Mate 16.04 修改为国内更新源
收藏:https://blog.csdn.net/wang_shuai_ww/article/details/80386708 更换步骤以root身份打开 /etc/apt/sources.list ...
- 【HV】HVIL-High Voltage Interlock Loop
HVIL高压互锁功能 1.HVIL作用 High Voltage Interlock Loop 高压互锁,是在"ISO6469-3:电动汽车安全技术规范第三部分:人员电气伤害防护" ...
- webstrom激活码
转自https://www.cnblogs.com/mahmud/p/11847825.html 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGlj ...
- 蓝牙/zigbee/nrr24xx
目前使用的短距离无线通信技术及标准主要有Bluetooth.WIFI.ZigBee.UWB.NRF24XX系列产品等.Nordic公司生产的单片集成射频无线收发器NRF24XX系列芯片具有低功耗.支持 ...
- print、println、printf的区别(转载)
printf主要是继承了C语言的printf的一些特性,可以进行格式化输出 print就是一般的标准输出,但是不换行 println和print基本没什么差别,就是最后会换行 System ...
- vue.js 第十课-第十六课
第十课: http://note.youdao.com/noteshare?id=25b5ba45286464856f21eb4b6b391ecd&sub=19C4429995384F72BD ...
- win10 桌面快捷键技术
win 10 的 快捷键技术,使用还是挺流畅舒适的: Windows10技术新增键盘快捷键汇总: 1.贴靠窗口:Win +左/右> Win +上/下>窗口可以变为1/4大小放置在屏幕4个角 ...