精华内容
下载资源
问答
  • 前面的话  选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM以及ajax操作都依赖于选择...jQuery选择器可以分为基础选择器、层级选择器、过滤选择器和表单选择器四类。对于每类选择器,除了给出jQuery选择器

    前面的话

      选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM以及ajax操作都依赖于选择器。jQuery选择器完全继承了CSS的风格,两者的写法十分相似,只不过两者的作用效果不同。CSS选择器找到元素后添加样式,而jQuery选择器找到元素后添加行为。jQuery选择器可以分为基础选择器、层级选择器、过滤选择器和表单选择器四类。对于每类选择器,除了给出jQuery选择器的写法,也会给出相应的CSS选择器和DOM选择器的写法。有所比较,才能理解得更深。本文是jQuery选择器系列第一篇——基础选择器和层级选择器

     

    基础选择器

      基础选择器是jQuery中最常用选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素

    id选择器

      id选择器$('#id')通过给定的id匹配一个元素,返回单个元素

    <div id="test">测试元素</div>
    <script>
    //选择id为test的元素并设置其字体颜色为红色
    $('#test').css('color','red');
    </script>

      对应CSS的id选择器

    #test{color:red}
    

      对应DOM的getElementById()方法,而jQuery内部也使用该方法来处理ID的获取

    document.getElementById('test').style.color = 'red';

     

    元素选择器

      元素选择器$('element')根据给定的元素名匹配元素,并返回符合条件的集合元素

    复制代码
    <div>1</div>
    <div>2</div>
    <script>
    //选择标签名为div的元素并设置其字体颜色为红色
    $('div').css('color','red');
    </script>
    复制代码

      对应CSS的元素选择器

    div{color:red}
    

      对应DOM的getElementsByTagName()方法,而jQuery内部也使用该方法来处理元素名的获取

    Array.prototype.forEach.call(document.getElementsByTagName('div'),function(item,index,arr){
        item.style.color = 'red';
    });

     

    类选择器

      类选择器$('.class')根据给定的类名匹配元素,并返回符合条件的集合元素

    复制代码
    <div class="test">1</div>
    <div class="test">2</div>
    <script>
    //选择class为test的元素并设置其字体颜色为红色
    $('.test').css('color','red');
    </script>
    复制代码

      对应CSS的类选择器

    .test{color:red}
    

      对应DOM的getElementsByClassName()方法,而jQuery内部也使用该方法来处理类名的获取

    Array.prototype.forEach.call(document.getElementsByClassName('test'),function(item,index,arr){
        item.style.color = 'red';
    });

     

    通配选择器

      通配选择器$('*')匹配文档中所有的元素,并返回集合元素

    $('*').css('margin','0');

      对应CSS的通配选择器

    * {margin:0}
    

      对应DOM的document.all集合

    Array.prototype.forEach.call(document.all,function(item,index,arr){
        item.style.margin = 0;
    });

      或者参数为通配符*的getElementsByTagName()方法

    Array.prototype.forEach.call(document.getElementsByTagName('*'),function(item,index,arr){
        item.style.margin = 0;
    });

     

    群组选择器

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

    复制代码
    <div class="a">1</div>
    <span id="b">2</span>
    <a href="#">3</a>
    <script>
    //选择符合条件的元素并设置其字体颜色为红色
    $('.a,#b,a').css('color','red');
    </script>
    复制代码

      对应CSS的群组选择器

    .a,#b,a{color:red}
    

      对应DOM的querySelectorAll()选择器

    Array.prototype.forEach.call(document.querySelectorAll('.a,#b,a'),function(item,index,arr){
        item.style.color = 'red';
    });

     

    层级选择器

      如果想通过DOM元素之间的层级关系来获取特定元素,层级选择器是一个非常好的选择。层级共包括后代元素、子元素、相邻元素和同级元素四种

    后代选择器

      后代选择器$('ancestor descendant')选择给定的祖先元素的所有后代元素,并返回集合元素

    复制代码
    <div id="test">
        <div>
            <div>1</div>
            <div>2</div>
        </div>
    </div>
    <script>
    $('#test div').css('margin','10px');
    console.log($('#test div').length);//3
    </script>
    复制代码

      对应CSS的后代选择器

    #test div{margin: 10px}
    

      对应DOM的getElement类方法

    Array.prototype.forEach.call(document.getElementById('test').getElementsByTagName('div'),function(item,index,arr){
        item.style.margin = '10px';
    });

      或者使用querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test div'),function(item,index,arr){
        item.style.margin = '10px';
    });

    子元素选择器

      子元素选择器$('parent > child')选择所有指定'parent'元素中指定的'child'的直接子元素,并返回集合元素

    复制代码
    <div id="test">
        <div>
            <div>1</div>
            <div>2</div>
        </div>
    </div>
    <script>
    $('#test > div').css('margin','10px');
    console.log($('#test > div').length);//1
    </script>
    复制代码

      对应CSS的子元素选择器

    #test > div{margin: 10px}
    

      对应DOM的querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test > div'),function(item,index,arr){
        item.style.margin = '10px';
    });

     

    一般兄弟选择器

      一般兄弟选择器$('prev ~ siblings')选择'prev'元素之后的所有同级的'siblings'元素,并返回集合元素

    复制代码
    <ul>
        <li id="test">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
    $('#test ~ li').css('color','red');
    console.log($('#test ~ li').length);//2
    </script>
    复制代码

      对应CSS的一般兄弟选择器

    #test ~ li{color:red;}

      对应DOM的querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test ~ li'),function(item,index,arr){
        item.style.color = 'red';
    });

    相邻兄弟选择器

      相邻兄弟选择器$('prev + next')选择所有紧跟在'prev'元素后的'next'元素,并返回集合元素

    复制代码
    <ul>
        <li id="test">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
    $('#test + li').css('color','red');
    console.log($('#test + li').length);//1
    </script>
    复制代码

      对应CSS的相邻兄弟选择器

    #test + li{color:red;}

      对应DOM的querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test + li'),function(item,index,arr){
        item.style.color = 'red';
    });
    展开全文
  • 表示子元素,层级 一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径 #input 选择id为input的节点 .Volvo 选择class为Volvo的节点 div#radio>input 选择id为radio的div下的所有的...

    常见符号:

    #表示id

    .表示class

    >表示子元素,层级

    一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径

     

    #input 选择id为input的节点

    .Volvo 选择class为Volvo的节点

    div#radio>input 选择id为radio的div下的所有的input节点

    div#radio input 选择id为radio的div下的所有的子孙后代input节点

    div#radio>input:nth-of-type(4) 选择id为radio的div下的第4个input节点

    div#radio>:nth-child(1) 选择id为radio的div下的第1个子节点

    div#radio>input:nth-of-type(4)+label 选择id为radio的div下的第4个input节点之后挨着的label节点

    div#radio>input:nth-of-type(4)~label 选择id为radio的div下的第4个input节点之后的所有label节点

    input.Volvo[name='identity'] 选择class为.Volvo并且name为identity的input节点

    input[name='identity'][type='radio']:nth-of-type(1) 选择name为identity且type为radio的第1个input节点

    input[name^='ident'] 选择以ident开头的name属性的所有input节点

    input[name$='entity'] 选择以'entity'结尾的name属性的所有input节点

    input[name*='enti'] 选择包含'enti'的name属性的所有input节点

    div#radio>*:not(input) 选择id为radio的div的子节点中不为input的所有子节点

    input:not([type=radio]) 选择input节点中type不为radio的所有节点

    转载于:https://www.cnblogs.com/zhangfei/p/4729333.html

    展开全文
  • JS-jQuery选择器

    2020-07-14 21:00:54
    选择器jQuery的选择器基础选择器 (写法和css一样)层级选择器过滤选择器内容选择器可见选择器属性选择器子元素选择器表单选择器 jQuery的选择器 基础选择器 (写法和css一样) $(“div”) 标签名选择器 $("#id") id...

    jQuery的选择器

    基础选择器 (写法和css一样)

    • $(“div”) 标签名选择器
    • $("#id") id选择器
    • $(".class") 类选择器
    • $(“div,#id,.class”) 分组选择器
    • $("*") 任意元素选择器

    层级选择器

    • $(“div span”) 匹配div里面的所有span包括子孙后代
    • $(“div>span”) 匹配div里面的span子元素
    • $(“div+span”) 匹配div的弟弟span
    • $(“div~span”) 匹配div的弟弟们span
    • 层级相关的方法:
      1. $("#abc").next(“span”) 匹配id为abc元素的弟弟span元素
      2. $("#abc").nextAll() 匹配id为abc元素的弟弟们元素
      3. $("#abc").prev() 匹配id为abc元素的哥哥元素
      4. $("#abc").prevAll() 匹配id为abc元素的哥哥们元素
      5. $("#abc").siblings() 匹配id为abc元素的所有兄弟元素
      6. $("#abc").parent() 匹配id为abc元素的父元素
      7. $("#abc").children() 匹配id为abc元素的所有子元素们

    过滤选择器

    • $(“div:first”) 匹配所有div中的第一个
    • $(“div:last”) 匹配所有div中的最后一个
    • $(“div:eq(i)”) 匹配所有div中下标为i的元素
    • $(“div:lt(i)”) 匹配所有div中下标小于i的元素
    • $(“div:gt(i)”) 匹配所有div中下标大于i的元素
    • $(“div:not(.abc)”) 匹配所有div中class不等于abc的元素
    • $(“div:even”) 匹配所有div中下标为偶数的元素
    • $(“div:odd”) 匹配所有div中下标为奇数的元素

    内容选择器

    • $(“div:has(span)”) 匹配包含span子元素的div
    • $(“div:empty”) 匹配空的div
    • $(“div:parent”) 匹配非空的div
    • $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div

    可见选择器

    • $(“div:hidden”) 匹配所有隐藏的div
    • $(“div:visible”) 匹配所有显示的div
    • 隐藏显示相关的方法:
      • $("#abc").show() 让id为abc的元素 显示
      • $("#abc").hide() 让id为abc的元素 隐藏
      • $("#abc").toggle() 让id为abc的元素显示和隐藏切换

    属性选择器

    • $(“div[id]”) 匹配包含id属性的div
    • $(“div[属性名=‘xxx’]”) 匹配xxx属性值为xxx的div
    • $(“div[属性名!=‘xxx’]”) 匹配xxx属性值不等于xxx的div

    子元素选择器

    • $(“div:first-child”) 匹配是div并且是子元素 并且是第一个子元素
    • $(“div:last-child”) 匹配是div并且是子元素 并且是最后一个子元素
    • $(“div:nth-child(n)”) 匹配是div并且是子元素 并且是第n个子元素 n从1开始

    表单选择器

    • $(":input") 匹配表单中所有的控件
    • $(":password") 匹配所有密码框
    • $(":radio") 匹配所有单选框
    • $(":checkbox") 匹配所有多选框
    • $(":checked") 匹配所有选中的单选多选和下拉选
    • $(“input:checked”) 匹配所有选中的单选和多选
    • $(":selected") 匹配所有选中的下拉选
    展开全文
  • 1.后代选择器写法:$("aaaa bbbbb") 例:$("div span") 指的是div标签下的所有span标签,不管是什么层级; 2.子代选择器写法:$("aaaa > bbbbb") 例:$("div > span") 指的是div标签下的下一个...

    1.后代选择器:

    写法:$("aaaa bbbbb")

    例:$("div span")  指的是div标签下的所有span标签,不管是什么层级;

     

    2.子代选择器:

    写法:$("aaaa > bbbbb")

    例:$("div > span") 指的是div标签下的下一个层级的span,并不是所有;

    转载于:https://www.cnblogs.com/zhoujingguoguo/p/9646289.html

    展开全文
  • 后代选择器和子代选择器的区别

    万次阅读 2017-09-05 13:57:31
    1.后代选择器写法:$("ancestor descendant") 例:$("div span") 指的是div标签下的所有span标签,不管是什么层级; 2.子代选择器写法:$("parent > child") 例:$("div > span") 指的是div标签下的...
  • JQuery选择器

    2019-02-22 07:50:19
    有四大部分:基本选择器 层级选择器 过滤选择器 表单选择器 讲真,如果js掌握的扎实的话,这一部分只需要多加练习即可掌握。写法和用法见代码:(建议自己亲自打一遍,加深记忆)   &lt;!DOCTYPE ...
  • html+css选择器

    2019-05-10 10:40:04
    html+css选择器1、标签选择器2、类选择器(使用最多)3、id选择器4、后代或层级选择器5、并集或者组选择器6、指定标签选择器7、伪类选择器 1、标签选择器 直接设定所有的标签,比如可以是p、h1、d1、strong、span等...
  • CSS—常用选择器

    2017-08-26 22:41:04
    1.标签选择器 写法: ...标签选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中。 举例: div{color:red} ...... 这是第一个div<!-- 对应以上样式 --> 这是第二个div<!-- 对应以上样式 -->
  • 文章目录一、css样式表二、css字体的一些属性一、字体属性二、外观属性三、css选择器与标签的分类一、基础选择器二、复合选择器三、伪类选择器四、补充五、标签显示模式1、块状元素2、行内元素3、行内块元素4、显示...
  • 规范定位元素选择器  从性能上考虑,让浏览器查找尽量少的元素以确定我们想要定位的元素。 避免同时使用标签、id、class作为定位一个元素的选择器。...尽量减少选择器层级。#wrap div.main{}...
  • 高效CSS写法

    2011-04-12 09:28:00
    上周末翻译了molliza 和google关于高效CSS 的写法的文章,觉得他们的说法有一些共同之处,就是...结合我自己编写CSS的经验,我总结如下:1) CSS 的层级选择器不要超过3个,保持3个以内 bad case: .class1 ul li a{}...
  • jquery中的选择器

    2009-05-11 14:27:00
    1根据ID,$("#id"),具体的写法jquery("#id")2根据名称,$(body),$(myform.text1)3css选择器,$("p"),$("input:radio",documnet.forms[0]),$(".class"),$("div,p,span.class") 层级 $("div > p"),子级的P元素 $...
  • 这在逻辑结构比较简单的时候还是不错的选择,可是当结构层级复杂事,就不是那么好用了。 这个时候 我们就可以使用 document提供的另外一个强大的方法,querySelector/querySelectorAll ,这个方法支持css的样式写法
  • html的 Emmet 写法

    2018-05-03 15:25:50
    一、简写语法Emmet 用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性,实现 HTML/XML/CSS 等代码的智能自动补全。其通过文件名后缀识别文件类型,从而使用对应的自动补全语法。默认自动补全快捷键为制表符...
  • 有时候对同一个目标元素,选择器有多种不同的写法。具体哪种声明会生效,主要看层叠关系 层叠关系主要看三层,分别是特殊性,权重和顺序。 1.特殊性 选择器有各自的特殊性。 内联样式为1000,id选择器为100,...
  • 在很多情况下,我们需要修改 element-ui 提供的原生样式,来满足项目的需求然而 常规的CSS写法可能不会生效因为当我们在源代码中引用 标签时,实际上 浏览器可能会渲染出好几个对应的 class例如:引用 时浏览器会...
  • JQ-reveiw

    2017-03-11 17:36:09
    选择器 基本选择器 ID名写法 $(function(){ $('#box') }) 类名写法 $(function(){ $('.box') }) 标签名写法 ...层级选择器 层级选择器 后代选择器  $(f
  • 前端小白之css

    2019-01-12 00:41:29
    3.层级选择器 div p{} 4.id选择器(和类选择器类似) #id{} 5.组选择器 .box1,.box2{} 6.伪类选择器(鼠标悬浮特效和前后增加内容) .calss:hover{} .class:before{content:"内容"} css 三种链接写法: 1....
  • python_15(jquery)

    2018-09-28 14:22:00
    第1章 iquery 1.1 官网 1.2 流程图 1.3 Javascripts方法 1.4 书写格式 1.5 jQuery 的两大特 1.6 对比javascript代码量 第2章 入口函数(重要)...jquery选择器 3.1 基本选择器 3.2 选择器案例 3.3 层级选择器 3.3.1 ...
  • jQuery

    2021-02-27 22:13:03
    jQuery也就是一个js文件,里面有一大堆方法。 jQuery的使用步骤 1、引入jQuery文件 2、入口函数 功能实现 入口函数:第一种写法:$(document).ready(function) 第二种写法: $(function(){}) ...层级选择器:子
  • JQuery

    2021-03-09 20:50:20
    1、JQuery和js (1)js是网页脚本语言,类似java是一种开发常用语言; (2)jQuery是基于js语言封装出来的一个前端框架;...(2)层级选择器 (3)过滤选择器 (4)筛选选择器 5、JQuery事件 以
  • JQuery前端教程

    2019-04-18 15:29:51
    1.JQuery 能够知道jQuery的作用及优点 简洁,封装js 2.能够知道jQuery的引入方式 两种方式 jquery(css选择器) jquery(函数) 文档加载完以后调用 3.能够说出两种jQuery入口函数的写法 ...层级选择 属性选择器 5...
  • 【学习笔记】jQuery.js

    2020-07-31 10:15:35
    jQuery的概念jQuery的优点jQuery的入口函数jQuery的顶级对象$DOM对象和jQuery对象DOM对象和jQuery对象的相互转换jQuery基础选择器jQuery层级选择器jQuery设置css样式隐式迭代jQuery筛选选择器jQuery筛选方法jQuery...
  • jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { ...$('*') / $('.div') / $('div') /...层级选择器 $('aside summary') //aside的子元素summary $('as...
  • selenium定位大全

    2019-03-27 18:24:00
    css为样式选择器 xpath为路径选择器 xpath可以根据子类定位父类,css目前不可以(有个has但是在实验阶段) 通过xpath定位,xpath定位有N种写法,这里列几个常用写法: (核心思想,根据层级定位,确保被定位的...

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

层级选择器写法