1, $ () can be $ (expresion), the CSS selector, XPath, or HTML element, that is, the expression to match the target element.
For example: The object constructed by $ ("a") is a jquery object built with a CSS selector-it selects all the <a/> tags. Such as:
$ ("a"). Click (function () {...})
Is the trigger event when clicking on any link on the page. Specifically, 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 section of HTML code:
Copy Code code as follows:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href= "#" id= "test" onclick= "JQ ()" >jQuery</a>
And the operation of this HTML is the following statement:
Alert ($ ("div>p"). html ());
$ () is a query expression that uses a query expression such as "div>p" to build a jquery object, and then "HTML ()" means to display its HTML content, which is [two] of the HTML snippet above. Another example:
$ ("<div><p>Hello</p></div>"). Appendto ("body");
$ () is a string that constructs the jquery object with such a sequence of strings, and then adds the string to the <body/>.
2, $ () can be $ (element), that is, a specific DOM element. such as common DOM objects have document, location, form and so on. such as a line of code:
$ (document). Find ("Div>p"). html ());
The document in the $ () is a DOM element that looks for the <div> element with <p> in the full text and displays the contents of <p>.
3, $ () can be $ (function), that is, a functions, which is $ (document). Ready () a shorthand method. As is the case in common form:
$ (document). Ready (function () {
Alert ("Hello world!");
});
Can be deformed as:
$ (function () {
Alert ("Hello world!");
});
There are two ways to select Elements,jquery in an HTML document:
1) such as $ ("Div>ul a"), it means the div tag in the UL tag in the A tag
However, $ (' Div>ul ') and $ (' div ul ') are different,
$ (' Div>ul ') is a direct descendant of <div> to find <ul>;
and $ (' div ul ') is to find <ul> in all descendants of <div>.
2 The JQuery object with several methods (such as method find (), each (), etc.)
$ ("#orderedlist"). Find ("Li") is like $ ("#orderedlist Li"). Each () Iterates over all Li, while "#" in the expression represents the ID in the HTML, as in the example above, "#orderedlist" means "label with ID orderedlist".
****************************************************************
1, Tag Selector $ (' P '), class selector $ ('. MyClass '), ID selector $ (' #myId ') is relatively simple, not to say more. But there is a point--$ (' Div>ul ') and $ (' div ul ') are different,
$ (' Div>ul ') is a direct descendant of <div> find <ul>; and $ (' div ul ') is in <div> all descendants find <ul>.
Therefore, $ (' #sId >li ') selects all <li> children with id "sId", even though the descendants of <li> and <li> are not the scope of the search (the DOM object found, it is the DOM object at this level.) ）。 and $ (' #sId li:not (. Horizontal) ') means all the elements of all Li's descendants in the class name "SId" that have no horizontal class. --Here's not () is a negation pseudo class.
This returns a Jqurey object, an array object, and the length of the jquery object is available. Length () is obtained.
2. XPath Selector
For example: Select All links with the title attribute, we will write: $ (' a[@title] ')
[] The attribute of the element is in []; it's a property selector.
[] There is no @, the description [] is the descendants of the elements.
$ (' ul Li ') and $ (' ul[li] ') return a jquery array, but the opposite is true. The former is to find <ul> all <li> descendants, the latter is looking for all the descendants of <li> <ul> array.
In XPath, find a "to ... Start with ^=, such as finding a Name property that is an INPUT element that starts with mail, uses the
$ (' input[@name ^= ' mail] ')
To find a "to ... End "attribute, to use the $=
To find a "*=" attribute, with the
3, does not belong to the above CSS and XPath selector, is a custom selector, with ":" said, here to use is: First,:last,:p arent,: hidden,:visible,:odd,:even,:not (' xxx '), ": EQ (0) "(starting at 0),: Nth (n),: GT (0),: LT (0),: Contains (" XXX ")
For example: $ (' Tr:not ([th]): Even ') means the even-numbered term of all descendants of the <tr> element that do not contain <th>
4, there are a few, simple do not explain
$ (' th '). Parent ()--
$ (' Td:contains (' Henry ') '). Prev ()--content contains the last node of <td> of "Henry"
$ (' Td:contains (' Henry ') '). Next ()--content contains the next node of <td> for "Henry"
$ (' Td:contains (' Henry ') '). Siblings ()--all sibling nodes with "Henry" <td> content
There is another, that is, end (), this method must be used after a DOM node to perform an action, but also want to perform a similar action on the node associated with it, this is the use of this point (). After the end () method is used, the returned is on the parent node of the node that executes the action. As an example
$(...). Parent (). Find (...). AddClass (). End ()
The node that executes the action here is find (...). is an array object, it does the action is "addclass ()", and then, with an end (), then the returned east is pointed to the parent () point to the node, that is, execute "addclass ()" The parent node of the array object for the action.
5, to directly access the DOM element, you can use the method of Get (0), such as
$ (' #myelement '). Get (0) can also be reduced to $ (' #myelement ') [0]
