jQuery选择器之基本选择器与层次选择器
基本选择器
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据给定的元素名称匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
* | 匹配所有的元素 | 集合元素 | $("*")选取所有的元素 |
selector1,selector2,...selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myclass")选取所有<div>,<span>和拥有class为myclass的<p>标签的一组元素 |
层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里的所有 descendant(后代)元素 |
集合元素 | $("div span")选取<div>里 所有<span>元素 |
$("parent>child") | 选取parent元素下的child元素, 与$("ancestor descendant")有区别, $("ancestor descendant")选择的是后代元素 |
集合元素 | $("div>span")选取<div>元素下 元素名是<span>的子元素 |
$("prev+next") | 选取紧邻在prev元素之后 的next元素 |
集合元素 | $(".one+div")选取class为one的 下一个<div>同辈元素 |
$("prev~siblings") | 选取prev元素之后的所有 siblings元素 |
集合元素 | $("#two~div")选取id为two的 元素后面的所有<div>同辈元素 |
$("prev+next")选择器与next()方法的等价关系
选择器 | 方法 | |
等价关系 | $(".one+div") | $(".one").next("div") |
$("prev~siblings")选择器与nextAll()方法的等价关系
选择器 | 方法 | |
等价关系 | $("prev~div") | $("#prev").nextAll("div") |
以上就是本文的全部内容了,希望大家能够喜欢
相关推荐
-
jQuery选择id属性带有点符号元素的方法
本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ
-
jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素
-
老生常谈jquery id选择器和class选择器的区别
实例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" rel="external nofollow" rel="external nofollow" rel=&
-
jQuery 选择器详解
$()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElementById()函数. $("tagName")通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本
-
jquery选择器、属性设置用法经验总结
本人是一名小白,应届毕业生,以前没用过jquery,最近做项目用到了jquery.在做的过程中走了很多弯路,不停的搜索.总结出了一些用法,供大家参考: 最基本的选择器语法包括:id.class.标签.属性,这和css选择器是一致的. ID选择器要在ID前加#,比如要选择一个ID为myDivID的div元素(<div id="myDivID"></div>)可以这样写: 复制代码 代码如下: $("#myDivID"); D是不能重复的,所以I
-
jquery选择器大全 全面详解jquery选择器
选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1.简化代码的编写2.隐式迭代3.无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j
-
基于jQuery选择器之表单对象属性筛选选择器的实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" rel="external n
-
jQuery选择器之层次选择器用法实例分析
本文实例讲述了jQuery选择器之层次选择器用法.分享给大家供大家参考,具体如下: 前面一篇介绍了几种基本的jQuery选择器,今天归纳一下jQuery的层次选择器.DOM元素之间的层次关系主要包括元素的子元素.后代元素.相邻元素和兄弟元素等,我们可以通过DOM元素之间的层次关系来获取想要的元素.为了更好的学习,我们先列出一段HTML代码: <body> <div id="one" class="aaa"> id=one,class=aaa的
-
详解强大的jQuery选择器之基本选择器、层次选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单--jQuery插件的机制及实战).正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器. jQuery选择器类型 jQuery选择器主要分为四类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表
-
jQuery选择器之基本过滤选择器用法实例分析
本文实例讲述了jQuery选择器之基本过滤选择器用法.分享给大家供大家参考,具体如下: 前面一篇介绍了层次选择器,今天我们学习一下jQuery的另一种选择器:基本过滤选择器.过滤选择器可以过滤掉自己不想要的东西,也就是说过滤后留下的都是自己需要的.jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头.按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤.属性过滤.内容过滤.子元素过滤.
-
jQuery选择器之属性筛选选择器用法详解
在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <
-
jQuery选择器之基本选择器用法实例分析
本文实例讲述了jQuery选择器之基本选择器用法.分享给大家供大家参考,具体如下: 初学jQuery,为了能系统地学习好jQuery,今天特意把自己的学习心得归纳一下,贴上来与初学者共享,今天我主要总结的是jquery的基本选择器. 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它主要是通过元素的id.class.标签等来查找HTML中的DOM元素.在网页中每个id只能使用一次,class允许重复使用.在jQuery应用中,可以使用这些基本选择器来完成绝大多数工作,下面我们主要来
-
jQuery选择器之基本选择器与层次选择器
基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能使用一次,class允许重复使用. 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 e
-
jQuery基本选择器和层次选择器学习使用
本文实例为大家分享了jQuery选择器的具体实现代码,供大家参考,具体内容如下 1. 基本选择器 <html> <head> <meta charset="utf-8"> <title>jQuery基本选择器</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </
-
jQuery选择器之表单元素选择器详解
本文实例为大家分享了表单元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc
-
jQuery选择器之子元素过滤选择器
本文实例为大家分享了jQuery子元素过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="
随机推荐
- 网页(aspx)与用户控件(ascx)交互逻辑处理实现
- PHP中用hash实现的数组
- 关于PHP二进制流 逐bit的低位在前算法(详解)
- PHP版网站缓存加快打开速度的方法分享
- java的Jackson框架实现轻易转换JSON
- Python下实现的RSA加密/解密及签名/验证功能示例
- Android中获取资源 id 及资源 id 的动态获取
- php的GD库imagettftext函数解决中文乱码问题
- 禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
- 详解使用Spring Boot开发Restful程序
- obj格式简介
- OneinStack一键安装PHP/JAVA/HHVM和超详细的VPS手动安装LNMP的方法
- centos服务器下nginx图片防盗链设置方法
- ubuntu 13.10编译安装mono环境(二)
- Android App将数据写入内部存储和外部存储的示例
- ThinkPHP3.1新特性之对分组支持的改进与完善概述
- 基于Android实现ListView圆角效果
- MPLS路由和控制结构
- Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
- android 实现在照片上绘制涂鸦的方法