JQuery learning note Selector

Last Update:2018-12-08 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This chapter describes the Jquery selector and I am not sure to explain it, the purpose of this series of articles is to record my experiences in the learning process. On the one hand, I will strengthen my impression and share my learning experience, I hope you can provide more support ^. Which of the following methods are not good? Follow the instructions ^
Now, let's start flying in the JQuery world ^
First, this chapter describes how to use JQuery's most basic selector.
First declare and use the most basic JQuery rules
$ (Document). ready (function (){
// Do something
})
In this series of articles
$ (
Function (){
// Do something
}
)
The external JS file jquery-1.3.2.js used in the example is the most basic library file using JQuery, no one can download it here or go to my CSDN Resources
Okay. The following is the HTML file used for testing. For details, refer

Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css"> <! --
. Test {
Background: red ;}
--> </Style> <style type = "text/css" bogus = "1">. test {
Background: red ;}</style>
<Script src = "js/jquery-1.3.2.js"> </script>
<Script type = "text/javascript"> <! --
$ (
Function (){
Var result = $ ("# sResult ");
$ ("# AFirst"). click (function (){
Result.html ($ ("# oneP" ).html ());
})
$ ("# ASecond"). click (
Function (){
Result.html ("");
$ ("Form"). each (function (){
Result.html(result.html () + response (this).html ());
})
}
)
$ ("# AThird"). click (
Function (){
Result.html ("");
$ (". Test"). each (
Function (){
Result.html(result.html () + response (this).html ());
}
)
}
)
$ ("# AFourthly"). click (function (){
Result.html ($ ("*" example .html ());
})
}
)
// --> </Script>
<Title> untitled document </title>
</Head>

<Body>
<Form>
<P id = "oneP"> one </p> <div> <p> two </p> </div>
</Form>
<Form>
<P class = "test"> three </p>
</Form>
<A href = "#" id = "aFirst"> obtain the HTML content with the ID of "oneP". </a> |
<A href = "#" id = "aSecond"> obtain the HTML content of all Form elements </a> |
<A href = "#" id = "aThird"> obtain the HTML content of the CSS style test. </a> |
<A href = "#" id = "aFourthly"> obtain all HTML content on the page </a> <br/>
Result:
<Div style = "border-bottom-color: #000; border: 1px solid">
<Span id = "sResult"> </span>
</Div>
</Body>
</Html>

This chapter describes the functions of the four connection elements aFirst, aSecond, aThird, and aFourthly.
First, explain the content of the non-attribute selector in the code.
1.element.html (string content)
This method is also a common function.
If this method does not contain parameters, it is used to read the pure HTML content of the current element. If the parameter is used, the HTML content of the element is modified, this should be easy to understand ^
2. each ()
Returns the content of each form.
Let's talk about this in a simple way outside of class. Now let's talk about the subject.
1. $ ("# ID ")
Description: This method is used to obtain the Element based on the Element ID. People who have learned javascript can easily understand this meaning, which is equivalent to document. getElementById ("ID") in JS ");
In this example, you can use this method to obtain the oneP element and display its HTML content.
Returned value: Element
2. $ ("TagName ")
Description: This method is used to obtain a set of elements, which is equivalent to document. getElementsTagName ("TagName") in JS. For example, this method obtains all the Form element sets.
Returned value: Array (Element );
3. $ (". className ")
Description: This method is used to obtain an element set that uses a style. For example, you can obtain an element set whose style is test.
Returned value: Array (Element );
4. $ ("*")
Description: used to retrieve all the HTML on the page. Currently, I don't know what practical functions are available.
Returned value: Array (Element );
5. $ ("# ID, TagName,. className,... N ")
Description: This method is used to combine the first four selectors and separate them with "," to return an element set. There is no example above. I will explain it here, for example, to obtain the elements whose ID is oneP, DIV element, and style is test, you can use $ ("# oneP, div ,. test ").
Returned value: Array (Element );

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JQuery learning note Selector

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support