精华内容
下载资源
问答
  • JQ 层次选择器

    2019-08-13 01:03:12
    NULL 博文链接:https://onestopweb.iteye.com/blog/2290059
  • jq层次选择器

    2019-09-27 04:40:48
    二、 层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $('div > span').css('color', '#FF0000'); }); 下面的代码...

    二、 层次选择器

    1. parent > child(直系子元素)

    $(document).ready(function () {
            // 选取div下的第一代span元素,将字体颜色设为红色
            $('div > span').css('color', '#FF0000');
        });

    下面的代码,只有第一个span会变色,第二个span不属于div的一代子元素,颜色保持不变。

    <div>
            <span>123</span>
            <p>
                <span>456</span>
            </p>
    </div>

    2. prev + next(下一个兄弟元素,等同于next()方法)

    $(document).ready(function () {
        // 选取class为item的下一个div兄弟元素
        $('.item + div').css('color', '#FF0000');
        // 等价代码
        //$('.item').next('div').css('color', '#FF0000');
    });

    下面的代码,只有123和789会变色

    <p class="item"></p>
    <div>123</div>
    <div>456</div>
    <span class="item"></span>
    <div>789</div>
    

    3. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)

    $(document).ready(function () {
        // 选取class为inside之后的所有div兄弟元素
        $('.inside ~ div').css('color', '#FF0000');
        // 等价代码
        //$('.inside').nextAll('div').css('color', '#FF0000');
    });

    下面的代码,G2和G4会变色

    <div class="inside">G1</div>
    <div>G2</div>
    <span>G3</span>
    <div>G4</div>

    转载于:https://www.cnblogs.com/lyWebstrat/p/5872021.html

    展开全文
  • JQ层次选择器

    2018-04-18 18:53:00
    选择某个具体层次下的子层次,比如选择有p的div: $("div p") <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script ...

    选择某个具体层次下的子层次,比如选择有p的div:

    $("div p")

     

     

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script src="js/JQ3.3.1.js"></script>
            <link rel="stylesheet" type="text/css" href="css/style.css" />
            <script type="text/javascript">
                $(function(){
                    $("div p").attr("class","txt");
                })
            </script>
        </head>
    
        <body>
            <div id="showMsg">
                <h1>test</h1></div>
            <div id="showMsg">
                <h1>test</h1></div>
            <span class="temp">test</span>
            <span>test</span>
            <p class="temp">test</p>
            <p>test</p>
            <div>
                <p>test</p>
                <p>test</p>
            </div>
        </body>
    
    </html>

     

    转载于:https://www.cnblogs.com/ssC2H4/p/8876925.html

    展开全文
  • 3.2 JQ层次选择器

    2019-07-22 11:25:17
    //更多选择器可看css的选择器篇,用法基本相同 恢复初始颜色" id="btn"/> 子元素选择器" id="btn1"/> 子类选择器" id="btn2"/> 相邻兄弟选择器" id="btn3"/> <div id="c"></div> ...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			div{
    					height: 100px;
    					width: 100px;
    					border: 1px solid red;
    					margin: 10px;
    					display: inline-block;
    				}
    			#c{
    					height: 20px;
    					width: 20px;
    					margin: 10px;				
    					display: inline-block;
    				}	
    		</style>
    	</head>
    	<body>
    		<script type="text/javascript" src="../../js库/jquery-2.1.0.js"></script>
    		<script>
    //恢复初始颜色
    		$(function(){
    			$("#btn").click(function(){
    				$("*").css("background-color","while");
    			});
    		});
    //子代选择器	
    		$(function(){
    			$("#btn1").click(function(){
    				$("div>div").css("background-color","yellow");
    			});
    		});//找出div的div子标签	
    //后代选择器
    		$(function(){
    			$("#btn2").click(function(){
    				$(".c1 .c2").css("background-color","yellow");
    			});
    		});	//找出类为c1的标签的子类为c2的标签
    //相邻兄弟选择器
    		$(function(){
    			$("#btn3").click(function(){
    				$("#c+#c").css("background-color","yellow");
    			});
    		});//找到id为c且前一个标签id为c的标签
    //更多选择器可看css的选择器篇,用法基本相同
    		</script>
    		
    		<input type="button" value="恢复初始颜色" id="btn"/>
    		<input type="button" value="子元素选择器" id="btn1"/>
    		<input type="button" value="子类选择器" id="btn2"/>
    		<input type="button" value="相邻兄弟选择器" id="btn3"/>
    
    		<br />
    		<div>
    			<div id="c"></div>
    		</div>
    		
    		<div class="c1">
    			<div class="c2" id="c"></div>
    		</div>
    		
    		<div>
    			<div id="c"></div>
    			<div id="c"></div>
    			<div id="c"></div>
    		</div>
    	</body>
    </html>
    
    
    展开全文
  • jq选择器

    2018-09-21 23:25:00
    jq层次选择器 jq高级选择器之属性选择器(比CSS的属性选择器多了一个不等于) jq高级选择器之过滤选择器【jq选择器的重点】 过滤选择器与CSS的结构伪类的异同: 相同点:都是以冒号打头; 不同点:jq的...

    jq选择器 == CSS的选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    jq高级选择器=层次、属性、过滤(相当于CSS中的结构伪类)

    jq的层次选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    jq高级选择器之属性选择器(比CSS的属性选择器多了一个不等于)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    jq高级选择器之过滤选择器【jq选择器的重点】
    过滤选择器与CSS的结构伪类的异同:
    相同点:都是以冒号打头;
    不同点:jq的过滤选择器名称可能有变更,同时,也扩展更多的选择器。
    在这里插入图片描述
    jq高级选择器之过滤选择器【基本过滤器】
    其中表格可以用的下面的even(偶列)和odd(激列)分别为表格添加背景颜色
    eq:可以用到鼠标悬浮哪个时就可以获取那个的角标:例子就是京东广告轮播
    在这里插入图片描述
    在这里插入图片描述
    jq高级选择器之过滤选择器【可见性过滤器】
    在这里插入图片描述
    jq选择器的注意点之转义字符
    在这里插入图片描述
    jq选择器的注意点之有空格和没有空格的区别
    在这里插入图片描述
    小结
    在这里插入图片描述

    展开全文
  • jq基本选择器

    千次阅读 2019-03-06 19:37:29
    jQuery 选择器大致分为四种:基本选择器、层次选择器、过滤选择器、表单选择器 一、jq基本选择器 选择器的用法跟css的用法一致,只是需要增加选择函数。$(''); 如下面那道题: id选择器为 $('#two'); 类选择器...
  • 一、Jquery常用的过滤选择器如下所示:  1、:first,选取第一个元素,比如$("div:first")选取第一个div元素  2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素  3、:not(选择器),...
  • jQ选择器

    2017-10-10 11:08:00
    jQ选择器分为基本选择器,层次选择器,过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子选择过滤器,表单对象属性过滤选择器 注意:选择器中空格不容忽视,多一个空格和少一个空格也许会得到截然...
  • 1.$(“body div”):选择body内的所有div2.$(“body>div”):选择body内的子元素div3.$(“#one+div”):选择id为one的下一个div(只能是相邻的div)4.$(“two~div”):选择id为two的后边的所有div5.$(“#two”).siblings...
  • JQ选择器

    2020-02-14 10:20:25
    层次选择器 过滤选择器 表单选择器 基本选择器 #id:通过元素的 id 属性中给定的值 $("#myDiv"); element :指向 DOM 节点的标签名$("div"); .class 一个元素可以有多个类,只要有一个符合就能被匹配$(".myClass...
  • jq选择器和过滤器总结 ...jq选择器:层次选择器 祖先后代选择器:语法 $(‘祖先 后代’) 父子选择器:语法 $(‘父亲>儿子’) 兄弟选择器:语法:$(‘目标’).siblings() jq过滤器:基本过滤器 匹配目标的第一个元素
  • JavaScript 入口函数: window.onload = function () { // 执行代码 } 基础选择器: 层次选择器: 用Jquery进行非空验证 <head> ; charset=utf-8"/> <title></title> <meta charset="utf-8" /> ...
  • JQ选择器复习

    千次阅读 2018-08-28 20:47:53
    jQuery 选择器的分类,大致分为四种:基本选择器、层次选择器、过滤选择器、表单选择器 基本选择器: 一:jQuery选择器之id选择器 id选择器:一个用来查找的ID,即元素的id属性,语法是 :$( "#id"...
  • jq 选择器

    2017-01-19 13:34:00
    层次选择器: $('divp');//选取div下的所有的p元素 $('div>p').css('border','1pxsolidred');//只选取div下的直接子元素 //相邻的元素 $('div~p).css('border','1pxsolidred');与$('div').nextAll('p')等价;/...
  • jQuery 层次选择器,属性选择器

    千次阅读 2016-12-01 10:40:25
    jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")
  • JQ类css选择器

    2018-12-06 21:44:44
    1) 类css选择器 ... 1.2) 层次选择器 后代选择器:使用空格作为分隔符 子选择器:使用&gt;作为分隔符 相邻元素选择器:使用+作为分隔符 同辈元素选择器:使用~作为分隔符 1.3) 属性选择器 ...
  • jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。 基本选择器 基本选择器通过元素id,class和标签名等查找DOM查找元素。 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 ...
  • 层次选择器

    2016-07-22 15:03:39
    DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> ...src="js/jq/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8">script> script
  • JQ选择器 在jQuery中,存在着许多的选择器,以下将通过部分案例对选择器进行一个学习与理解 选择器是什么? 有特定语法规则(css选择器)的字符串 用来查找某个/些DOM元素: $(selector) 作用 用来查找特定页面...

空空如也

空空如也

1 2 3
收藏数 55
精华内容 22
关键字:

jq层次选择器