Detailed explanation of the three types of $() in jQuery
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>
The operation of this HTML is the following statement:
alert($("p>p").html());
$() 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");
$() 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());
$() 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!"); });
Deformable operation:
$(function(){ alert("Hello world!"); });
对于选择HTML文档中的elements,jQuery有两种方法:
1)如$("p>ul a"),它的意思是p标签中的ul标签中的a标签
不过,$('p>ul')和$('p ul')是有区别的,
$('p>ul')是
的直接后代里找
- ;
- 孩子节点,即使这个
- 的后代还有
- 也不是它所找的范围(所找到的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中文网其它相关文章!
推荐阅读:
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!
Statement of this WebsiteThe 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.cnHot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution4 weeks ago By DDDWhat's New in Windows 11 KB5054979 & How to Fix Update Issues3 weeks ago By DDDWhere to find the Crane Control Keycard in Atomfall4 weeks ago By DDDRoblox: Dead Rails - How To Complete Every Challenge1 months ago By DDDHow to fix KB5055523 fails to install in Windows 11?2 weeks ago By DDDHot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM
Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL
How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
Detailed explanation of the role and usage of PHP modulo operator Mar 19, 2024 pm 04:33 PM
The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus
jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM
jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s
How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM
How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute
而$('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"的所有