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. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

  2. NHibernate之旅(3)：探索查询之NHibernate查询语言(HQL)

    本节内容 NHibernate中的查询方法 NHibernate查询语言(HQL) 1.from子句 2.select子句 3.where子句 4.order by子句 5.group by子句 实例 ...

  3. Android通过startService播放背景音乐简单演示样例

    关于startService的基本使用概述及其生命周期可參见博客<Android中startService的使用及Service生命周期>. 本文通过播放背景音乐的简单演示样例,演示sta ...

  4. t_user is not mapped [from t_user as u where u.loginname = :loginname and u.password =:password]

    转自:https://blog.csdn.net/u010876380/article/details/52714539 错误: Struts Problem Report Struts has de ...

  5. 硬件——nrf51822第二篇，如何设置keil用来下载程序

    转自电子发烧友论坛 未完,待续...... 这里就是根据自己的项目了,并不一定是按照下面的图片去做.

  6. Webpack学习手册

    多端阅读<Webpack官方文档>: 在PC/MAC上查看:下载w3cschool客户端,进入客户端后通过搜索当前教程手册的名称并下载,就可以查看当前离线教程文档.下载Webpack官方文 ...

  7. log4j 2.x 版本的 properties 配置

    #用于设置log4j2自身内部的信息输出,可以不设置,当设置成trace时,会看到log4j2内部各种详细输出status = debugdest = errname = PropertiesConf ...

  8. LA 3602 - DNA Consensus String 枚举

    原题地址:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  9. Surging -Demo部署

    原文:Surging -Demo部署 1.安装rabbitmq docker run -d --name rabbitmq --restart=unless-stopped --publish 567 ...

  10. 【u248】交通序列号

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在一条笔直的道路上共有N个路口,每个路口处都有关于该条道路的通行的信号灯. 显然,信号灯共有绿(G). ...