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. Windows Forms 对话框篇

    1,标准对话框 Windows内置的对话框,又叫公用对话框,它们作为组件提供的,并且存在于System.Windows.Forms命名空间中. 手工方式: private void button1_C ...

  2. 9、str类型和byte类型转换、列表拾遗、元组拾遗、字典拾遗、如何判断对象是否可迭代

    str(字节类型,编码)       可用于创建字符串,或者将其他的转换成字符串 a= ‘李露’ #将字符串转换成字节流 b = bytes(a,encoding = 'utf-8') #将字节转换成 ...

  3. 打开utf-8文件乱码的解决方法

    gvim一直用的好好的,但是今天看一网友贴出来的代码时,却发现中文显示乱码了.... 使用notepad++打开,右下角显示是utf-8 w/0 BOM. 马上放狗, 发现解决方法如下:   在_vi ...

  4. java程序猿经常使用的工具名称--知道中文意思吗

    在学习java的时候常常会碰到一些单词,可是一般的时候也不是非常在意这个单词的意思,而是能够了解到这个工具或者框架能够做什么就能够了.偶尔总结了一下还蛮有意思的.例如以下, 假设有遗漏,各位能够帮忙补 ...

  5. Linux下设置MySQL不区分大写和小写

            MySQL在Linux下数据库名.表名.列名.别名大写和小写规则:  1.数据库名与表名是严格区分大写和小写  2.表的别名是严格区分大写和小写  3.列名与列的别名在全部的情况下均是 ...

  6. 2、Python基本数据类型

    1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算: 基本数据类型 1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即- ...

  7. 一些mysql innodb的建议

    http://blog.csdn.net/yunhua_lee/article/details/8239145 原文:http://dev.mysql.com/doc/refman/5.5/en/in ...

  8. android权限详细

    访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permiss ...

  9. 26、从零写UVC驱动之分析描述符

    指令:lsusb 可以查看usb设备的描述符信息,当然lsusb指令要带一些参数 一个usb设备有多个config配置+设备描述符,一个config有多个接口和association.config描述 ...

  10. 排查一般MySQL性能问题

    排查一般MySQL性能问题,通常要记录下面几项信息: 1.mysql> show processlist; 2.mysql> show engine innodb status\G 3.表 ...