Original blog: https://www.cnblogs.com/jokerjason/p/7404649.html
$ is just a symbol in JS, and it is nothing in JS.
However, the author of the JS application library JQUERY uses it as a custom function name. This function is a function to obtain the specified web page element, which is used very frequently, so many novices do not know it, and they think that $ is some special syntax of JS.
Later, some programmers may have used JQUERY a lot, and found that the $ function is very useful and convenient. Therefore, when JQUERY is not used, generally they will also customize a $ function.
which is:
function $ (Not) {
return document.getElementById(Nid);
}
It's as simple as that (it may be a little more powerful in JSQUERY, but it's mainly the function I wrote.)
In the future, you don't need to use document.getElementById("ID name") to get elements every time on the web page, just use $(' ID name') is enough, very simple.
Three specific usages:
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 jQuery object is constructed with a query expression such as "div>p", and then "html()" means to display its html content, which is the above HTML code snippet of [two]. 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(). A common form is this:
$(document).ready(function(){
alert("Hello world!");
});
Transformable:
$(function(){
alert("Hello world!");
});
For selecting elements in an HTML document, jQuery has two methods:
1) Such as $("div>ul a"), it means the a tag in the ul tag in the div tag
However, $('div>ul' ) and $('div ul') are different,
$('div>ul') is the direct descendant of <div> to find <ul>;
while $('div ul') is all the <div> Find <ul> in descendants.
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 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
such as: select all links with title attribute, we will write this: $('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 one more sibling node of <td>
, which is end(). This method must be used after a DOM node performs a certain action, and also wants to perform similar actions on its related nodes. Here we need to use 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().end()
Here the node that performs the action is find(...
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]
