Home >Web Front-end >JS Tutorial >Three kinds of $()_jquery of jQuery

Three kinds of $()_jquery of jQuery

WBOYOriginal: 2016-05-16 18:37:421212browse

1. $() can be $(expression), which is a css selector, Xpath or html element, that is, the target element is matched through the above expression.
For example: the object constructed by $("a") uses a CSS selector to construct a jQuery object - it selects all tags. For example:
$("a").click(function(){...})
is an event triggered when any link on the page is clicked. To be precise, jQuery constructs an object $("a") using the tag , and the function click() is an (event) method of this jQuery object.

For example, there is this piece of HTML code:

Copy the code The code is as follows:

one

two

three
jQuery

而操作这段HTML的是如下一条语句：
alert($("div>p").html());

$()中的是一个查询表达式，也就是用“div>p”这样一个查询表达式构建了一个jQuery对象，然后的“html()”意思是显示其html内容，也就是上面HTML代码段的[two]。再如：
$("

Hello

").appendTo("body");
$() is a string. Use such a string to construct a jQuery object, and then add this string to .

2. $() can be $(element), which is a specific DOM element. For example, common 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, search for the

element with

in the full text, and display

3. $() can be $(function), which is a shorthand for $(document).ready(). The common form is like this:
$ (document).ready(function(){
alert("Hello world!");
});
Variable operation:
$(function(){
alert(" Hello world!");
});

For selecting elements in HTML documents, jQuery has two methods:
1) Such as $("div>ul a"), its 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

, while $('div ul') looks for

.

2) Use several methods of jQuery objects (such as methods find(), each(), etc.)
$("#orderedlist).find("li") like $( "#orderedlist li"). each() also iterates all li, and the "#" in the expression represents the ID in HTML. For example, "#orderedlist" in the above example means "the ID is the tag where orderedlist is located."

************************************************ **********************

1. Tag selector $('p'), class selector $('.myClass'), id The selector $('#myId') is relatively simple, not much to say. But there is one thing - there is a difference between $('div>ul') and $('div ul').
$('div>ul') is the direct descendant of

and you can find among all descendants of

.
So, $('#sId>li') selects all

child nodes with the id "sId". Even if the descendants of this

include

, it is not the one it selects. The scope of the search (the DOM object found is only the DOM object of its own level.). 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. ——not() here is a negation pseudo class.
What is returned here is a jQurey object, an array object, and the length of this jQuery object can be obtained with .length().
2. It is an attribute of the element; it is an attribute selector
There is no @ in [], indicating that [] is the descendant of the element.
Although $('ul li') and $('ul[li]') both return a jQuery array, their meanings are exactly the opposite. The former is to find all the descendants of

under

.
In XPath, if you want to find an attribute "starting with...", use ^=. If you want to 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 has no beginning or end, use *=

3. Selectors that do not belong to the above-mentioned CSS and XPath are custom selectors, 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")
For example: $('tr:not([th]):even') means the even-numbered items of all descendants of the element that do not include

4. There are a few more, which are simply not explained.
$('th').parent()——
$('td:contains("Henry")').prev()——The content contains " Henry"'s's previous node
$('td:contains("Henry")').next()——The content of "Henry"'s's previous node
$('td:contains("Henry")').siblings()——All sibling nodes of
whose content contains "Henry" It is used when a DOM node performs a certain action and wants to perform a similar action on its related nodes. End() is used here. 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()
The node that performs the action here is find(...), which is an array Object, the action it takes is "addClass()", and then end() is used. At this time, the returned stuff points to the node pointed to by parent(), that is, the "addClass()" action is performed. The parent node of that array object.

5. To access DOM elements directly, you can use the get(0) method, such as
$('#myelement').get(0), which can also be abbreviated to $('#myelement') [0]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript Get the full path of the form file_form effectsNext article：javascript Get the full path of the form file_form effects

See more

Three kinds of $()_jquery of jQuery

Related articles