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)表单选择器:

时间: 2024-11-10 10:18:57

JavaScript--选择器的相关文章

HTML5的JavaScript选择器介绍

在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定name属性的元素 getElementsByTagName:返回所有指定标签的元素 HTML5新增的选择器,方法有两种: querySelector:根据选择器规则返回第一个符合要求的元素 querySelectorAll:根据选择器规则返回所有符合要求的元素 支持新的HTML5 JavaScript选

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

jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器变得简洁易用. 而且避免了易错问题. jquery选择器返回的永远是一个数组对象,如果没有找到指定的元素,就会返回一个空的数组, 所以判断一个jquery对象是否存在时,不能用如下语句 if($("tr")){ //code } 而应该用数组长度来判断,如下语句 if($("tr

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

× 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByClassName()呢?id属性.标签名.class属性并没有什么优劣之分啊.终于,HTML5新增了getElementsByClassName()方法,由于在CSS布局中类名的广泛使用,该方法正好切中痛点,使得通过类名选取元素不再麻烦,成为最欢迎的一个方法.接下来,本文将详细介绍该方法 使用 HTM

深入理解javascript选择器API——4种元素选择器

× 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElementById().getElementsByTagName().getElementsByName()和document.all()4种.接下来,将对这4种方法进行详细介绍 getElementById() 任何HTML元素可以有一个id属性,在文档中该值必须唯一 [注意]若浏览器中出现多个id名

使用HTML5的JS选择器操作页面中的元素

上一篇文章介绍了HTML5新增的JavaScript选择器,今晚正式实践一下,使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元

jquery选择器练习

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="http://www.w3scho

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

× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的jQuery>一书中,nth-of-type()选择器参照CSS中的nth-of-type选择器,于1.9版本新增,本文将详细介绍该内容 通用形式 :nth-of-type() 个人认为,:nth-of-type()选择器不应该归类于子元素选择器,也不完全等同索引选择器,因为其索引是指特定元素的索引,但

jquery练习笔记

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> #pannel { position:relative; width:100px; height:100px; b

司徒正美文章列表

由于本人对司徒正美文章的喜欢,特此整理文章列表如下. 一个带完整的RBAC授权系统的rails应用(第一部分)(司徒正美, 3年前, 12/6549) 一个带完整的RBAC授权系统的rails应用(第二部分)(司徒正美, 3年前, 1/1135) 随机生成十六进制颜色(司徒正美, 3年前, 0/340) ruby中的类变量与实例变量(司徒正美, 3年前, 0/231) ruby模拟多个构造器(司徒正美, 3年前, 0/153) ruby的实例方法(写方法,读方法与读写方法)(司徒正美, 3年前,

带标题和描述的JS幻灯片特效

<script type="text/javascript"> //选择器 function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}} //焦点滚动图 点击移动 function movec() { var