js进阶 10-5 jquery中的层级选择器有哪些

一、总结

一句话总结：

1、jquery中的层级选择器有哪些？

四种，后代，子代，兄弟，相邻兄弟

2、如何区别jquery中的层级选择器？

记住这四个符号：空格 大于号 波浪线 加号

二、js进阶 10-5 jquery中的层级选择器有哪些

1、相关知识点

层级选择器

层次选择器,就是能过元素之间的层次关系来获取元素.常见的层次关系包括:父子、后代、兄弟、相邻。

  • $（"M N")后代选择器，选择M元素内部后代N元素
  • $（"M＞N")子代选择器,选择M元素内部子代N元素
  • $（"M~N")兄弟选择器,选择M元素后所有的同级N元素
  • $（"M+N")相邻选择器,选择M元素相邻的下一个元素

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

     <script src="ktys5.js"></script>

     <style type="text/css">

     /*    *{

             font-size: 18px;

             color: red

         }*/

         /*div p{color: red}*/

     /*    div>p{color: green}*/

 /*    #li2~li{color: blue}*/

 /*#li2+li{color: blue}*/

     </style>

 </head>

 <body>

     <div>

         <h4>属性选择器</h4>

         <p>HTML元素通常包含很多属性,jQuery的属性选择器就是把各种属性作为选择器。</p>

         <ul>

             <li>$("selector[attr]")    选择包含给定属性的元素</li>

             <li>$("selector[attr='value']")    选择给定的属性是某个特定值的元素</li>

             <li>$("selector[attr != 'value']")    选择所有含有指定的属性，但属性不等于特定值的元素</li>

             <li>$("selector[attr *= 'value']")    选择给定的属性是以包含某些值的元素</li>

             <li>$("selector[attr ^= 'value']")    选择给定的属性是以某些值开始的元素（比较少用）</li>

             <li>$("selector[attr $= 'value']")    选择给定的属性是以某些值结尾的元素（比较少用）</li>

             <li></li>

             <li></li>

         </ul>

     </div>

 </body>

 </html>
 $(function(){

     $('*').css('font-size','12px')

     // $('div p').css('color','red')

     // $('div>p').css('color','red')

     // $('#li2~li').css('color','red')

     $('#li2+li').css('color','red')

 })

js进阶 10-5 jquery中的层级选择器有哪些的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. jQuery中的层级选择器

    话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  4. js进阶 10-6 jquery中的属性选择器有哪些

    js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...

  5. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  6. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  7. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  8. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  9. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

随机推荐

  1. nuxt配置sass

    没有比这更简单的了 只需要安装 node-sass sass-loader 就可以了 npm i node-sass sass-loader -D 然后就可以直接使用了: <style lang ...

  2. [Angular & Web] Retrieve user data from Session

    Once user sign up, we store the user data inside cookie in the broswer and also keep a memory copy i ...

  3. RMAN异机复制数据库（不同路径）

    1.恢复参数文件 设置环境变量: export ORACLE_SID=hncdfhq 登录RMAN: rman target / 在RMAN里把数据库起到nomount状态: startup nomo ...

  4. oled stm32的spi

    其实各种协议是很重要的,这篇文章就当做我对spi协议的一个整理吧. 必要的spi简介: https://www.cnblogs.com/zengsf/p/7221207.html?utm_source ...

  5. 最新GitHub新手使用教程(Linux/Ubuntu Git从安装到使用)——详细图解

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.叙述 1.说明:需要在Windows 安装Git的同学,可以查看该篇博客 https://blog.csdn.net/qq_4 ...

  6. (6)uboot具体解释——关闭缓存和mmu

    uboot具体解释--关闭缓存和mmu 当设置完时钟分频以后,uboot就会运行cpu_init_crit汇编函数,这个函数的主要作用就是关闭缓存和mmu.然后调用lowlevel_init函数进行系 ...

  7. 仿招商银行载入loading效果

    在招商银行android手机app中.有例如以下图所看到的的loading载入效果: 实现这个效果还是比較简单,就是自己定义dialog,设置自己想要的布局.然后设置旋转动画. 主要步骤: 1,写布局 ...

  8. 【例题5-7 UVA - 136】Ugly Numbers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每个丑数x,都能生成3个丑数2x,3x,5x 则我们以1作为起点. 生成丑数. 每次取出set里面最小的那个数. 然后用它去生成其他 ...

  9. STATUS CODE: 91, occurs when trying to move media from one volume pool to another.

    Overview:Symantec NetBackup (tm) will not allow a tape with active images to be moved from one volum ...

  10. 几款用jQuery写的h5小游戏

    人人都说前端用来做游戏是一件很困难的事情,遇到这些js的逻辑性问题,是不是有点懵?其实,做完一款游戏之后就会发现,没啥难的地方,差不多都是换汤不换药,作为爱玩游戏的我,也总结收集了几款比较流行的小软件 ...