Home > Developer > Web Develop
We have learned about HTML, CSS, and JavaScript through previous studies; this time we will learn the advanced knowledge Together: jquery~
First, what is jquery?jquery is actually a lightweight JavaScript function library, through which we can "write less do more";
The jquery library contains the following features:
jquery is currently divided into 1.x 2.x and 3.x versions, here we take the 1.12 version for example;
Chinese document Link:http://jquery.cuishifeng.cn/
1. Preparatory work1. Download 1.12.4 online, link to network:HTTPS://PAN.BAIDU.COM/S/1HSIFUMW Password: BFMW
2. Put the JS file in the sibling directory and import JS:
2. Find Elements<javascript src= "Jquery-1.12.4.js" ></javascript> #需要下载jquery <script src= "/http/ Libs.baidu.com/jquery/1.11.1/jquery.min.js "></script>
2.1 Selector
2.1.1 #id选择器The ID is unique and can be used to find the element by #id;
Instance:
1) Create a new HTML file with the following code:
<! DOCTYPE html>2) Open the HTML file in Google Chrome, F12 switch to console and enter the following code:
$ (' #i1 ');
Effect:
2.1.2. class selectorThe JQuery class selector can find elements through the specified class.
The syntax is as follows:
$ (". C1")Instance:
1) Add a line to the above HTML file:
<div class= "C1" ><span> I am c1</span></div>2) Open the HTML file in Google Chrome, F12 switch to console and enter the following code:
$ ('. C1 ');The effect is as follows:
2.1.3 Tag SelectorOf course, we can also directly find the specified label;
Take the above HTML file as an example to find a tag:
2.1.4 Combo Selector$ (' a ');The above method can also be used in combination;
Instance:
1) Add HTML file:
<! DOCTYPE html>2) Combination Search:
$ (' #i1, A,.c1 ');The effect is as follows:
2.1.5-level selectorTo create a new HTML file:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Title</title>6 </Head>7 <Body>8 <Div>9 <DivID= "I1">Ten <a>I'm A1.</a> One <Div> A <a>Label A2 Find</a> - <a>Label A3 Find</a> - </Div> the </Div> - <DivID= "I2"> - <a>Label a Find</a> - </Div> + <Divclass= "C1"> - <span>I'm C1.</span> + </Div> A </Div> at <Scriptsrc= "Jquery-1.12.4.js"></Script> - </Body> - </HTML>View CodeDescendant Selector
$ (' #i1 a ');The results are as follows:
Sub-selectors:
$ (' #i1 >a ');The results are as follows:
2.1.6 Property SelectorThese are basically enough to meet our common needs, but what if I add two more sentences to the HTML file? Please help find the object in your code that contains cc:
<div cc> I'm cc</div><div cc= "Boy" > I'm boy</div>At this point, jquery introduces a property selector:
$ (' [CC] ');To query the specified property value:
2.1.7 Basic Filter$ (' [cc= ' Boy '] ');$ (' A:first '). Text (); Finds the first element in a label that meets the criteria $ (' a:last '). Text (); Finds the last element in a label that meets the criteria $ (' a:eq (0) '). text (); Find the element with the label 0 (' A:eq (1) ') that matches the criteria in the a tag. text (); Find the element with the label 1 (' A:eq (2) ') that matches the criteria in the a tag. text (); Find the element with the label 2 (' A:eq (3) ') that matches the criteria in the a tag. text (); Find the element labeled 3 in a label that meets the criteria2.1.8 Other
$ ("input[type= ' text ')" #查找input标签中type =text $ (': Text ') #查找text元素 $ (': Enabled ') $ (':d isabled ') $ (':: Checked ') $ (': : Selected ')Summarize:
In combination with the above, let's implement an example of selecting and canceling all of them:
<! DOCTYPE html>2.2 Filtering
A filter is a further selection of the jquery object selected by the selector.
2.2.1 NextGets the next sibling element of the specified element
2.2.2 Nextall$ (". P2"). Next ();Get all the sibling elements behind
2.2.3 Nextuntil$ (". P2"). Nextall ();Gets the element that follows until the argument can match, excluding the end condition.
2.2.4 Prev$ (". P2"). Nextuntil ('. P4 ');Gets the previous sibling element of the specified element
2.2.5 Prevall$ (". P3"). Prev ();Gets all the sibling elements in front of the specified element
Web front-End Basics JQuery
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
