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

<script type=“text/javascript”>

???$(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 ?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 () {

??? ( " d i v [ t i t l e ("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

Random recommended