Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the three types of $() in jQuery

php中世界最好的语言
Release: 2018-04-20 09:08:59
Original
2172 people have browsed it

This time I will bring you a detailed explanation of the use of jQuery's three $()s. What are the precautions for the use of jQuery's three $()s. 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:

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

The operation of this HTML is the following statement:

alert($("p>p").html());
Copy after login

$() is a query expression, that is, using " A query expression such as p>p" constructs 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");
Copy after login

$() 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. For example, this line of code: The document in

$(document).find("p>p").html());
Copy after login

$() is a DOM element, that is, it searches for the

element with

in the full text, and displays the content in

.
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!"); 
});
Copy after login

Deformable operation:

$(function(){ 
alert("Hello world!"); 
});
Copy after login

对于选择HTML文档中的elements,jQuery有两种方法:
1)如$("p>ul a"),它的意思是p标签中的ul标签中的a标签
不过,$('p>ul')和$('p ul')是有区别的,
$('p>ul')是

的直接后代里找


    而$('p ul')是在

    的所有后代里找


      2)用jQuery对象的几个方法(如方法find()、each()等)
      $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li,而表达式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”。
      ****************************************************************
      1、
      标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')相对简单,不多说。不过有一点——$('p>ul')和$('p ul')是有区别的,
      $('p>ul')是

      的直接后代里找

        ;而$('p ul')是在

        的所有后代里找


          所以,$('#sId>li')所选择的是id为"sId"的所有
        • 孩子节点,即使这个
        • 的后代还有
        • 也不是它所找的范围(所找到的DOM对象,只是它本级的DOM对象。)。而$('#sId li:not(.horizontal)'),就是指类名"sId"里面的所有li的子孙中没有horizontal类的所有元素。——这里的not()是一个negation pseudo class.
          这里返回的是一个jQurey对象,一个数组对象,这个jQuery对象的长度可用.length()得到。
          2、XPath选择器
          如:选择所有带有title 属性的链接,我们会这样写:$('a[@title]')
          []里带@,说明[]里的是元素的属性;是个属性选择器
          []里没@,说明[]里的是元素的子孙。
          $('ul li')和$('ul[li]')虽然返回的都是一个jQuery数组,但两者的含义正好相反。前者是要找
            下所有
          • 子孙,而后者却是在找所有子孙为
            • 数组。
              在XPath中,要找一个“以...开头”的属性,用^=,如找一个name属性是以mail开头的input元素,就用
              $('input[@name^="mail"]')
              要找一个“以...结尾”的属性,要用$=
              要找一个“不头不尾”的属性,用*=
              3、不属于上述的CSS和XPath的选择器,就是自定义的选择器了,用“:”表示,这里要用的就是:first,:last,:parent ,:hidden,:visible,:odd,:even,:not('xxx'), ":eq(0)"(始于0),:nth(n),:gt(0),:lt(0),:contains("xxx")
              如:$('tr:not([th]):even')意为元素的子孙中不含的所有子孙的偶数项
              4、还有几个,简单不解释了
              $('th').parent()——
              $('td:contains("Henry")').prev()——内容包含有"Henry"的的上一个节点
              $('td:contains("Henry")').next()——内容包含有"Henry"的的下一个节点
              $('td:contains("Henry")').siblings()——内容包含有"Henry"的的所有兄弟节点
              还有一个,就是end(),这个方法肯定是用在某个DOM节点执行了某一动作之后,还想在与其相关的节点上执行类似动作,这里就要用到end()。用过end()方法之后,所返回的是执行动作的那个节点的父节点上。举个例子
              $(...).parent().find(...).addClass().end()
              这里执行动作的节点是find(...),是一个数组对象,它所做的动作是“addClass()”,之后,用了个end(),这时所返回的东东就是指向了parent()所指向的节点,也就是执行“addClass()”动作的那个数组对象的父节点。
              5、要直接访问DOM元素,可用get(0)的方法,如
              $('#myelement').get(0),也可缩写成$('#myelement')[0]

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

              推荐阅读:

              HTML常用的属性知识点总结

              H5设计时的小技巧总结

              H5 C3 JS realizes floor jumping special effects

              The above is the detailed content of Detailed explanation of the three types 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