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. libiconv 支持的编码

    libiconv 支持的编码 php 中的 iconv() 函数常用来作编码转换用.作一些不同编码的动态数据的转换时常遇到一些未知编码的数据,这时 iconv() 支持那些编码转换就很重要. 刚开始, ...

  2. eclipse-hierarchyviewer 不能使用

    今天安装了adt-bundle以后,发现hierarchyviewer不能用.点开了以后连手机没有效果.后来发现,还需要进入hierarchyviewer所在的sdk目录进行下权限的设置 chmod ...

  3. 6.在单机上实现ZooKeeper伪机群/伪集群部署

    转自:https://blog.csdn.net/poechant/article/details/6633923

  4. String.Empty,NULL和""的区别

    String.Empty,NULL和""的区别 string.Empty就相当于"" 一般用于字符串的初始化 比如: string a; Console.Wri ...

  5. ORACLE11g R2【RAC+ASM→单实例FS】

    ORACLE11g R2[RAC+ASM→单实例FS] 11g R2 RAC+ASMà单实例FS的DG,建议禁用OMF. 本演示案例所用环境:   primary standby OS Hostnam ...

  6. 15个常用的javaScript正则表达式--来自于javascript公众号

    摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. ...

  7. 14、序列化操作，类的保存和dict转JSON

    在程序运行的过程中,所有的变量都是在内存中,比如,定义一个dict: d = dict(name='Bob', age=20, score=88) 可以随时修改变量,比如把name改成'Bill',但 ...

  8. 16.用Spring Boot颠覆Java应用开发

    转自:https://www.cnblogs.com/aishangJava/p/5971288.html Java开发概述: 使用Java做Web应用开发已经有近20年的历史了,从最初的Servle ...

  9. 使用H5 formData对象上传图片和视频的文件时，必填的属性

    async : false,cache : false,contentType : false,// 告诉jQuery不要去设置Content-Type请求头processData : false,/ ...

  10. linux内核头文件 cdev.h 解析

    遇到一个内核API--cdev_init 就找到这里来了. #ifndef _LINUX_CDEV_H #define _LINUX_CDEV_H #include <linux/kobject ...