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. Android应用开发-广播和服务

    广播 广播的概念 现实:电台通过发送广播发布消息,买个收音机,就能收听 Android:系统在产生某个事件时发送广播,应用程序使用广播接收者接收这个广播,就知道系统产生了什么事件. Android系统 ...

  2. WebStorm（Amaze开发工具）--JavaScript 开发工具

    WebStorm(Amaze开发工具)--JavaScript 开发工具 一.总结 1.webstorm:前段开发神器,应该比sublime好用. 2.webstorm功能:支持显示图片宽高,标签重构 ...

  3. table嵌套table,jquery获取tr个数

    一.所有tr的个数 $("#tableId tr").length 二.所有一级tr的个数 1.$("#tableId > tr").length 2.$ ...

  4. Redis的高级应用-安全性和主从复制

    Redis的服务器命令和键值命令(String,Hash,List,Set,Zset)相对简单,只需查看文档即可. 文档地址: http://www.runoob.com/redis/redis-tu ...

  5. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  6. Something-Summary

    1.Combinatorial Mathematics 1.1 Bell Number: \(B_n\)表示元素个数为n的集合划分成若干个不相交集合的方案数. \(B_{n + 1} = \sum_{ ...

  7. JS实现时钟效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. OFFICE2013 打开两个word文档卡死的解决办法

    这几天Office打开一个word好好的,两个就直接卡死了,百度了一下: 原文地址: http://hi.baidu.com/pjhero/item/ca326e3dcfebebb9623aff6e ...

  9. change_names

    DC在储存网表时,有时会采用特殊的字符 比如表示总线BUS[7]-BUS[0] 会表示成\BUS[7]    \BUS[6]...... 在compile命令之后,write命令之前  加上:chan ...

  10. SQL Server2008 Hierarchyid数据类型

    以往我们在关系数据库中建立树状结构的时候,通常使用ID+ParentID来实现两条 纪录间的父子关系.但这种方式只能标示其相对位置.解决这类问题在SqlServer2005出现之前通常是采用游标来操作 ...