Home > Web Front-end > JS Tutorial > Three use cases of $() in jQuery

Three use cases of $() in jQuery

php中世界最好的语言
Release: 2018-04-23 10:56:29
Original
1279 people have browsed it

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 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
, and the function click() is an (event) method of this jQuery object.
For example, there is such a piece of HTML code:

The operation of this HTML is the following statement:

$() 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:

$() contains 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, commonly used DOM objects include document, location, form, etc. Such as this line of code:

3. $() can be $(function), that is, a function, which is a shorthand for $(document).ready(). For example, the common form is like this:

Variable operation:

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') ,

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

    among the direct descendants of

    ; and $('p ul') is to find

      among all the descendants of

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

    • child nodes with the id "sId", even if the descendants of this
    • still have
    • 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
    • under
        , while the latter is to find the
          array whose descendants are
        • .
          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")
          Copy after login

          如:$('tr:not([th]):even')意为元素的子孙中不含的所有子孙的偶数项
          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>的所有兄弟节点
          Copy after login

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

          $(...).parent().find(...).addClass().end()
          Copy after login

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

          $(&#39;#myelement&#39;).get(0),也可缩写成$(&#39;#myelement&#39;)[0]
          Copy after login

          相信看了本文案例你已经掌握了方法,更多精彩请关注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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template