jQuery 选择器详解

　　$()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是.

　　$(“#id”)通过id来获取元素,用来代替document.getElementById()函数.

　　$(“tagName”)通过标签名来获取元素,用来代替document.getElementsByTagName()函数.

　　jQuery的基本语法是:$(selector).action(), selector即选择器.

jQuery选择器的分类

　　jQuery的选择器基本可以分为四大类:

　　基本选择器(basic)

　　层次选择器(level)

　　过滤选择器(filter)

　　表单选择器(form)

　　有些类别又可以分为具体的子类别.

基本选择器

　　* 匹配所有元素.示例:$(“*")选取所有元素.

　　#id根据给定的id匹配元素(最多只返回一个元素).示例: $("#lastname”)选取id="lastname"的元素.

　　.class根据给定的类名匹配元素.示例:$(".intro”)选取所有class=“intro"的元素.

　　element根据给定的元素名匹配元素.示例: $(“p")选取所有<p>元素.

　　.class.class 示例: $(".intro.demo”)选取所有且class="demo”的元素.(交集).

　　selector1, selector2, …, selectorN, 将每一个选择器匹配到的元素合并后一起返回.(并集).

　　除了#id选择器返回单个元素外,其他选择器返回的都是元素集合.

　　这是因为HTML规范里面id应该是唯一的,所以重复id的元素没有被考虑.

　　如果多个元素的id相同,取这个id也只能获取第一个元素.即获取的jQuery对象的length属性是1.

　　如果要匹配的元素不存在,则都返回一个空的jQuery对象.

　    基本选择器之间可以组合,用逗号分隔,结果取所有条件的结果的并集.

　　当没有用逗号分隔时,应该是所有条件都满足的交集.

层次选择器

　　$(“ancestor descendant”) 选取ancestor元素里的所有descendant后代元素,包括直接子元素和更深嵌套的后代元素.

　　例:$(“div span”)选取<div>里的所有的<span>元素.

　　注意:选择器都是全页面扫描,返回一个集合,所有符合选择条件的元素都会被包括进去.所以多个<div>下面的<span>都会被选择.

　　$(“parent>child”)选取parent元素下的child子元素,即只有直接子元素被选取.其他后代元素不包括.

　　例:$(“div>span”)选取<div>元素下元素名是<span>的子元素.

　　$(“prev+next”)选取紧接在prev元素后的next元素(同一层级).

　　例:$(“.one+div”)选取class为one的下一个div元素.

　　$(“prev+siblings”)选取prev元素之后的所有siblings元素(同一层级).

　　例:$(“#two~div”)选取id为two的元素后面的所有<div>兄弟元素.

　　等价方法:

　　$(“prev+next”)等价于方法$(“prev”).next(“next”);选取prev元素之后紧接着的一个next元素.

　　$(“prev~sublings”)等价于方法$(“prev”).nextAll(“sublings”),选取prev元素之后的所有同级的sublings元素.

　　而$(“prev”).sublings(“next”)方法选取与prev同辈的所有next元素,与前后位置无关.

过滤选择器

　　过滤选择器这个大类又分为六个子类:

　　基本过滤;内容过滤;可见性过滤;属性过滤;子元素过滤;表单对象属性过滤.

基本过滤

　　gt和lt分别是greaterthan和lessthan.

内容过滤

可见性过滤

属性过滤

　　属性过滤是用方括号来标识的.

　　注意多个属性过滤选择器连在一起的时候,取的是结果的交集.

子元素过滤

　　前面基本过滤选择器里面index是从0算起的,这里子元素过滤选择器的index是从1开始算起的.

表单对象属性过滤

表单选择器

赞 (0)

相关推荐

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • jQuery选择id属性带有点符号元素的方法

    本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ

  • 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选择器之基本选择器与层次选择器

    基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能使用一次,class允许重复使用.        选择器       描述 返回                示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 e

  • 老生常谈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的实例及必知重要的jQuery选择器详解

    Jquery能做什么 访问和操作DOM元素   控制页面样式    对页面事件进行处理    扩展新的jQuery插件   与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右   l强大的选择器   出色的DOM封装   l可靠的事件处理机制   出色的浏览器兼容性   使用隐式迭代简化编程   丰富的插件支持 jQuery的知识的分解: 1.关于window.onload和$(function(){})区别   解析:window.onload等待页面上所有资源(ht

  • jQuery 选择器详解

    jQuery 选择器详解

    $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElementById()函数. $("tagName")通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本

  • JQuery选择器详解

    JQuery选择器详解

    目录 基本选择器: 层级选择器: 属性选择器: 过滤器选择器: 表单属性选择器: 总结 选择器类似于CSS的选择器,可以帮助我们获取元素 基本选择器: 选择器:类似于 CSS 的选择器,可以帮助我们获取元素. 例如:id 选择器.类选择器.元素选择器.属性选择器等等. jQuery 中选择器的语法:$(); 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

  • jQuery过滤选择器详解

    jQuery过滤选择器详解

    过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以":"开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 # bbffaa

  • 原生js封装的一些jquery方法(详解)

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

  • YII框架中搜索分页jQuery写法详解

    控制层 use frontend\models\StudUser; use yii\data\Pagination; use yii\db\Query; /** * 查询 * */ public function actionSearch() { //接值 $where=Yii::$app->request->get(); //实例化query $query=new Query(); $query->from('stud_user'); //判断 if(isset($where['sex

  • jQuery extend()详解及简单实例

    jQuery extend()详解及简单实例 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们说的工具方法是指无需实例化就可以调用的函数,如第一段代码:实例

  • jQuery选择器及jquery案例详解(必看)

    JQuery选择器 解析:为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签 1.层次选择器 <!-- 当点击h2元素时,为#menu下的<span>元素添加色为#09F的颜色背景 --> <!-- <script type="text/javascript"> $(function () { $('h2').click(function () { $('#menu span').css('background-color','#0

  • jQuery常用选择器详解

    本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下 1.jQuery:(使用jQuery一定标明我们使用的版本号) 它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题) 2.jQuery中提供的方法 选择器 通过传递对应规则的内容(ID.标签名.样式类名...),获取到页面中指定的元素/元素集合 <!DOCTYPE html> <html lang="en"> <head> <meta charset

  • jQuery选择器之属性过滤选择器详解

    本文实例为大家分享了jQuery属性过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="t

随机推荐