Home >Web Front-end >JS Tutorial >The use of jQuery Selectors (2. Level)_jquery

The use of jQuery Selectors (2. Level)_jquery

WBOYOriginal: 2016-05-16 18:40:271024browse

This series of articles is divided into nine articles: basic article, hierarchical article, simple article, content article, visibility article, attributes article, sub-element article, form article, and form object properties article.
If you have any suggestions or comments about this series of articles, please send them to the email: sjzlgt@qq.com
Since this is the first time to write a technical series of articles, it is inevitable that there will be errors or code bugs. You are welcome to point them out and thank you!

Online address http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm

<title>jQuery-Selectors-2-bynet</title>
<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 style="width:100%; text-align:center; font-size:16px; font-weight:bold;">
</div>Usage of jQuery-Selectors (selectors)
Use (2. Levels) <br>
This series of articles mainly talks about how to use selectors in the jQuery framework. I will explain it with examples, based on simplicity and comprehensiveness, and will not involve
Very deep, my learning method: get started first, then advance! <br>
This series of articles is divided into: basic article, hierarchical article, simple article, content article, visibility article, attribute article, sub-element article, form article, form object attribute article, a total of 9 articles
. <br>
If you have any suggestions or comments about this series of articles, please send them to email: sjzlgt@qq.com <br>
Since this is my first time writing a series of technical articles, it is inevitable that there will be mistakes or code bugs. You are welcome to point them out and thank you! <a href="http://jquery.com/" target="_blank">
You can go to </a>jQuery official website<br> to learn more about jQuery. <span style="color:Red;">
<strong><a href="http://www.cnblogs.com/bynet/" target="_blank">Copyright: code-cat </a>Blog</strong> Please keep the source and copyright information when reprinting! </span>
</div>
<div class="div">

<br>
Because the scope of the four selectors mentioned in this article is easily confused and difficult to understand. The four examples I gave can still illustrate its scope and are very
Clarity, readers must study these four examples carefully and make comparisons! Download the source code, try to change the conditions, and see the effect! <a href="http://www.cnblogs.com/bynet/archive/2009/11/30/1613635.html" target="_blank">
The flexibility of using jQuery selectors is very high. At this point, you can combine the four selectors in this article with the selector combinations mentioned in the previous article </a>
Look at the results, I believe you will see results that will shock you! 
</div>

<div class="div">
<span class="xiaobiao">1. ancestor descendant usage</span><br>
Definition: Match all eligible descendant elements under a given ancestor element <br>
Return value: Array<Element><br>
Parameters: ancestor (Selector): any valid selector descendant (Selector): the selector used to match the element, and it is after the first selector
Generation element <br>
Example: Change the background color of all Input elements in the DIV with ID "div_1" to red <br>
<span style="border:blue 1px solid;">Code: $("div_1 input").css("background-color","red");<span style="color:green;"> //Click button 1 to execute this code </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">
</div>
</div>
</div>
<span style="color:Red;">
<strong></strong>Note: Please compare this example with the second usage example to see its control range! </span>
</div>
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

<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> 
</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> 
</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> 
</div>

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

运行后，需要刷新下。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Collection of 33 Javascript table sorting controls_javascript skillsNext article：Collection of 33 Javascript table sorting controls_javascript skills

See more

The use of jQuery Selectors (2. Level)_jquery

Related articles