jQuery Selectors(选择器)的使用(二、层次篇)

Heim

Web-Frontend

js-Tutorial

jQuery Selectors(选择器)的使用(二、层次篇)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:40 PM

jquery

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！

在线地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm

<title>jQuery-Selectors-2-bynet</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<style type="text/css"> 
.div 
{ 
    width:95%; 
    margin-left:15px; 
    margin-top:15px; 
    margin-right:15px; 
    padding-left:5px; 
    padding-top:5px; 
    padding-bottom:5px; 
    background-color:#ccc; 
    border:#999 1px solid; 
    line-height:30px; 
    font-size:13px; 
    font-family:微软雅黑; 
} 
.blue{color:Blue;} 
.green{color:Green;} 
.button{border:green 1px solid;width:100px;} 
.xiaobiao{ font-weight:bold;} 
.red_test{background-color:red; color:White; width:300px; height:30px;} 
.li_test{border:#000 1px solid;} 
.nei_div{border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px;} 
</style>

<div class="div"> 
<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">jQuery-Selectors(选择器)的使 
用(二、层次篇)</div> 
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉 
及很深，我的学习方法：先入门，后进阶！<br> 
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章 
。<br> 
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com <br> 
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！<br> 
您可以到<a href="http://jquery.com/" target="_blank">jQuery官网</a>来学习更多的有关jQuery知识。<br> 
<span style="color:Red;"><strong>版权所有：code-cat <a href="http://www.cnblogs.com/bynet/" target="_blank">博客</a> 转载请保留出处和版权信息！</strong></span> 
</div>

<div class="div"> 
由于这篇文章中讲到的四种选择器作用范围很容易混淆，且不容易理解。我给出的四个例子还是能说明其作用范围的，并且很 
清晰，请读者一定仔细研究这四个实例，并作比较！把源码下载下来，试着改其中的条件，并看效果！<br> 
jQuery选择器的使用灵活度非常高，至此，您可以利用本文中的四种选择器和<a href="http://www.cnblogs.com/bynet/archive/2009/11/30/1613635.html" target="_blank">上一篇</a>中所讲的选择器组合并 
看效果，相信你会看到足以令你震撼的结果！ 
</div>

<div class="div"> 
<span class="xiaobiao">1. ancestor descendant用法</span><br> 
定义：在给定的祖先元素下匹配所有的符合条件后代元素<br> 
返回值：Array<element><br> 
参数：ancestor (Selector):任何有效选择器 descendant (Selector):用以匹配元素的选择器，并且它是第一个选择器的后 
代元素<br> 
实例：将ID为"div_1"的DIV中所有的Input元素的背景色改为红色<br> 
<span style="border:blue 1px solid;">代码： $("div_1 input").css("background-color","red");<span style="color:green;"> //点击按钮一将执行这句代码</span></span> 
<div id="div_1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
form ID="div_1"<br> 
<input type="text" value="input"> <input type="text"> 
<div id="div_2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; 
"> 
DIV ID="div_2"<br> 
<input type="text"> 
</div> 
<div id="div_3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; 
"> 
DIV ID="div_3"<br> 
<input type="text" value="input"> 
</div> 
<div id="div_4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> 
DIV ID="div_4"<br> 
<input type="text"> 
</div> 
<div id="div_5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> 
DIV ID="div_5" 
<div id="div_5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> 
DIV ID="div_5_1" 
<input type="text"> 
<input type="button" id="btn_1" value="按钮一" class="button"> 
<script type="text/javascript"> 
$("#btn_1").click(function(){ 
$("#div_1 input").css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div> 
<span style="color:Red;"><strong>注意：本实例请与第2个用法的实例作对比，看其控制范围！</strong></span> 
</element>
</div>

<div class="div"> 
<span class="xiaobiao">2. parent > child用法</span><br> 
定义：在给定的父元素下匹配所有的子元素<br> 
返回值：Array<element><br> 
参数：parent (Selector):任何有效选择器 child (Selector): 用以匹配元素的选择器，并且它是第一个选择器的子元素 
<br> 
实例：将ID为"div_a1"的DIV中所有的Input元素的背景色改为红色<br> 
<span style="border:blue 1px solid;">代码： $("#div_a1 > input").css("background-color","red");<span style="color:green;"> //点击按钮二将执行这句代码</span></span> 
<div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_a1"<br> 
<input type="text" value="input"> <input type="text"> 
<div id="div_a2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; 
"> 
DIV ID="div_a2"<br> 
<input type="text"> 
</div> 
<div id="div_a3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; 
"> 
DIV ID="div_a3"<br> 
<input type="text" value="input"> 
</div> 
<div id="div_a4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> 
DIV ID="div_a4"<br> 
<input type="text"> 
</div> 
<div id="div_a5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> 
DIV ID="div_a5" 
<div id="div_a5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> 
DIV ID="div_a5_1" 
<input type="text"> 
<input type="button" id="btn_2" value="按钮二" class="button"> 
<script type="text/javascript"> 
$("#btn_2").click(function(){ 
$("#div_a1 > input").css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div> 
</element>
</div>

<div class="div"> 
<span class="xiaobiao">3. prev + next用法</span><br> 
定义：匹配所有紧接在 prev 元素后的 next 元素<br> 
返回值：Array<element><br> 
参数：prev (Selector):任何有效选择器 next (Selector):一个有效选择器并且紧接着第一个选择器<br> 
实例：将ID为"div_b1"的DIV中所有span元素后紧跟的input元素的背景色改为红色<br> 
<span style="border:blue 1px solid;">代码：$("#div_b1 span + input").css("background-color","red");<span style="color:green;"> //点击按钮三将执行这句代码</span></span> 
<div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_b1"<br> 
<input type="text" value="input">  
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
<input type="text" value="input" style="width:50px;"> 
<div id="div_b2" class="nei_div"> 
DIV ID="div_b2"<br> 
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
<input type="text" value="input" style="width:50px;"> 
</div> 
<div id="div_b3" class="nei_div"> 
DIV ID="div_b3"<br> 
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
<input type="text" value="input" style="width:50px;"> 
</div> 
<div id="div_b4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> 
DIV ID="div_b4"<br> 
<input type="text" value="input" style="width:50px;"> 
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
</div> 
<div id="div_b5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> 
DIV ID="div_b5" 
<div id="div_b5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> 
DIV ID="div_b5_1" 
<span style="background-color:Green;">span</span> 
<input type="text"> 
<input type="button" id="btn_3" value="按钮三" class="button"> 
<script type="text/javascript"> 
$("#btn_3").click(function(){ 
$("#div_b1 span + input").css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div> 
<span style="color:Red;"><strong>注意：第一个选择器我用了ancestor descendant用法，您也可以尝试其它用法。本例请 
与下面第4点的实例作对比并看效果！</strong></span> 
</element>
</div>

<div class="div"> 
<span class="xiaobiao">4. prev ~ siblings用法</span><br> 
定义：匹配 prev 元素之后的所有 siblings 元素<br> 
返回值：Array<element><br> 
参数：prev (Selector):任何有效选择器 siblings (Selector):一个选择器，并且它作为第一个选择器的同辈<br> 
实例：将ID为"div_c1"的DIV中所有与span元素之后平级的input元素的背景色改为红色<br> 
<span style="border:blue 1px solid;">代码：$("#div_c1 span ~ input").css("background-color","red");<span style="color:green;"> //点击按钮四将执行这句代码</span></span> 
<div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_c1"<br> 
<input type="text" value="input"> <span style="background-color:Green;">span</span><input type="text"> 
<div id="div_c2" class="nei_div"> 
DIV ID="div_c2"<br> 
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
<input type="text" value="input" style="width:50px;"> 
</div> 
<div id="div_c3" class="nei_div"> 
DIV ID="div_c3"<br> 
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
<input type="text" value="input" style="width:50px;"> 
</div> 
<div id="div_c4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> 
DIV ID="div_c4"<br>

<input type="text" value="input" style="width:50px;"> 
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
</div> 
<div id="div_c5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> 
DIV ID="div_c5" 
<div id="div_c5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> 
DIV ID="div_c5_1" 
<span style="background-color:Green;">span</span> 
<input type="text" value="input" style="width:50px;"> 
<input type="text" value="input" style="width:50px;"> 
<input type="button" id="btn_4" value="按钮四" class="button"> 
<script type="text/javascript"> 
$("#btn_4").click(function(){ 
$("#div_c1 span ~ input").css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div> 
<span style="color:red;"><strong>注意：DIV ID="div_c1" 和 ID="div_c4"中的span元素前的input并未改变背景色，因为 
第二个选择器查找第一个选择器之后的元素</strong></span> 
</element>
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

运行后，需要刷新下。

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

JavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

Wie installiere ich JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript erfordert keine Installation, da es bereits in moderne Browser integriert ist. Sie benötigen nur einen Texteditor und einen Browser, um loszulegen. 1) Führen Sie sie in der Browser -Umgebung durch, indem Sie die HTML -Datei durch Tags einbetten. 2) Führen Sie die JavaScript -Datei nach dem Herunterladen und Installieren von node.js nach dem Herunterladen und Installieren der Befehlszeile aus.

Wie sende ich Benachrichtigungen, bevor eine Aufgabe in Quartz beginnt?Apr 04, 2025 pm 09:24 PM

So senden Sie im Voraus Aufgabenbenachrichtigungen in Quartz Wenn der Quartz -Timer eine Aufgabe plant, wird die Ausführungszeit der Aufgabe durch den Cron -Ausdruck festgelegt. Jetzt...

Wie erhalten Sie in JavaScript Parameter einer Funktion auf einer Prototypkette in einem Konstruktor?Apr 04, 2025 pm 09:21 PM

So erhalten Sie die Parameter von Funktionen für Prototyp -Ketten in JavaScript in JavaScript -Programmier-, Verständnis- und Manipulationsfunktionsparametern auf Prototypungsketten ist eine übliche und wichtige Aufgabe ...