Article From:https://www.cnblogs.com/insane-Mr-Li/p/9219277.html

1. Three kinds of $() of jQuery

$The number is a nickname for the jQuery class. $() constructs a jQuery object. So, “$(“) can be called the constructor of jQuery.

 

1、$()It can be $(expresion), that is, CSS selector, Xpath or HTML element, that is, match the target element by the above expression.

For example, the object constructed by $(a) constructs a jQuery object with the CSS selector – it selects all < a/> this tag. Such as:
$(“a”).click(funcTIon(){…})
It is the trigger event when clicking any link on the page. To be exact, jQuery uses < a/> this tag constructs an object $(“a”), and function click () is an event method of this jQuery object.

For example, there is such a HTML Code:

 


And this section of the HTML is the following statement:

alert($(“div>p”).html());
 
$()In a query expression, a query expression such as “div> P” constructs a jQuery object, and then “HTML (“) “means to display its HTML content, that is, the [two] of the HTML code section above. Again as follows:

$(“<div><p>Hello</p></div>”).appendTo(“body”);
$()It is a string in which a jQuery object is constructed with such a string, and then the string is added to < body/&gt.
 

2、$()It can be $(element), that is, a specific DOM element. For example, the commonly used DOM objects are document, locaTIon, form and so on. Such a line of code:


$(document).find(“div>p”).html());

$()Document is a DOM element, that is, in the full text, it looks for &lt, div&gt, elements, and &lt, p&gt, and &lt with < p&gt.
3、$()It can be $(funcTIon), that is, a function, which is a shorthand way of $(document).Ready (). The common form is this:
$(document).ready(funcTIon(){
alert(“Hello world!”);
});
Deformable as:
$(function(){
alert(“Hello world!”);
});
 

Form:

 

$(document).ready(function(){ // Your code});

 

$(document)That means getting the entire web document object (similar to window.document).

 

$(document).readyThat means getting the document object ready.

 

 

aboutThere are two ways to select elements and jQuery in HTML documents:

1)Such as $(“div> UL a”), it means the a tag in the UL tag of the div tag.


However, there is a difference between $(‘div> ul’) and $(‘div ul’).

 
$(‘div>ul’)It is < div> the direct descendants find < ul>
And $(‘div ul’) is &lt, ul&gt in all descendants of < div&gt.
 

2)Several ways to use jQuery objects (such as method find (), each (), etc.)


$(“#orderedlist).find(“li”) Like the $(“#orderedlist Li”). Each (), all Li is iterated, and the expression in the ID in HTML, such as the “#orderedlist” in the last example, means “ID is orderedlist.”In the label “.”

 
****************************************************************
 
1、Tag selector $(‘p’), class selector $(‘.myClass’), ID selector $(‘#myId’) are relatively simple, not to mention. But there is one point — $(‘div> ul’) and $(‘div ul’) are different.
$(‘div>ul’)It is &lt, div> direct descendants seeking < ul> and (‘div ul’) is &lt, ul&gt in all descendants of < div>
So, $(‘#sId> li’) chooses all &lt of ID as “sId”; li> child node, even if the < li> li> li> not the scope it finds (the DOM object that is found, only)The DOM object at its original level. And $(‘#sId li:not (.Horizontal) ‘) means that all descendants of Li in the class name “sId” do not have all the elements of horizontal class. – not () here is a negaTion pseudo class.
Here is a jQurey object, an array object, and the length of the jQuery object can be obtained by.Length ().

2、XPathselector
For example, select all links with title attribute, and we will write this way: $(‘a[@title]’).
[]Inner band @, which is the property of the element, and is an attribute selector.
[]There is no @, indicating that [] is the descendant of the element.
$(‘ul li’)And $(‘ul[li]’), though all of them return to a jQuery array, the meaning of the two is the opposite. The former is to find < ul> all < li> descendants; the latter is looking for all descendants as < li> < u.L> array.
In XPath, you need to find an attribute with “beginning with”, use ^ = if, for example, find a name attribute that is input element starting with mail, use it.
$(‘input[@name^=”mail”]’)
To find an attribute to “end with…”, use $=
To find a “no end” property, use * =
 
3、The CSS and XPath selectors that do not belong to the above are the custom selectors, and use “:” to say, first,: last, parent, hidden, visible, odd, even, not (hidden).’xxx’), “EQ (0)” (starting from 0): nth (n), GT (0), LT (0), contains (“XXX”).
Such as: $(‘tr:not ([th]): even’) means < tr> the offspring of the element do not contain even numbers of all descendants of < th&gt.
 
4、There are a few more, simply not to explain

$(‘th’).parent()——
$(‘td:contains(“Henry”)’).prev()——The content contains the last node of “Henry” < td&gt.
$(‘td:contains(“Henry”)’).next()——The content contains the next node of “Henry” < td&gt.
$(‘td:contains(“Henry”)’).siblings()——The contents contain all brother nodes of “Henry” < td&gt.
Another one is end (), which is definitely used after a certain DOM node performs a certain action and wants to perform a similar action on a node associated with it, which uses end (). After the end () method is used, it returns the parent node of the node that performs the action.. For instance
$(…).parent().find(…).addClass().end()
The node that executes the action here is find (…), an array object that does the action of “addClass ()”, and then uses a end (), and the return to the East is pointing to the node pointing to parent (), that is, to execute “addCla”.SS () “the parent of the array object that moves.
 
5、To access DOM elements directly, you can use get (0) method, such as
$(‘#myelement’).get(0),It can also be constriction as $(‘#myelement’) [0]
 

The role of the $symbol in two and jQuery

1、As a jQuery wrapper, the selector is used to select the DOM element (this is also the most powerful function).


For example, $(“table tr:nth-child (even)”)

2、Utility function as a prefix for several common utility function namespaces.


For example: $.trim (someString)

3、The document ready processing program is equivalent to $(document).Ready (…).


For example, $(function () {…}) the function inside will be executed after the DOM tree is loaded.

4、Create the DOM element


For example, $(“< p> how are you? < /p>”)

5、Extended jQuery


For example, $.fn.disable = function () {…}

6、Use jQuery and other libraries

For example, the Prototype library also uses the $symbol, and jQuery provides noConflict functions to avoid collisions, jQuery.noConflict (); restore the $symbol to the meaning of the non jQuery library definition.
 Turn from:jqueryWhat is the value of $() and the role of $symbol?

This learning network is very detailed: jQuery tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *