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. 软件——protel 的pcb电路图制作

    近期一直在学习PCB板的绘制.

  2. 不在JPA 的 persistence.xml 文件中配置Entity class的解决办法

    在Spring 集成 Hibernate 的JPA方式中,需要在persistence配置文件中定义每一个实体类,这样非常地不方便,2种方法可以解决此问题: 这2种方式都可以实现不用在persiste ...

  3. 洛谷 P2969 [USACO09DEC]音符Music Notes

    P2969 [USACO09DEC]音符Music Notes 题目描述 FJ is going to teach his cows how to play a song. The song cons ...

  4. TabControl控件重绘

    原文地址:http://www.codeproject.com/Articles/91387/Painting-Your-Own-Tabs-Second-Edition 在网上看到重绘TabContr ...

  5. stm32单片机的封装

    接着去查看VREF...

  6. （转）bat批处理的注释语句

    在批处理中,段注释有一种比较常用的方法: goto start = 可以是多行文本,可以是命令 = 可以包含重定向符号和其他特殊字符 = 只要不包含 :start 这一行,就都是注释 :start 另 ...

  7. ubuntu, 修改hosts文件

    介绍下ubuntu下修改host实现域名指向本地的方法. Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结 ...

  8. boost 库编译选项

    boost大部分库仅仅须要包括头文件就可以使用,而有部分须要编译的.例如以下: E:\Qt\Qt3rdlib\boost_1_58_0>bjam --show-libraries The fol ...

  9. Android实现主动连接蓝牙耳机

    在Android程序中可以实现自动扫描蓝牙.配对蓝牙.建立数据通道. 蓝牙分不同类型,可以参考(http://gqdy365.iteye.com/admin/blogs/2229304) 可以入下面方 ...

  10. linux 查询制定目录的制定内容

    //.点为查找当前目录 下 的 所有 *.php 文件里 有 hello 的文件 find . -name "*.php" | xargs grep "hello&quo ...