JQuery selector for beginners
Today, let's talk about jquery selectors, which are roughly divided into four selectors !!!!
1. Basic selector (TAG, ID, class, Union set, intersection, global)
1.0 (Template)
<Body> <div id = "o" class = "YY"> I am the first div </div>
<Div> <span> I am the second div </span> </div> </body>
1.1 (TAG)
// Tag $ (function () {$ ("div" ).css ("background-color", "red ");});
1.2 (ID)
$(function(){ $("#o").css("background-color","green"); });
1.3 (class)
$(function(){ $(".myc").css("background-color","red"); });
1.4 (union)
$(function(){ $("div,#o").css("background-color","red"); });
1.5 (intersection)
$(function(){ $("div#o").css("background-color","yellow"); });
1.6 (global)
$(function(){ $("*").css("background-color","blue"); });
2. Hierarchy selector (descendant, child, adjacent, peer ,)
2.1 (descendant)
$(function(){ $("div span").css("background-color","green"); });
2.2 (sub)
$(function(){ $("div>span").css("color","blue"); });
2.3 (adjacent)
$(function(){ $("div+div").css("color","green"); });
2.4 (same generation)
$(function(){ $("div~div").css("color","red"); });
3Attribute Selector
3.0 (Template)
<Body> <a id = "12" href = "#123"> first link </a> <a id = "23" href = "@"> second link </a> <a id = "34" href = "#"> third link </a> </body>
Syntax:
3.1
[Attribute] Select an element that contains a given attribute
$(function(){ $("[href]").css("color","red");
});
3.2[Attribute = value] selects an element equal to a given attribute that is a specific value.
$(function(){ $("[href=#]").css("color","red");
});
3.3[Attribute! = Value] Select an element that is not equal to a given attribute and is a specific value
$(function(){
$("[href！=#]").css("color","red");
});
3.4[Attribute ^ = value] selects the element whose given attribute is the beginning of a specific value.
$(function(){$("[href^#).css("color","red"); });
3.5[Attribute $ = value] selects an element whose specific value ends with a specific value.
$(function(){ $("[href$=123]").css("color","red"); });
3.6[Attribute * = value] selecting a given attribute contains some values
$(function(){ $("[href*'2']").css("color","yellow"); });
3.7[Selector] [selectorN] selects elements that meet the composite attributes of multiple conditions.
$(function(){ $("a[href][id=12]").css("background-color","red"); });
4.Filter selector (Rule selector: Basic filter selector and visibility filter selector)
4.0 (Template)
<Body>
<H2> your lifecycle <Ul>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li class = "a"> 4 </li>
<Li> 5 </li>
<Li> 6 </li>
</Ul>
</Body>
4.1
Syntax:
: First select the first element
$(function(){ $("li:first").css("background","red"); });
4.2
: Last selects the last element
$(function(){ $("li:last").css("background","blue"); });
4.3
: Not (selector) selects to remove all elements that match the specified selector.
$(function(){ $("li:not(.a)").css("background","blue"); });
4.4
: Even Selects all elements with an even index (index starts from 0)
$(function(){ $("li:even").css("background","blue"); });
4.5
: Odd Selects all elements with an odd index (index starts from 0)
$(function(){ $("li:odd").css("background","blue"); });
4.6
: Eq (index) selects the element whose index is equal to index (index starts from 0)
$(function(){ $("li:eq(1)").css("background","blue"); });
4.7
: Gt (index) Select the element whose index is greater than index (index starts from 0)
$(function(){ $("li:gt(1)").css("background","blue"); });
4.8
: Lt (index) Select the element whose index is smaller than index (index starts from 0)
$(function(){ $("li:lt(1)").css("background","blue"); });
4.9
: The header Selects all title elements, such as h1 ~ H6
$(function(){ $(":header").css("background","blue"); });
4.10
: Focus: select the element for which the current focus is obtained.
$(function(){ $(":focus").css("background","red"); });
5.0 (Template)
<Body> <p id = "text_hide"> click the button and I will be hidden. </p> <p id = "text_show"> hidden me is displayed, hey hey </p> <input name = "shwo" type = "button" value = "Click Show text"/> <input name = "hide" type = "button" value = "Click Show text"/> </body>
Syntax:
5.1
Hideen Selects all hidden elements
$(function(){
$("p:hidden").show(100);
});
5.2
Visible Selects all visible elements
$(function(){ $("p:visible").hide(100); });
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
