current position：Home>[jQuery framework, Ali innovatively released the new high concurrency classic]

[jQuery framework, Ali innovatively released the new high concurrency classic]

2021-08-27 02:11:36 【No hair loss Xiaoyi】

???$(function () {

???// tag chooser

???// Change the element name to <div> The background color of all elements of is Red

???$(“#b2”).click(function f() {

???$(“div”).css(“backgroundColor”,“yellow”);

???});

</script>




 Then let's talk about it with examples jQuery How to use the five selectors in the framework .



** One 、 Basic selector **

===========



**1、 tag chooser **

-----------



 Tag selectors are also called “ Element selector ”,



 grammar ：$(“html Tag name ”)



 effect ： Get all the elements that match the label element name 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.

// tag chooser

// Change the element name to <div> The background color of all elements of is yellow id=“b1”

$(“#b1”).click(function f() {

???$(“div”).css(“backgroundColor”,“yellow”);

});




**2、id Selectors **

-----------



 grammar ：$(“#id The attribute value ”)



 effect ： Acquisition and designation id Attribute value matching element 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

//id Selectors

// change id by one The background color of the element is Pink ?id=“b2”

$(“#b2”).click(function () {

???$(“#one”).css(“backgroundColor”,“pink”);

});




**3、 Class selectors **

----------



 grammar ：$(“.class Property selector for ”)



 effect ： Acquisition and designation class Attribute value matching element 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Class selectors

// change class by mini The background color of all elements of is Red id=“b3”

$(“#b3”).click(function () {

???$(“.mini”).css(“backgroundColor”,“red”);

});




**4、 Union selector **

-----------



 grammar ：$(“ Selectors 1, Selectors 2....”)



 Get all elements selected by multiple selectors 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Union selector

// Change everything <span> Elements and id by two The background color of the element is blue id=“b4”

$(“#b4”).click(function () {

???$(“span,#two”).css(“backgroundColor”,“blue”);

});




** Two 、 Hierarchy selector **

===========



**1、 Descendant selector **

-----------



 grammar ：$(“A B”)



 effect ： choice A Everything inside the element B Elements 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.

// Descendant selector

// change <body> All in <div> The background color of is red id=“b1”

$(“#b1”).click(function () {

???$(“body div”).css(“backgroundColor”,“pink”);

});




**2、 Child selectors **

----------



 grammar ：$(“A > B”)



 effect ： choice A Everything inside the element B Subelement 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Child selectors

// change <body> Intron <div> The background color of is Red id=“b2”

$(“#b2”).click(function () {

???$(“body?> div”).css(“backgroundColor”,“red”);

});




** What we need to pay attention to here is ：** There seems to be no difference between the two selectors , But when we use it, we will find that there are differences ,** The descendant selector will put the element A All inside B All elements are selected ,**** The sub selector selects only elements A In the next level element of B Elements , The range is smaller than the descendant selector .** See the following examples for details ：




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

??<head>

???<title> Hierarchy selector </title>

???<meta http-equiv=“content-type” content=“text/html; charset=UTF-8”>

???<script ?src=“…/js/jquery-3.3.1.min.js”></script>

???<style type=“text/css”>

???div,span{

???width: 180px;

???height: 180px;

???margin: 20px;

???background: #9999CC;

???border: #000 1px solid;

???float:left;

???font-size: 17px;

???font-family:Roman;

???}

???

???div .mini{

???width: 50px;

???height: 50px;

???background: #CC66FF;

???border: #000 1px solid;

???font-size: 12px;

???font-family:Roman;

???}

???

???div .mini01{

???width: 50px;

???height: 50px;

???background: #CC66FF;

???border: #000 1px solid;

???font-size: 12px;

???font-family:Roman;

???}

???

???</style>

???<script type=“text/javascript”>

???$(function () {

???// Descendant selector

???// change <body> All in <div> The background color of is red

???$(“#b1”).click(function () {

???$(“body div”).css(“backgroundColor”,“pink”);

???});

???// Child selectors

???// change <body> Intron <div> The background color of is Red

???$(“#b2”).click(function () {

???$(“body > div”).css(“backgroundColor”,“red”);

???});

???</script>

???

???</head>

???

???<body>

???

