精华内容
下载资源
问答
  • 主要介绍了jQuery后代选择器用法,以设置文本颜色的实例分析了后代选择器的应用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
  • PHP jQuery 后代选择器

    2013-11-30 17:52:02
    PHP jQuery 后代选择器 后代选择器后代选择器匹配给定的祖先元素下用以匹配的所有后代元素。
  • jQuery下降器选择器(XY)用于选择与“ Y”匹配的所有元素,这些元素是“ X”元素的子代,孙代,曾孙代,曾曾孙。 例如, $('#container div') –选择与<div>匹配的所有元素,这些元素是具有容器ID的...

    jQuery下降器选择器(XY)用于选择与“ Y”匹配的所有元素,这些元素是“ X”元素的子代,孙代,曾孙代,曾曾孙。

    例如,

    • $('#container div') –选择与<div>匹配的所有元素,这些元素是具有容器ID的元素的后代。
    • $('form input') –选择与<input>匹配的所有元素,它们是与<form>匹配的元素的后代。

    jQuery示例

    在此示例中,它使用jQuery后代选择器为所有属于<form>元素后代的<input>字段添加“红色边框”。

    <html>
    <head>
    <title>jQuery descendant selector example</title>
     
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
     
     <style type="text/css">
      div { padding:8px 0px 8px 8px; }
     </style>
    
    
    </head>
     
    <script type="text/javascript">
     
    $(document).ready(function(){
    
    	$("form input").css("border", "2px solid red");
    
    });
    
    </script>
    <body>
    
    <h1>jQuery child selector example</h1>
    
    <form>
    	
    	<label>TextBox 1 (Child) : </label><input name="textbox1">
    	
    	<div class="level1">
    		<label>TextBox 2 (GrandChild) : </label><input name="textbox2">
    	</div>
    	
    	<div class="level1">
    	   <div class="level2">
       	     <label>TextBox 3 (Great GrandChild) : </label><input name="textbox3">
    	   </div>
    	</div>
    	
    	<label>TextBox 4 (Child) : </label><input name="textbox4">
    	
    </form>
    
    <div> I'm form siblings #1 - DIV</div>
    
    <p> I'm form siblings #2 - P </p>
    
    <div> I'm form siblings #3 - DIV </div>
    
    <p> I'm form siblings #4 - P </p>
    
    </body>
    </html>

    翻译自: https://mkyong.com/jquery/jquery-descendant-selector-example/

    展开全文
  • 名称 用法 描述 子代选择器 ...使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。 案例: <!DOCTYPE html> <html lang="zh-CN"> <head&g...
    名称用法描述
    子代选择器$(“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层级选择器的实现(匹配后代元素div)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • jQuery中的后代选择器和孩子选择器

    千次阅读 2019-04-13 16:12:21
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><...script type="text/javascript" src="js/jquery-3.3.1.js"></script> <...

     

    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    		<style type="text/css">
    			
    		</style>
    		<script type="text/javascript">
    			$(function(){
                    //$("祖先 后代")
                    $("table tfoot").css("background-color","#9ACD32");//后代选择器
    				$("p>span").css("background-color","red");//孩子选择器
    				$("#mytable thead").css("background-color","deepskyblue");
    			});
    			
    		</script>
    	</head>
    	<body>
    
    		<table id="mytable" border="0" cellspacing="" cellpadding="10">
    			
    			<div>
    				<p>
    					我是<span>李疆</span>,啦啦啦
    				</p>
    			</div>
    			
    			<thead>
    				<tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
    			</thead>
    			
    			<tbody>
    				<tr>
    					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    				</tr>
    				<tr>
    					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    				</tr>
    				<tr>
    					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    				</tr>
    				<tr>
    					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    				</tr>
    				<tr>
    					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    				</tr>
    				<tr>
    					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    				</tr>
    			</tbody>
    			
    			<tfoot>
    				<tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
    			</tfoot>
    			
    		</table>
    			
    		<table border="1" cellspacing="1" cellpadding="5">
    			<tr>
    				<th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th>
    			</tr>
    			<tr>
    				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    			</tr>
    			<tr>
    				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    			</tr>
    			<tr>
    				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    			</tr>
    			<tr>
    				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    			</tr>
    			<tr>
    				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    			</tr>
    			<tr>
    				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
    			</tr>
    			
    			<tfoot>
    				<tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
    			</tfoot>
    		</table>
    	</body>
    </html>
    

    展开全文
  • 一、jQuery选择器 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 <p> 元素。 $("p.intro") 选取所有 class="intro" 的 <p> 元素。 $("#demo") 选取所有 id="demo" ...

    一、jQuery选择器

           jQuery 元素选择器
           jQuery 使用 CSS 选择器来选取 HTML 元素。

           $("p") 选取 <p> 元素。

           $("p.intro") 选取所有 class="intro" 的 <p> 元素。

           $("#demo") 选取所有 id="demo" 的 元素。

           $(this)选取当前的html元素(关于this与$(this)的区别下面会讲)

    二、jQuery语法
          基础语法是:$(selector).action()

         美元符号定义 jQuery
         选择符(selector)“查询”和“查找” HTML 元素
         jQuery 的 action() 执行对元素的操作
    示例:

    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏所有段落

    $(".test").hide() - 隐藏所有 class="test" 的所有元素

    $("#test").hide() - 隐藏所有 id="test" 的元素

    三、JQuery this和$(this)的区别

          JQuery中的  $()  这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。

    四、jQuery隐藏和显示
       语法:

                   $(selector).hide(speed,callback);
     
                   $(selector).show(speed,callback);

    五、jQuery获取以及设置值
          三个简单实用的用于 DOM 操作的 jQuery 方法:

              获取值: 

                   text() - 设置或返回所选元素的文本内容
                   html() - 设置或返回所选元素的内容(包括 HTML 标记)
                   val() - 设置或返回表单字段的值
                  $("#btn1").click(function(){
                  alert("Text: " + $("#test").text());
                      });
                 $("#btn2").click(function(){
                alert("HTML: " + $("#test").html());
                   });
               $("#btn3").click(function(){
              alert("Value: " + $("#test").val());
                });
    设置值:

                $("#btn1").click(function(){
                          $("#test1").text("Hello world!");
                });
               $("#btn2").click(function(){
                         $("#test2").html("<b>Hello world!</b>");
               });
               $("#btn3").click(function(){
                        $("#test3").val("Dolly Duck");
              });
     六、jQuery遍历 
             jQuery parent() 方法:

            parent() 方法返回被选元素的直接父元素。

             jQuery children() 方法

            children() 方法返回被选元素的所有直接子元素。

            jQuery find() 方法

            find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

    八、jQuery DOM 元素方法
          .get() 获得由选择器指定的 DOM 元素。
          .index() 返回指定元素相对于其他指定元素的 index 位置。
          .size() 返回被 jQuery 选择器匹配的元素的数量。
          .toArray() 以数组的形式返回 jQuery 选择器匹配的元素。

    展开全文
  • 首先,jquery选择器返回jquery对象!!! 只不过jquery对象有length属性,会告诉你这个jquery对象包含多少个dom对象。 如果直接使用jquery对象,可以去参阅jquery文档。 其次jquery对象根据下标取值后,会返回dom...
  • 3.jquery选择器语法

    2020-05-01 10:56:34
    jquery中只有三种选择器 二、基本选择器 1、定位条件 可以根据ID编号,根据标签类型名,根据Class名(和CSS一样都是三种) 2、选择器的使用(第四种几乎不用) $("#idname") 代替document.getElementById(“idname”)...
  • **jQuery 后代选择器或子选择器 通过点击,alert一一弹出form标签input元素中的内容** <title>后代选择器或子选择器</title> <script type="text/javascript" src="js/jquery1.11.3.min.js">&...
  • egg:$('div[id="all-list"] div:first> div:eq(1) > ul:eq(1) li:first > a').attr('href') 示例所用的网站为 https://search.bilibili.com/all?keyword=剑皇
  • $("s1,s2")并集选择器 $("s1 s2")后代选择器 $("s1>s2")子代选择器 $("s1s2")交集选择器 转载于:https://www.cnblogs.com/cuilichao/p/9804355.html
  • 常用选择器 $(&amp;amp;amp;quot;*&amp;amp;amp;quot;) 所有元素 $(&amp;amp;amp;quot;#id&amp;amp;amp;quot;) id选择器 $(&amp;amp;amp;quot;.class&amp;amp;amp;quot;) 类选择器 $...
  • 2. 后代元素选择器 用于在给定的祖先元素下匹配所有的后代元素,语法格式: 代码如下:$(“ancestor descendant”); 3. 紧邻同辈元素选择器 用于匹配所有紧邻在prev元素后的next元素,语法格式: 代码如下:$(“prev + ...
  • 层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为...
  • ("parent descendant") 选择器选取指定元素的后代的所有元素。 元素的后代可以是元素的第一代、第二代、第三代等等。 实例 选取 <div> 元素的后代的所有 <span> 元素: $("div span") 语法 ("parent ...
  • 主要介绍了jquery选择器排除某个DOM元素的方法,也就是在选中的一些元素中,过滤一些不需要的,使用jquery not选择器实现,需要的朋友可以参考下
  • 本文实例讲述了jQuery层叠选择... 后代选择器 格式:$("ancestor descendant") 子选择器 格式:$("parent>child") 相邻选择器 格式:$("prev+next") 兄弟选择器 格式:$("prev~siblings") 如操作: 获取第一个ul下
  • jquery层次选择器 jquery层次选择器,包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈...
  • &lt;script src="../../scripts/jquery-1.3.1.js" type="text/javascript"&gt;&... //注意区分类似这样的选择器 //虽然一个空格,却截然不同的效果. var ..
  • 本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考,具体如下: 前面一篇介绍了几种基本的jQuery选择器,今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...
  • jQuery 选择器有很多,基本兼容了 CSS1 到 CSS3 所有的选择器,除此之外,它也有一些自定义的选择器,在 jQuery 中所有的选择器都是以 $ 符号 开始:$("选择器")。 下面我们仅针对 jQuery 中一些常用的选择器做一下...
  • jquery 选择器及循环

    2019-09-23 22:25:36
    基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each 1. 基本选择器 //标签 $("div").css("background","red"); //id $("#active").css("background",...
  • CSS后代选择器

    千次阅读 2017-12-02 14:54:30
    关系选择器 ...于是,关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1
  • jquery后代选择器有多种写法,如下都能达到目的,哪位高人知道他们之间的核心区别是什么? $("#tab_schedule").find("li"); $("#tab_schedule li"); $("li","#tab_schedule");
  • JQuery选择器之CSS选择器

    千次阅读 2017-12-07 20:47:53
    核心选择器 语法 描述 * 选择所有元素 选择特定类型的元素 . 选择具有特定class的元素 <type>. 选择具有特定class的某类元素 ‘#id 选择具有特定id属性值的元素 属性选择器 语法 描述 [attr] 选取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,872
精华内容 7,148
关键字:

jquery后代选择器