Three use cases of $() in jQuery

This time I will bring you three use cases of jQuery's three $(). What are the precautions when using jQuery's three $(). The following is a practical case, let's take a look.

$ is an alias for jQuery "class", and $() constructs a jQuery object. Therefore, "$()" can be called jQuery's constructor (personal opinion, haha!).

1. $() can be $(expresion), that is, 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 the 7d01d0a03a49fceb57d12197d8d196cb tags. For example:
$("a").click(function(){...})
is the trigger event when any link on the page is clicked. To be precise, jQuery constructs an object $("a") using the tag 7d01d0a03a49fceb57d12197d8d196cb, and the function click() is an (event) method of this jQuery object.
For example, there is such a piece of HTML code:

<p>one</p> 
<p> 
<p>two</p> 
</p> 
<p>three</p> 
<a href="#" id="test" onClick="jq()" >jQuery</a>

The operation of this HTML is the following statement:

alert($("p>p").html());

$() is a query expression, also It uses a query expression such as "p>p" to construct a jQuery object, and then "html()" means to display its html content, which is the [two] of the above HTML code snippet. Another example:

$("<p><p>Hello</p></p>").appendTo("body");

$() contains a string. Use such a string to construct a jQuery object, and then add this string to b2636b4e0e32f7cd731b9073897693b7.
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("p>p").html()); 
$()中的document是一个DOM元素，即在全文寻找带<p>的<p>元素，并显示<p>中的内容。

3. $() can be $(function), that is, a function, which is a shorthand for $(document).ready(). For example, 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 $("p>ul a"), which means the a tag in the ul tag in the p tag
However, there is a difference between $('p>ul') and $('p ul') ,

$(&#39;p>ul&#39;)是<p>的直接后代里找<ul>； 
而$(&#39;p ul&#39;)是在<p>的所有后代里找<ul>。

2) Use several methods of the jQuery object (such as methods find(), each(), etc.)
$("#orderedlist).find("li") Just Like $("#orderedlist li").each() iterates all li, and the "#" in the expression represents the ID in HTML. For example, "#orderedlist" in the above example means "the ID is where orderedlist is located" Label".
******************************************** **********************
1, tag selector$('p'), class selector $('.myClass') and id selector $('#myId') are relatively simple, not much to say, but there is one difference - there is a difference between $('p>ul') and $('p ul'). ,
$('p>ul') is to find ff6d136ddc5fdfeffaf53ff6ee95f185 among the direct descendants of e388a4556c0f65e1904146cc1a846bee; and $('p ul') is to find ff6d136ddc5fdfeffaf53ff6ee95f185 among all the descendants of e388a4556c0f65e1904146cc1a846bee .
So, $('#sId>li') selects all 25edfb22a4f469ecb59f1190150159c6 child nodes with the id "sId", even if the descendants of this 25edfb22a4f469ecb59f1190150159c6 still have 25edfb22a4f469ecb59f1190150159c6 The range found (the DOM object found is only the DOM object of its own level.). And $('#sId li:not(.horizontal)') refers to all the descendants of li in the class name "sId". There are no 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. attribute; it is a
attribute selector
There is no @ in [], indicating that [] is the descendant of the element $('ul li') and $('ul[li]. ')Although both return a jQuery array, the meanings of the two are exactly the opposite. The former is to find all the descendants of 25edfb22a4f469ecb59f1190150159c6 under ff6d136ddc5fdfeffaf53ff6ee95f185, while the latter is to find the ff6d136ddc5fdfeffaf53ff6ee95f185 array whose descendants are 25edfb22a4f469ecb59f1190150159c6.
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 "ending with...", use $=
To find an attribute "without beginning or end", use *=
3, Selectors that do not belong to the above-mentioned CSS and XPath are custom selectors, represented by ":". What is used here is:

first，:last，:parent ，:hidden，:visible，:odd，:even，:not('xxx')， ":eq(0)"（始于0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx")

如：$('tr:not([th]):even')意为a34de1251f0d9fe1e645927f19a896e8元素的子孙中不含b4d429308760b6c2d20d6300079ed38e的所有子孙的偶数项
4、还有几个，简单不解释了

$('th').parent()—— 
$(&#39;td:contains("Henry")&#39;).prev()——内容包含有"Henry"的<td>的上一个节点 
$(&#39;td:contains("Henry")&#39;).next()——内容包含有"Henry"的<td>的下一个节点 
$(&#39;td:contains("Henry")&#39;).siblings()——内容包含有"Henry"的<td>的所有兄弟节点

还有一个，就是end()，这个方法肯定是用在某个DOM节点执行了某一动作之后，还想在与其相关的节点上执行类似动作，这里就要用到end()。用过end()方法之后，所返回的是执行动作的那个节点的父节点上。举个例子

$(...).parent().find(...).addClass().end()

这里执行动作的节点是find(...)，是一个数组对象，它所做的动作是“addClass()”，之后，用了个end()，这时所返回的东东就是指向了parent()所指向的节点，也就是执行“addClass()”动作的那个数组对象的父节点。
5、要直接访问DOM元素，可用get(0)的方法，如

$('#myelement').get(0)，也可缩写成$('#myelement')[0]

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

js仿jquery步骤详解

JS中时间单位比较的方法

The above is the detailed content of Three use cases of $() in jQuery. For more information, please follow other related articles on the PHP Chinese website!