jQ学习之层级选择器的测试

一:层级选择器 主要有以下几种:

a b: 即选择a中所有的b元素

a>b:既选择 a中 所有处在第一级且属性为b的孩子

a+b:选择 与a相邻的(在a后面)的b元素

a~b:选择 a的且属性为b的兄弟(不包括a)

HTML代码:

 1     <input type="button" id="btn1" value="选择body中所有的div元素" />
 2         <input type="button" id="btn2" value="选择body中第一级的孩子" />
 3         <input type="button" id="btn3" value="选择id为two的元素的下一个元素" />
 4         <input type="button" id="btn4" value="选择id为one的所有兄弟元素" />
 5         <hr />
 6         <div id="one">
 7             <div class="mini">
 8                 111
 9             </div>
10         </div>
11
12         <div id="two">
13             <div class="mini">
14                 222
15             </div>
16             <div class="mini">
17                 333
18             </div>
19         </div>
20
21         <div id="three">
22             <div class="mini">
23                 444
24             </div>
25             <div class="mini">
26                 555
27             </div>
28             <div class="mini">
29                 666
30             </div>
31         </div>
32
33         <span id="four">
34
35         </span>

jQ代码:

 1 //定义一个页面加载函数
 2                 $(function(){
 3                     //为按钮1设置点击事件
 4                     $("#btn1").click(function(){
 5                         //注意方法
 6                     $("body div").css("backgroundColor","pink");
 7                     })
 8                     $("#btn2").click(function(){
 9                         //注意方法
10                         $("body>div").css("backgroundColor","pink");
11                     })
12                     $("#btn3").click(function(){
13                         //注意方法
14                         $("#two+div").css("backgroundColor","pink");
15                     })
16                     $("#btn4").click(function(){
17                         //注意方法,注意参数,所有指的是包含body内部所有的元素
18                         $("#one~*").css("backgroundColor","pink");
19                     })
20
21                 })

CSS代码:

 1  div,span,p {
 2     width:140px;
 3     height:140px;
 4     margin:5px;
 5     background:#aaa;
 6     border:#000 1px solid;
 7     float:left;
 8     font-size:17px;
 9     font-family:Verdana;
10   }
11    div.mini {
12     width:55px;
13     height:55px;
14     background-color: #aaa;
15     font-size:12px;
16   }
17   div.hide {
18     display:none;
19   }

原文地址:https://www.cnblogs.com/zhang188660586/p/11184190.html

时间: 2024-11-06 03:49:13

jQ学习之层级选择器的测试的相关文章

jQ学习之基础选择器的测试

一:基础选择器参数主要包含了:id,标签名,类,*,还有就是多个选择器共同作为筛选条件的测试 主要测试内容为每个按钮的value html代码: 1 <input type="button" id="btn1" value="选择为one的元素" /> 2 <input type="button" id="btn2" value="选择样式为mini的元素" />

学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)

jq的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <scrip

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

总的来说,选择器引擎规则就是: $('查询字符串'). 最常用最基本的就是:1.标签选择器(以文档元素作为选择符):$("div"): 2.id选择器(以ID作为选择符): $("#demo1"): 3.类选择器(以class作为选择符): $(".selected"): 4.群组选择器: $(".class1, .class2, .class3"): 5.后代选择器: $("p span") 多种规则的组

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

jquery层级选择器学习笔记

html文档中的所有节点构成的拓扑结构类似于家谱,节点与节点之间存在着类似于父子.兄弟.祖孙这样的关系,层级选择器就是用于处理html文档中节点与节点之间的关系.如下介绍四种层级选择器: 1.子选择器 $('parent>child') 当前参考节点是parent,在其子代元素中,选择指定的child类型的元素,即parent与child是父子关系. 2.后代选择器 $('ancestor descendant') 当前参考节点是ancestor(祖先节点),在其后代元素中,选择指定的desce

Beaglebone Back学习六(Can总线测试)

Can总线测试 1 Can总线 控制器局域网 (Controller Area Network, 简称 CAN 或 CANbus)是一种通信协议,其特点是允许网络上的设备直接互相通信,网络上不需要主机(Host)控制通信.是由研发和生产汽车电子产品著称的德国BOSCH公司开发了的,并最终成为国际标准(ISO11898).CAN总线原理是通过CAN总线.传感器.控制器和执行器由串行数据线连接起来.它不仅仅是将电缆按树形结构连接起来,其通信协议相当于ISO/OSI参考模型中的数据链路层,网络可根据协

STM32学习之路-按键中断测试(外部中断)

终于有时间再来学习STM32了~ 这几天都在忙着该死的考试.直接进入正题 开发板:奋斗V5 这个按键中断测试的要求是:按键2(K2)按下,LED2(V7)亮, 再一次按下就灭,循环.. 好,先看看按键和LED的原理图 好吧~ 虽然图截得不是很好看,但是能看到K2接的是PC2, LED2接的是PD6 ok,剩下的就是配置工作了.. 先来理一理思路: (1)初始化系统时钟 (2)初始化外部时钟(你所用到的东西) (3)配置LED (4)配置中断优先级 (5)配置外部中断线 (6)中断处理函数 恩,差

jquery 层级选择器

关于层级选择器. $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素. parent :任何有效的选择器. child: 用来筛选子元素的选择器 $(function(){ $("ul.myul > li").css("border","2px solid red"); //将ul带有.myul选择下面的li 标签添加边框.}); $("ances

CSS学习_属性选择器

CSS选择器参考 [attribute]--选取带有指定属性的元素: [attribute=value]--选取带有指定属性和值的元素: [attribute~=value]--选取属性值中包含指定词汇的元素: [attribute|=value]--选取带有以指定值开头的属性值的元素,该值必须是整个单词: [attribute^=value]--匹配属性值以指定值开头的每个的元素: [attribute$=value]--匹配属性值以指定值结尾的每个的元素: [attribute*=value