精华内容
下载资源
问答
  • * $("s1 > s2") 子代选择器 30 * $("s1 s2) 后代选择器 31 * */ 32 33 // 后代选择器 34 $( " #father p " ).css( " backgroundColor " , " pink " ); 35 36 // 子代选择器 37 ...
     1 <!DOCTYPE html>
     2 <html lang="cn">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <div id="father">
     9         <div class="red">1</div>
    10         <div>2
    11             <p>21</p>
    12             <p>22</p>
    13             <p>23</p>
    14             <p>21</p>
    15             <p>22</p>
    16             <p>23</p>
    17         </div>
    18         <div class="green">3</div>
    19         <p>4</p>
    20         <p id="green">5</p>
    21         <p>6</p>
    22 </div>
    23 </body>
    24 <script src="jquery-2.1.1.min.js"></script>
    25 <script>
    26     /*
    27     * $("s1s2")     交集选择器
    28     * $("s1, s2")   并集选择器
    29     * $("s1 > s2")  子代选择器
    30     * $("s1 s2)     后代选择器
    31     * */
    32 
    33     // 后代选择器
    34     $("#father p").css("backgroundColor", "pink");
    35 
    36     // 子代选择器
    37     $("#father>p").css("backgroundColor", "blue");
    38 
    39     // 交集选择器
    40     $("div.red").css("backgroundColor", "red");
    41 
    42     // 并集选择器
    43     $(".green, #green").css("backgroundColor", "green");
    44 
    45     // 过滤选择器, even下标为基数的标签
    46     $("div>div>p:even").css("backgroundColor", "cyan");
    47 
    48     // 过滤选择器, eq等于下标为多少的标签
    49     $("div>div>p:eq(2)").css("backgroundColor", "orange");
    50 
    51 </script>
    52 </html>

     

    转载于:https://www.cnblogs.com/ZeroHour/p/8043952.html

    展开全文
  • 子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。...
    名称 用法 描述
    子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
    后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

    跟CSS的选择器一模一样。

    案例:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="father">
      <div>11</div>
      <div>22
        <p>111</p>
        <p>222</p>
        <p>333</p>
      </div>
      <div>33</div>
      <div>44</div>
      <div>55</div>
      <p>66</p>
      <p>77</p>
      <p>88</p>
    </div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        //$("s1,s2")// 并集选择器
        //$("s1 s2")// 后代选择器
        //$("s1>s2")// 子代选择器
        
        //$("li.green")
        //$("s1s2") //交集选择器
        
        
        //$("#father>p").css("backgroundColor", "red");
        $("#father p").css("backgroundColor", "red");
      });
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 求大神指点,小弟刚自学jquery。 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="jquery-3.1.0....
  • **jQuery 后代选择器子选择器 通过点击,alert一一弹出form标签input元素中的内容** <title>后代选择器子选择器</title> <script type="text/javascript" src="js/jquery1.11.3.min.js">&...
    **jQuery     后代选择器或子选择器
    通过点击,alert一一弹出form标签input元素中的内容**
    
    	<title>后代选择器或子选择器</title>
    		<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
    				<!-- 
    				后代选择器:包含所有后代 》子,孙子。。。。。 
    				子选择器:只包含儿子一代
    				 
    				 -->
    				
    				<script>
    		function myclick(){
    			//取出 form中所有input
    			$("form input").each(function(){
    				alert($(this).val())
    				
    			})
    				
    			}
    		
    				</script>
    	</head>
    	<body>
    		<form action="">
    			账号:
    			<input type="text" name="username" id="username" /><br />
    			密码:
    			<input type="text" name="pas" id="pas" /><br />
    			<div>
    				电话:
    				<input type="text" name="phone" id="phone" /><br />
    				地址:
    				<input type="text" name="ads" id="ads" /><br />
    			</div>
    			
    			<input type="button" value="点击" onclick="myclick()"/><br />
    		</form>
    		
    		<input type="text" name="huo" value="获取不到" /><br />
    		
    	</body>
    </html>
    
    展开全文
  • jQuery-jQuery选择器汇总

    2017-11-06 13:55:11
    2. jquery基本选择器: id选择器(#) 类选择器(.) 元素选择器(元素名) 通配符选择器(*)  并集选择器(e,e) 交集选择器(e.e) ...子代选择器:var span = $("div>span"); 相邻兄弟选择器:var re
    2. jquery基本选择器:
    id选择器(#)  类选择器(.) 元素选择器(元素名) 通配符选择器(*) 
    并集选择器(e,e)  交集选择器(e.e)
    例如:var div = $(“#div1”);


    3. 层级选择器
    后代选择器:var spans = $("div p");
    子代选择器:var span = $("div>span");
    相邻兄弟选择器:var result = $("#p1 + p");
    兄弟选择器:var result = $("#p1~p");


    4. 基本伪类选择器:
    Frist:返回第一个元素
    Last:返回最后一个元素
    Not:去除所有与给定选择器匹配的元素
    even: 返回索引为偶数的元素
    odd: 返回索引值为奇数的元素
    eq:返回指定索引的元素
    gt:返回所有索引值大于某个指定元素
    lt:返回所有索引值小于某个指定元素
    header:返回所有标题标签
    animated:匹配所有正在执行动画效果的元素
    例如:var li1 = $("li:first");


    5. 内容选择器:
    contains:返回包含指定内容的元素(区分大小写)
    has:返回包含指定元素的元素
    parent:返回包含子元素或有内容的元素
    empty:返回一个没有内容也没有子元素的元素
    6. 可见性选择器:
    div:隐藏的两种方法:
           1.display :none
           2.hidden :hidden
           这两种方法都可以通过show()和hide()进行展示和隐藏
    input框的隐藏方法:
         1.display:none  可任意通过show()和display:block进行显示
         2.type:hidden    只能通过prop方法来修改属性  prop(“type”,“text”)
           type:hidden的元素空间还在
    7. 属性选择器:
    [attr]:包含某个属性的元素
     [attr=value]:用与返回属性等于某个值的元素
     [attr!=value]:用与返回属性不等于某个值的元素
     []attr^=value]:匹配给定的属性是以某些值开始的元素
     []attr$=value]:匹配给定的属性是以某些值开始的元素
     []attr*=value]:匹配给定的属性是以某些值开始的元素
    only-child:如果某个元素是父元素中唯一的子元素,那将会被匹配 
    例如: $("[id = demo1]").css({color:"red"});
    8. 表单选择器:text  password  radio checkbox submit reset image button file hidden
    例如: $(":password").val(123456);
    9. 表单对象:
    disabled:返回所有被禁用的元素
    enabled:返回所有可操作的元素
    checked:返回所有被选中的选择框
    selected:返回所有被选中的下拉框



    展开全文
  • jQuery里面的选择器

    2019-09-05 09:55:16
    jQuery里面的选择器多种多样,它支持css1~css3的选择器,【老版本的jQuery还支持Xpath的选择器】,在原来的CSS选择器上面又扩展了一些新的选择器 jQuery支持CSS当中的九大选择 标签,ID,class,兄弟,子代,后代...
  • jquery基础语法选择器

    2020-08-27 10:26:06
    $代表jquery的缩写 ...action()执行对元素的操作,包括修改样式属性、事件、动画等 基础选择器 id选择器、class选择器、标签选择器...n’)子代选择器 $(‘m~n’)兄弟选择器 $(‘m+n’)相邻选择器 属性选择器 $() ...
  • jquery选择器

    千次阅读 2015-04-06 22:51:33
    jquery选择器 1、通配符选择器 2、ID选择器 3、类选择器 4、元素选择器 5、相邻选择器 6、子代选择器 7、属性选择器 8、伪类选择器
  • jquery选择器 1. *:匹配所有元素。 #idName:匹配id值是idName的元素。 .className:匹配class值是idName的...child:子代选择器。 ancestor descendants:匹配所有属于ancestor元素的后代descendants元素。 ...
  • jQuery 选择器

    2020-10-26 15:10:46
    jQuery 选择器 文章目录jQuery 选择器基础选择器层级选择器基础选择器和层级选择器案例代码...层级选择器最常用的两个分别为:后代选择器和子代选择器。 基础选择器和层级选择器案例代码 <body> <div>我
  • $(':only-child')–选择所有作为其父唯一元素的元素。 $('li:only-child')–选择与<li>匹配的所有元素,它们是其父元素的唯一元素。 jQuery示例 在此示例中,单击按钮时,只有<li> ...
  • jQuery选择器

    2020-05-17 21:14:45
    jQuery选择器 1.基本选择器: 所有选择器 * 标签选择器 标签名 ID选择器 #id 类选择器 .className 群组选择器(并集选择器) .one,.two 多个选择器使用都...子代选择器 .one>.two 两个选择器使用>隔开,表示只能
  • jquery语法,选择器

    2020-09-29 22:02:59
    后代选择器,子代选择器,next,siblings描述? 基本选择器:? :first :last :not :even :odd :eq :gt :lt :header :animated 4.内容选择器的描述? :contains :empty :has :parent 匹配包含给定文本的元素 匹配所有...
  • jQuery学习-jQuery选择器

    2020-08-13 19:26:43
    jQuery特有选择器 1、基本选择器 名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); ...子代选择器 $(
  • 基本选择器 普遍选择器 * 所有的 id选择器 #id 类选择器 .class 标签选择器 标签名 群组选择器 #one,.two 取并集 ... 子代选择器 &gt; 直接孩子 后代选择器 空格 所有的后代 body * body...
  • jQuery常用选择器

    2019-06-11 20:02:01
    jQuery常用选择器(jQuery兼容css...3、子代选择器(子) $("#id>xx") 4、后代选择器(子子孙孙) $("#id xx") 5、并集选择器(选择多个元素) $("#id,.class,xx") 6、交集选择器(同时满足选择条件) $(...
  • jQuery选择器 $("div");//标签名选择器 $("#div1");//id选择器 ...//子代选择器 $(".div1+div");//下一个兄弟选择器 $(".div1~div");//下面所有的兄弟选择器 $("div.div1");//div中类名是div1的di
  • jQuery - 选择器

    2019-11-19 09:37:08
    jQuery选择器允许对HTML元素组成或单个元素进行操作 ... 子代选择器: 语法: $("ul>li"); 使用>,获取亲儿子层级的元素,不会获取孙子层级的元素 返回集合元素 <div id="test...
  • jQuery层次选择器

    2017-08-31 21:24:12
    本文主要通过实例介绍了jQuery提供的几种元素选择器的用法,包括:后代选择器、子代选择器、相邻选择器、兄弟选择器。
  • jQuery下降器选择器(XY)用于选择与“ Y”匹配的所有元素,这些元素是“ X”元素的子代,孙代,曾孙代,曾曾孙。 例如, $('#container div') –选择与<div>匹配的所有元素,这些元素是具有容器ID的...
  • 在给定祖先元素下匹配所有的后代元素,这个要与子代选择器区分开。用法:("ancestor descendant ")) 返回值 集合元素;在给定祖先元素下匹配所有的后代元素,这个要与子代选择器区分开。 用法:(...
  • b 选择器a选择的区域里面所有为选择器b的子代元素 a+b 选择器a选择器的区域后面第一个为选择器b的弟弟元素 a~b 选择器a选择器的区域后面所有的为选择器b的弟弟元素 基本选择器案例: 效果图: 代码...
  • jQuery 中的选择器

    2018-05-22 23:04:45
    a:基本选择器id选择器 $("#id名");类选择器 $("...b:层级选择器子代 $("div&gt;p");后代 $("div p");c:过滤选择器偶数 $("li:even");奇数 
  • jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素内所有的descendant元素,将其封装为jQuery对象并返回。注意:选择器descendant的...如果你只想查找子辈元素,请使用子代选择器(parent > c...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 191
精华内容 76
关键字:

jquery子代选择器