???<input type=“button” value=“ preservation ” ?class=“mini” name=“ok” ?class=“mini” />

???<input type=“button” value=" change <body> All in <div> The background color of is red " ?id=“b1”/>

???<input type=“button” value=" change <body> Intron <div> The background color of is Red " ?id=“b2”/>

???

??? There is a miracle called persistence

???<h2> Self confidence comes from hard work </h2>

???

???<div id=“one”>

???id by one ?

???

???</div>

???

???<div id=“two” class=“mini” >

???id by two ??class yes mini

???<div ?class=“mini” >class yes mini</div>

???</div>

???

???<div class=“one” >

???class yes one

???<div ?class=“mini” >class yes mini</div>

???</div>

???<div class=“one”>

???class yes one

???<div ?class=“mini01” >class yes mini01</div>

???<div ?class=“mini” >class yes mini</div>

???</div>

???

???<span class=“spanone”> ???span

???</span>

???

???</body>

???

</html>




** 3、 ... and 、 Attribute selector **

===========



**1、 Property name selector **

-------------



 grammar ：$(“A\[ Property name \]”)



 effect ： Contains the selector for the specified property 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.

// Contains properties title Of div The background color of the element is red " ?id=“b1”

$(“#b1”).click(function () {

???$(“div[title]”).css(“backgroundColor”,“pink”);

});




**2、 Attribute selector **

-----------



 grammar ：$(“A\[ Property name =’ value ’\]”)



 effect ： Contains a selector with the specified property equal to the specified value ,




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// attribute title The value is equal to test Of div The background color of the element is red " ?id=“b2”

?$(“#b2”).click(function () {

???$(“div[title=‘test’]”).css(“backgroundColor”,“red”);

?});




** In this selector , We can expand it according to its functions , For example, we can put ：**



**“=” Switch to “!=”, It is a selector whose specified property name is not equal to the specified value **




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.

// attribute title Value is not equal to test Of div Elements ( There is no attribute title Will also be selected ) The background color is red " ?id=“b3”

?$(“#b3”).click(function () {

???$(“div[title!=‘test’]”).css(“backgroundColor”,“red”);

?});




### ** According to the rules of using regular expressions ：**



**“=” Switch to “^=”, Is to specify that the property name is a selector starting with the specified value **




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.

// attribute title value With te Start Of div The background color of the element is red " ?id=“b4”

?$(“#b4”).click(function () {

???$(“div[title^=‘te’]”).css(“backgroundColor”,“red”);

?});




**“=” Switch to “$=”, Is to specify that the property name is a selector that ends with the specified value **




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.

// attribute title value With est end Of div The background color of the element is red " ?id=“b5”

$(“#b5”).click(function () {

??? $("div[title$ =‘est’]").css(“backgroundColor”,“red”);

});




**“=” Switch to “\*=”, Is the selector that contains the specified value in the specified property name **




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.

// attribute title value contain es Of div The background color of the element is red " ?id=“b6”

?$(“#b6”).click(function () {

???$(“div[title*=‘es’]”).css(“backgroundColor”,“red”);

?});




**3、 Composite property selector **

-------------



 grammar ：$(“A\[ Property name =’ value ’\]\[\]...”)



 effect ： A selector containing multiple attribute conditions 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Select attribute id Of div Elements , Then select the attribute in the result title Value contains “es” Of div The background color of the element is red " ?id=“b7”

$(“#b7”).click(function () {

?$(“div[id][title*=‘es’]”).css(“backgroundColor”,“red”);

});




** Four 、 Filter selector **

===========



**1、 First element selector **

------------



 grammar ：$(“A:first”)



 effect ： Get the first element of the selected element 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.

// Change the first div The background color of the element is Red " ?id=“b1”

$(“#b1”).click(function () {

???$(“div:first”).css(“backgroundColor”,“red”);

});




**2、 Tail element selector **

------------



 grammar ：$(“A:last”)



 effect ： Gets the last element of the selected element 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Change the last one div The background color of the element is Red " ?id=“b2”

$(“#b2”).click(function () {

???$(“div:last”).css(“backgroundColor”,“red”);

});




**3、 Non element selector **

------------



 grammar ：$(“not(selector)”)



 effect ： Does not include elements of the specified content 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// change class Not for one All of the div The background color of the element is Red " ?id="b3

