The $ sign is another name for a jQuery "class", and $() constructs a jQuery object. So, "$()" can be called jQuery's constructor (personal opinion, huh!).
1. $() can be $(expresion), that is, css selector, Xpath or html element, that is, the target element is matched by the above expression.
For example, the object constructed by $("a") is a jQuery object constructed with CSS selectors - it selects all the <a/> tags. For example:
$("a").click(function(){...})
is the trigger event when any link on the page is clicked. To be precise, jQuery uses the <a/> tag to construct an object $("a"), and the function click() is an (event) method of this jQuery object.
For example, there is a piece of HTML code like this:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
The operation of this HTML is the following statement:
alert($("div>p").html());
$() is a query expression, that is, a query expression such as "div>p" A jQuery object is constructed by the formula, and then "html()" means to display its html content, which is the [two] of the above HTML code snippet. Another example:
$("<div><p>Hello</p></div>").appendTo("body");
$() is a string, and a jQuery object is constructed with such a string , then add this string to <body/>.
2. $() can be $(element), which is a specific DOM element. For example, commonly used DOM objects include document, location, form, etc. Such as this line of code:
$(document).find("div>p").html());
The document in $() is a DOM element, that is to find the <div> element with <p> in the full text, and Display the content in <p>.
3. $() can be $(function), that is, a function, which is a shorthand for $(document).ready(). For example, the common form is this:
$(document).ready(function(){
alert("Hello world!");
});
can be transformed into:
$(function(){
alert("
1) Such as $("div>ul a"), it means the a tag in the ul tag in the div tag
However , there is a difference between $('div>ul') and $('div ul'),
$('div>ul') looks for <ul> in the immediate descendants of <div>;
$('div ul') looks for <ul> in all descendants of <div>.
2) Use several methods of jQuery object (such as methods find(), each(), etc.)
$("#orderedlist).find("li") Iterate like $("#orderedlist li").each() All the li, and the "#" in the expression represents the ID in HTML, such as "#orderedlist" in the above example, it means "the ID is the tag where the orderedlist is located".
************ **************************************************** **
1. Tag selector $('p'), class selector $('.myClass'), id selector $('#myId') are relatively simple, not much to say. But there is one point - $(' div>ul') and $('div ul') are different,
$('div>ul') is the direct descendant of <div> to find <ul>; while $('div ul') is found in < Find <ul> in all descendants of div>.
Therefore, $('#sId>li') selects all <li> child nodes whose id is "sId", even if the descendants of this <li> and <li> are not the range it is looking for (the found DOM object, just its own level DOM object.). And $('#sId li:not(.horizontal)') means that all the descendants of li in the class name "sId" do not have all the elements of the horizontal class. - The not() here is a negation pseudo class.
What is returned here is a jQuery object, an array object, and the length of this jQuery object can be obtained by .length().
2. XPath selector
For example : to select all links with the title attribute, we will write: $('a[@title]')
[] with @, indicating that [] is the attribute of the element; it is an attribute selector
There is no @ in [], indicating that the elements in [] are descendants of the element.
Although $('ul li') and $('ul[li]') both return a jQuery array, the meanings of the two are just the opposite. The former is to find all descendants of <li> under <ul>, while the latter is to find all <ul> arrays whose descendants are <li>.
In XPath, to find an attribute "starting with ...", use ^=, if you find an input element whose name attribute starts with mail, use
$('input[@name^="mail"]' )
To find an attribute that "ends with...", use $= To
find an attribute that does not start or end, use *=
3. The selectors that do not belong to the above CSS and XPath are custom selectors, which are represented by ":". The ones used here are :first, :last, :parent, :hidden, :visible, :odd, :even, :not('xxx'), ":eq(0)" (starts at 0), :nth(n), :gt(0), :lt(0), :contains("xxx")
such as : $('tr:not([th]):even') means that the descendants of the <tr> element do not contain the even-numbered items of all descendants of <th>
4, there are a few more, simply do not explain
$(' th').parent()——
$('td:contains("Henry")').prev()——The previous node of <td> containing "Henry"
$('td:contains(" Henry")').next() - the next node of the <td> containing "Henry"
$('td:contains("Henry")').siblings() - containing "Henry"
There is another , which is end(). This method must be used after a certain DOM node performs a certain action, and if you want to perform a similar action on its related nodes, you need to use it here. to end(). After using the end() method, what is returned is the parent node of the node that performs the action. For example
$(...).parent().find(...).addClass().
5. To directly access DOM elements, you can use the get(0) method, such as
$('#myelement').get(0), which can also be abbreviated as $('#myelement')[0]
For example, the object constructed by $("a") is a jQuery object constructed with CSS selectors - it selects all the <a/> tags. For example:
$("a").click(function(){...})
is the trigger event when any link on the page is clicked. To be precise, jQuery uses the <a/> tag to construct an object $("a"), and the function click() is an (event) method of this jQuery object.
For example, there is a piece of HTML code like this:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
The operation of this HTML is the following statement:
alert($("div>p").html());
$() is a query expression, that is, a query expression such as "div>p" A jQuery object is constructed by the formula, and then "html()" means to display its html content, which is the [two] of the above HTML code snippet. Another example:
$("<div><p>Hello</p></div>").appendTo("body");
$() is a string, and a jQuery object is constructed with such a string , then add this string to <body/>.
2. $() can be $(element), which is a specific DOM element. For example, commonly used DOM objects include document, location, form, etc. Such as this line of code:
$(document).find("div>p").html());
The document in $() is a DOM element, that is to find the <div> element with <p> in the full text, and Display the content in <p>.
3. $() can be $(function), that is, a function, which is a shorthand for $(document).ready(). For example, the common form is this:
$(document).ready(function(){
alert("Hello world!");
});
can be transformed into:
$(function(){
alert("
1) Such as $("div>ul a"), it means the a tag in the ul tag in the div tag
However , there is a difference between $('div>ul') and $('div ul'),
$('div>ul') looks for <ul> in the immediate descendants of <div>;
$('div ul') looks for <ul> in all descendants of <div>.
2) Use several methods of jQuery object (such as methods find(), each(), etc.)
$("#orderedlist).find("li") Iterate like $("#orderedlist li").each() All the li, and the "#" in the expression represents the ID in HTML, such as "#orderedlist" in the above example, it means "the ID is the tag where the orderedlist is located".
************ **************************************************** **
1. Tag selector $('p'), class selector $('.myClass'), id selector $('#myId') are relatively simple, not much to say. But there is one point - $(' div>ul') and $('div ul') are different,
$('div>ul') is the direct descendant of <div> to find <ul>; while $('div ul') is found in < Find <ul> in all descendants of div>.
Therefore, $('#sId>li') selects all <li> child nodes whose id is "sId", even if the descendants of this <li> and <li> are not the range it is looking for (the found DOM object, just its own level DOM object.). And $('#sId li:not(.horizontal)') means that all the descendants of li in the class name "sId" do not have all the elements of the horizontal class. - The not() here is a negation pseudo class.
What is returned here is a jQuery object, an array object, and the length of this jQuery object can be obtained by .length().
2. XPath selector
For example : to select all links with the title attribute, we will write: $('a[@title]')
[] with @, indicating that [] is the attribute of the element; it is an attribute selector
There is no @ in [], indicating that the elements in [] are descendants of the element.
Although $('ul li') and $('ul[li]') both return a jQuery array, the meanings of the two are just the opposite. The former is to find all descendants of <li> under <ul>, while the latter is to find all <ul> arrays whose descendants are <li>.
In XPath, to find an attribute "starting with ...", use ^=, if you find an input element whose name attribute starts with mail, use
$('input[@name^="mail"]' )
To find an attribute that "ends with...", use $= To
find an attribute that does not start or end, use *=
3. The selectors that do not belong to the above CSS and XPath are custom selectors, which are represented by ":". The ones used here are :first, :last, :parent, :hidden, :visible, :odd, :even, :not('xxx'), ":eq(0)" (starts at 0), :nth(n), :gt(0), :lt(0), :contains("xxx")
such as : $('tr:not([th]):even') means that the descendants of the <tr> element do not contain the even-numbered items of all descendants of <th>
4, there are a few more, simply do not explain
$(' th').parent()——
$('td:contains("Henry")').prev()——The previous node of <td> containing "Henry"
$('td:contains(" Henry")').next() - the next node of the <td> containing "Henry"
$('td:contains("Henry")').siblings() - containing "Henry"
There is another , which is end(). This method must be used after a certain DOM node performs a certain action, and if you want to perform a similar action on its related nodes, you need to use it here. to end(). After using the end() method, what is returned is the parent node of the node that performs the action. For example
$(...).parent().find(...).addClass().
5. To directly access DOM elements, you can use the get(0) method, such as
$('#myelement').get(0), which can also be abbreviated as $('#myelement')[0]