Only after understanding these can you start to use the power of jQuery_jquery

由于当前jQuery如此的如雷贯耳，相信不用介绍什么是jQuery了，公司代码中广泛应用了jQuery，但我在看一些小朋友的代码时发现一个问题，小朋友们使用的仅仅是jQuery的皮毛，只是使用id选择器与attr方法，还有几个动画，如果只是如此，相比于其带来的开销，其实还不如不使用，下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery。

jQuery如此之好用，和其在获取对象时使用与CSS选择器兼容的语法有很大关系，毕竟CSS选择器大家都很熟悉（关于CSS选择器可以看看十分钟搞定CSS选择器），但其强大在兼容了CSS3的选择器，甚至多出了很多。

选择器

有了CSS选择器基础后，看jQuery的选择器就很简单了，不再详细一一说明

$(‘E~F’) Ordinary adjacent selector (younger brother selector), matches the $(‘.class1.class2’)Match elements whose class name contains both class1 and class2$("E:first")The first of all E$("E:last")The last of all E$("E:not(selector)")Filter E by selector$("E:even")      The index in all E is an even number$("E:odd")                                            $("E:eq(n)")                                                   All elements with index n in E$("E:gt(n)")                                                   All elements in E with index greater than nAll elements in E with index less than n$(":header")Select h1~h7 elements$("div:animated")Select the element that is performing the animation effect$(‘E:contains(value)’)Elements whose content contains value $(‘E:empty’)Element with empty content$(‘E:has(F)’) Elements with F in their child elements, $('div:has(a)'): div containing a tag $(‘E: parent')The parent element is the element of E, $('td: parent'): The parent element is the element of td$(‘E:hidden’)All hidden E$(‘E:visible’)All visible E

Basic Selector
$(‘*’)	Match all elements on the page
$(‘#id’)	id selector
$(‘.class’)	Class selector
$(‘element’)	Tag Selector
Composition/Level Selector
$(‘E,F’)	Multi-element selector, separated by ",, simultaneously matches element E or element F
$(‘E F’)	Descendant selector, separated by spaces, matches all descendants of the E element (not just sub-elements, sub-elements recursively downward) element F
$(E>F)	Child element selector, separated by ">", matches all direct child elements of the E element
$(‘E F’)	Directly adjacent selector, matches of after E element and sibling element F
	sibling element F of after E element (whether directly adjacent or not)
Basic Filter Selector
The index in all E is an odd number
	$("E:ll(n)")
	Content Filter
	Visual Selector
	Attribute filter selector
$(‘E[attr]')	含有属性attr的E
$(‘E[attr=value]')	属性attr=value的E
$(‘E[attr !=value]')	属性attr！=value的E
$(‘E[attr ^=value]')	属性attr以value开头的E
$(‘E[attr $=value]')	属性attr以value结尾的E
$(‘E[attr *=value]')	属性attr包含value的E
$(‘E[attr][attr *=value]')	可以连用
子元素过滤器
$(‘E:nth-child(n)')	E的第n个子节点
$(‘E:nth-child(3n+1)')	E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)')	E的index为偶数的子节点
$(‘E:nth-child(odd)')	E的index为奇数的子节点
$(‘E:first-clild')	所有E的第一个子节点
$(‘E:last-clild')	所有E的最后一个子节点
$(‘E:only-clild')	只有唯一子节点的E的子节点
表单元素选择器
$(‘E:type')	特定类型的input
$(‘:checked')	被选中的checkbox或radio
$(‘option: selected')	被选中的option

Filtering method

.find(selector) finds the child nodes of each element in the collection

Get the descendants (child nodes) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Copy code The code is as follows:

$('li.item-ii').find('li ').css('background-color', 'red');

.filter(selector) filters the elements in the current collection

Reduce the set of matched elements to those that match the selector or pass the function's test.

Copy code The code is as follows:

$('li').filter(':even'). css('background-color', 'red');

Basic method

.ready(handler) method executed after document loading is completed, different from window.onload

Specify a function to execute when the DOM is fully loaded.

Copy code The code is as follows:

$(document).ready(function() {
// Handler for .ready() called.
});

.each(function(index,element)) traverses each element in the collection

Iterate over a jQuery object, executing a function for each matched element.

Copy code The code is as follows:

$("li" ).each(function( index ) {
console.log( index ": " $(this).text() );
});

jQuery.extend( target [, object1 ] [, objectN ] ) merge objects

Merge the contents of two or more objects together into the first object.

Copy code The code is as follows:

var object = $.extend({}, object1, object2);

Get element

.eq(index) Gets a specific jQuery object in the jQuery object collection by index

Reduce the set of matched elements to the one at the specified index.

.eq(-index) Gets a specific jQuery object in the jQuery object collection in reverse order index

An integer indicating the position of the element, counting backwards from the last element in the set.

Copy code The code is as follows:

$( "li" ).eq( 2 ).css( " background-color", "red" );

.get(index) Gets the DOM object of a specific index in the jQuery collection object (automatically converts the jQuery object into a DOM object)

Retrieve one of the DOM elements matched by the jQuery object.

Copy code The code is as follows:

console.log( $( "li" ).get( -1 ) );

.get() converts jQuery collection object to DOM collection object and returns

Retrieve the DOM elements matched by the jQuery object.

Copy code The code is as follows:

console.log( $( "li" ).get() ) ;

.index() / .index(selector)/ .index(element) Find a specific element index from the given collection

Search for a given element from among the matched elements.

1. Return the first element index without parameters

2. If the parameter is a DOM object or jQuery object, the index of the parameter in the collection is returned

3. If the parameter is a selector, return the index of the first matching element. If not found, return -1

Copy code The code is as follows:

var listItem = $( "#bar" );
alert( "Index: " $( "li" ).index( listItem ) );

.clone([withDataAndEvents][,deepWithDataAndEvents]) creates a deep copy of the jQuery collection (sub-elements will also be copied). By default, the shuju and binding events of the object are not copied

Create a deep copy of the set of matched elements.

Copy code The code is as follows:

$( ".hello" ).clone().appendTo( " .goodbye" );

.parent([selector]) Gets the parent element of the jQuery object that matches the selector

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

Copy code The code is as follows:

$( "li.item-a" ).parent('ul ').css( "background-color", "red" );

.parents([selector]) Gets the ancestor elements of the jQuery object that match the selector

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

Copy code The code is as follows:

$( "span.selected" ) .parents( "div" ) .css( "border", "2px red solid" )

Insert element

.append(content[,content]) / .append(function(index,html)) Append content to the end of the object

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

1. You can add multiple contents at one time, and the content can be DOM objects, HTML strings, and jQuery objects

2. If the parameter is a function, the function can return a DOM object, HTML string, or jQuery object. The parameter is the position of the element in the collection and the original html value

Copy code The code is as follows:

$( ".inner" ).append( "< ;p>Test

" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( " Hello" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

.appendTo(target) inserts the object at the end of the target element. The target element can be a selector, DOM object, HTML string, element collection, jQuery object;

Insert every element in the set of matched elements to the end of the target.

Copy code The code is as follows:

$( "h2" ).appendTo( $( " .container" ) );
$( "

Test

" ).appendTo( ".inner" );

.prepend(content[,content]) / .prepend(function(index,html)) Append content to the head of the object. The usage is similar to append

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

Copy code The code is as follows:

$( ".inner" ).prepend( "

Test

" );

.prependTo(target) inserts the object into the head of the target element. The usage is similar to prepend

Insert every element in the set of matched elements to the beginning of the target.

Copy code The code is as follows:

$( "

Test

" ). prependTo( ".inner" );

.before([content][,content]) / .before(function) Insert content in front of the object (not at the head, but outside, and at the same level as the object). The parameters are similar to append

Insert content, specified by the parameter, before each element in the set of matched elements.

Copy code The code is as follows:

$( ".inner" ).before( "< ;p>Test

" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "Hello" );
$( "p" ).before( document.createTextNode( "Hello " ) );

.insertBefore(target) inserts the object before the target (also not the head, but the same level)

Insert every element in the set of matched elements before the target.

Copy code The code is as follows:

$( "h2" ).insertBefore( $( ".container" ) );

.after([content][,content]) / .after(function(index)) Contrary to before, insert content, parameters and append after the object (not at the tail, but outside, at the same level as the object) Similar to

Insert content, specified by the parameter, after each element in the set of matched elements.

Copy code The code is as follows:

$( ".inner" ).after( "< ;p>Test

" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.insertAfter(target) is the opposite of insertBefore, inserting the object after the target (also not at the tail, but at the same level)

Insert every element in the set of matched elements after the target.

Copy code The code is as follows:

$( "

Test

" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

Wrapping element

.wrap(wrappingElement) / .wrap(function(index)) wraps an HTML structure for each object, which can be selector, element, HTML string, jQuery object

Wrap an HTML structure around each element in the set of matched elements.

Copy code The code is as follows:

Hello

Goodbye

$( ".inner" ). wrap( "

" );

Hello

Goodbye< ;/div>

.wrapAll(wrappingElement) wraps all matching objects in the same HTML structure

Wrap an HTML structure around all elements in the set of matched elements.

Copy code The code is as follows:

Hello

Goodbye

$( ".inner" ). wrapAll( "

");

Hello

Goodbye

.wrapInner(wrappingElement) / .wrapInner(function(index)) wraps the matching element content. This is hard to explain. You will understand it just by looking at the example

Wrap an HTML structure around the content of each element in the set of matched elements.

Copy code The code is as follows:

Hello

Goodbye

$( ".inner" ). wrapInner( "

");

Hello

Goodbye< ;/div>

.unwap() removes the parent of the DOM element

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

Copy code The code is as follows:

pTags = $( "p" ).unwrap();

Attribute methods

.val() gets the value of the element

Get the current value of the first element in the set of matched elements.

Copy code The code is as follows:

$( "input:checkbox:checked" ).val ();

.val(value) /.val(function(index,value)) Set the value for the element. Index and value also refer to the index and original value of the element when setting it for each element in the collection

Set the value of each element in the set of matched elements.

Copy code The code is as follows:

$( "input" ).val( 'hello' );
$( "input" ).on( "blur", function() {
$( this ).val(function( i, val ) {
return val.toUpperCase();
});
});

.attr(attributeName) gets the value of a specific attribute of the element

Get the value of an attribute for the first element in the set of matched elements.

Copy code The code is as follows:

var title = $( "em" ).attr( "title" );

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) Assign values ​​to element attributes

Set one or more attributes for the set of matched elements.

Copy code The code is as follows:

$( "#greatphoto" ).attr( "alt ", "Beijing Brush Seller" );

$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});

$( "#greatphoto" ).attr( "title", function( i, val ) {
return val " - photo by Kelly Clark";
});

.prop( propertyName ) Gets the value of a certain attribute of the element

Get the value of a property for the first element in the set of matched elements.

Copy code The code is as follows:

$( elem ).prop( "checked" )

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) Assign values ​​to element properties

Set one or more properties for the set of matched elements.

Copy code The code is as follows:

$( "input" ).prop( "checked" , true );

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
return !val;
});

$( "input[type='checkbox']" ).prop({
disabled: true
});

For the difference between attribute and property, you can take a look at jQuery’s attr and prop

.data(key,value) / .value(json) adds data to HTML DOM elements. HTML5 elements already have data-* attributes

Store arbitrary data associated with the matched elements.The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

Copy code The code is as follows:

$( "body" ).data( "foo" , 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1 , 2, 3 ] } );

.data(key) / .data() Get the data set by data or the data in the HTML5 data-* attribute

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

Copy code The code is as follows:

alert( $( "body" ).data( "foo" ) );
alert( $( "body" ).data() );

alert( $( "body" ).data( "foo" ) ); // undefined
$( "body" ).data( "bar", "foobar" );
alert( $ ( "body" ).data( "bar" ) ); // foobar

CSS method
.hasClass(calssName) checks whether the element contains a certain class and returns true/false

Determine whether any of the matched elements are assigned the given class.

Copy code The code is as follows:

$( "#mydiv" ).hasClass( "foo" )

.addClass(className) / .addClass(function(index,currentClass)) Adds a class to an element. It does not overwrite the original class, but appends it, and does not check for duplicates

Adds the specified class(es) to each of the set of matched elements.

Copy code The code is as follows:

$( "p" ).addClass( "myClass yourClass " );

$( "ul li" ).addClass(function( index ) {
return "item-" index;
});

removeClass([className]) / ,removeClass(function(index,class)) removes single/multiple/all classes

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

Copy code The code is as follows:

$( "p" ).removeClass( "myClass yourClass " );
$( "li:last" ).removeClass(function() {
return $( this ).prev().attr( "class" );
});

.toggleClass(className) /.toggleClass(className,switch) / .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) toggle means switch, and the method is used Switch, switch is a bool type value, you can understand this by looking at the example

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

Some text.

First execution

Copy code The code is as follows:

$( "div. tumble" ).toggleClass( "bounce" )

Some text.

Second execution

Copy code The code is as follows:

$( "div.tumble" ).toggleClass( " bounce" )

Some text.

Copy code The code is as follows:

$( "#foo" ).toggleClass( className, addOrRemove );

// Both ways of writing have the same meaning

if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}

Copy code The code is as follows:

$( "div.foo" ).toggleClass(function () {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad";
}
});

.css(propertyName) / .css(propertyNames) Get the value of the specific property of the element style

Get the value of style properties for the first element in the set of matched elements.

Copy code The code is as follows:

var color = $( this ).css( "background -color" );

var styleProps = $( this ).css([
"width", "height", "color", "background-color"
]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson ) Set the value of a specific property of element style

Set one or more CSS properties for the set of matched elements.

Copy code The code is as follows:

$( "div.example" ).css( " width", function( index ) {
return index * 50;
});

$( this ).css( "width", " =200" );

$( this ).css( "background-color", "yellow" );

$( this ).css({
"background-color": "yellow",
"font-weight": "bolder"
});

Event method

.bind( eventType [, eventData ], handler(eventObject) ) Bind event handler, this is often used, not much explanation

Attach a handler to an event for the elements.

Copy code The code is as follows:

$( "#foo" ).bind( "click ", function() {
alert( "User clicked on 'foo.'" );
});

.delegate( selector, eventType, handler(eventObject) ) Let’s see the official explanation for this

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Copy code The code is as follows:

$( "table" ).on( "click" , "td", function() {//Tie the click event handler of td to the table like this
$( this ).toggleClass( "chosen" );
});

.on( events [, selector ] [, data ], handler(eventObject) ) Recommended after 1.7, replacing bind, live, delegate

Attach an event handler function for one or more events to the selected elements.

Copy code The code is as follows:

$( "#dataTable tbody" ).on( " click", "tr", function() {
alert( $( this ).text() );
});

For the differences between bind, live, delegate, and on, you can see jQuery’s three event binding methods.bind(), .live(), .delegate()

.trigger( eventType [, extraParameters ] ) JavaScript trigger element binding event

Execute all handlers and behaviors attached to the matched elements for the given event type.

Copy code The code is as follows:

$( "#foo" ).trigger( "click " );

.toggle( [duration ] [, complete ] ) / .toggle( options ) Hide or show elements

Display or hide the matched elements.

Copy code The code is as follows:

$( ".target" ).toggle(); $( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});

Animation/Ajax
These two parts have a lot of content and are not just a simple function. Here are just a list of common method names. For their use, you can see jQuery API animation ajax, or jQuery animation processing summary, ASP.NET uses Ajax animation

queue/dequeue/clearQueue

delay/stop

fadeIn/fadeOut/fadeTo/fadeToggle

slideUp/slideDown/slideToggle

show/hide

Ajax

$.ajax

$.load

$.get

Finally

After understanding the above content, you can experience the power of jQuery when using jQuery for web development. This article is not a jQuery learning guide, it is just an introduction to common methods. If you want to learn jQuery, the best teaching material is jQuery API. The examples and English explanations in this article all come from jQuery API. In addition, the content introduced in the article is far from all jQuery, but mastering these first can give you a more comprehensive understanding of jQuery, and then you will be able to learn other content with ease.

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

Hot 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

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot 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)

Show More

Hot Topics

Where is the login entrance for gmail email?

7384

15

Java Tutorial

1628

14

CakePHP Tutorial

1357

52

Laravel Tutorial

1267

25

PHP Tutorial

1216

29

Show More

Related knowledge

Detailed explanation of jQuery reference methods: Quick start guide Feb 27, 2024 pm 06:45 PM

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

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

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: &lt

In-depth analysis: jQuery's advantages and disadvantages Feb 27, 2024 pm 05:18 PM

jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,

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:

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

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

See all articles