$(“#b3”).click(function () {

???$(“div:not(.one)”).css(“backgroundColor”,“red”);

});




**4、 Even selector **

-----------



 grammar ：$(“A:even”)



 effect ： from 0 Start counting , Get the elements with even index in the selected elements 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Change the index value to even div The background color of the element is Red " ?id=“b4”

$(“#b4”).click(function () {

???$(“div:even”).css(“backgroundColor”,“red”);

});




**5、 Odd number selector **

-----------



 grammar ：$(“A:odd”)



 effect ： from 0 Start counting , Get the odd index of the selected elements 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Change the index value to an odd number div The background color of the element is Red " ?id=“b5”

$(“#b5”).click(function () {

???$(“div:odd”).css(“backgroundColor”,“red”);

});




**6、 Equal to index selector **

-------------



 grammar ：$(“A:eq(index)”)



 effect ： Gets the selected element with the specified index 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Change the index value to be equal to 3 Of div The background color of the element is Red " ?id=“b7”

$(“#b7”).click(function () {

???$(“div:eq(3)”).css(“backgroundColor”,“red”);

});




**7、 Greater than index selector **

-------------



 grammar ：$(“A:gt(index)”)



 effect ： Get the selected elements larger than the specified index 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Change the index value to be greater than 3 Of div The background color of the element is Red " ?id=“b6”

$(“#b6”).click(function () {

???$(“div:gt(3)”).css(“backgroundColor”,“red”);

});




**8、 Less than index selector **

-------------



 grammar ：$(“A:lt(index)”)



 effect ： Gets the selected elements that are smaller than the specified index 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Change the index value to less than 3 Of div The background color of the element is Red " ?id=“b8”

$(“#b8”).click(function () {

???$(“div:lt(3)”).css(“backgroundColor”,“red”);

});




**9、 Title selector **

-----------



 grammar ：$(“:header”)



 effect ： Get the title （h1~h6） Elements , For fixed writing 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// Change the background color of all title elements to Red " ?id=“b9”

$(“#b9”).click(function () {

???$(“:header”).css(“backgroundColor”,“red”);

});




** 5、 ... and 、 Form filter selector **

=============



**1、 Available element selectors **

-------------



 grammar ：$(“A:enabled”)



 effect ： Get the available elements in the selection elements 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.

// utilize jQuery Object's val() Method change available in form <input> The value of the element " ?id=“b1”

$(“#b1”).click(function () {

???$(“input[type=‘text’]:enabled”).val(“aaa”);

});




**2、 Element selector not available **

--------------



 grammar ：$(“A:disabled”)



 effect ： Get the unavailable elements in the selection elements 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// utilize jQuery Object's val() Method change form is not available <input> The value of the element " ?id=“b2”

$(“#b2”).click(function () {

???$(“input[type=‘text’]:disabled”).val(“bbb”);

});




**3、 Select the selector **

-----------



 grammar ：$(“A:checked”)



 effect ： Get a single choice / Check box selected elements 




     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.

// utilize jQuery Object's length Property gets the number of checkboxes selected " ?id=“b3”

$(“#b3”).click(function () {

???var lengths = $(“input[type=‘checkbox’]:checked”).length;

???alert(lengths);

});




**4、 Select the selector （ A drop-down box ）**

----------------



 grammar ：$(“A:selected”)



 effect ： Get the element selected in the drop-down box 




![](https://s2.51cto.com/images/20210823/1629693005904581.jpg)

 Recently, I collected dozens of Tencent according to the above technical system diagram 、 headlines 、 Ali 、 Meituan and other companies 21 Interview questions for , Put the technology points into a video （ In fact, it took a lot more energy than expected ）, Contains the context of knowledge  +  A lot of details , Due to limited space , Here is a part of it in the form of pictures 

[ Stamp here to get all the following information for free ](https://gitee.com/vip204888/java-p7)

![](https://s2.51cto.com/images/20210823/1629693005739837.jpg)


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.

copyright notice
author[No hair loss Xiaoyi],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827021135077e.html

current position：Home>[jQuery framework, Ali innovatively released the new high concurrency classic]

[jQuery framework, Ali innovatively released the new high concurrency classic]

The sidebar is recommended

guess what you like

Random recommended