Home > Web Front-end > JS Tutorial > How to use jquery selector? Instructions on the use of selector

How to use jquery selector? Instructions on the use of selector

伊谢尔伦
Release: 2017-06-16 13:21:02
Original
2594 people have browsed it

This function receives a string containing a CSS selector, and then uses this string to match a set of elements.

The core functions of jQuery are implemented through this function. Everything in jQuery is based on this function, or uses this function in some way. The most basic use of this function is to pass it an expression (usually composed of a CSS selector) and then find all matching elements based on this expression.

By default, if the context parameter is not specified, $() will search for DOM elements in the current HTML document; if the context parameter is specified, such as a DOM element set or jQuery object, it will be in this Search in context. After jQuery 1.3.2, the order of the elements returned is equivalent to the order in which they appear in the context.

selector: Attribute is used to return the original selector (that is, the selector parameter) passed to the jQuery(selector, context) function when obtaining the current jQuery object. In other words, whatever selector you use to obtain the current jQuery object, the selector property of the current jQuery object returns whatever it is.

Syntax: jQueryObject.selector

Return value: The return value of the selector attribute is of String type, returning the original selector of the jQuery object. If the current jQuery object is not obtained by passing in a selector string, the empty string "" will be returned.

Parameters

selector,[context]String,Element,/jQueryV1.0

selector: the string used to find

context: as the to-be-used The set of DOM elements, documents, or jQuery objects to find.

elementElementV1.0

A DOM element used to encapsulate a jQuery object

objectobjectV1.0

A DOM element used to encapsulate a jQuery object

elementArrayElementV1.0

A DOM element array used to encapsulate a jQuery object.

jQuery objectobjectV1.0

A jQuery object for cloning.

jQuery()V1.4

Returns an empty jQuery object.

Code example:

First we give the following HTML code:

<p id="parent" class="parent">
<p class="child">
 child1
</p>
<p class="child">
child2
</p>
</p>
<p id="parent1" class="parent">
<p class="child">
 child1
</p>
<p class="child">
child2
</p>
</p>
Copy after login

Calling method 1: The second parameter context is the DOM element

var doms=$(".child",$("#parent")[0]);  
console.log(doms);
Copy after login

At this time the second parameter is the DOM object, print [p. child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector: ".child"]
Calling method 2: The second parameter context is the jquery object

var doms=$(".child",$($("#parent")[0]));  
console.log(doms);
Copy after login

The printing result at this time is the same as the first case above, [p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent, selector : ".child"]
Calling method 3: The second parameter is a DOM array

var doms=$(".child",[document.getElementById("#parent"),document.getElementById("#parent1")])   
console.log(doms);
Copy after login

Calling method 4: The second parameter is a jQuery object array

var doms=$(".child",$(".parent"))   
console.log(doms);
Copy after login

The result of this method is exactly the same as the third method!
Calling method 5: The parameter passed in is a function, which will be called when the ready function is called

$(function()  
 {  
   console.log("dom ready");  
 })
Copy after login

The above is the detailed content of How to use jquery selector? Instructions on the use of selector. 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