What are the methods in jQuery? Commonly used methods in jQuery (with code)

The content of this article is about what are the methods in jQuery? The commonly used methods in jQuery (with code) have certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

.each()

Traverse a jQuery object and execute a function for each matching element

$('p').each(function(idx,node){
  $(node).text(idx + ':' + 'hello')
})

$.extend()

jQuery.extend([deep,] target [, object1 ] [, objectN ] )
Merge multiple objects and add all attributes to the first object

• When we provide two or more objects to $.extend(), all properties of the objects are added to the target object (target parameter).

• If only one argument is provided to $.extend(), this means that the target argument is omitted. In this case, the jQuery object itself is defaulted to the target object. In this way, we can add new functionality under the jQuery namespace. This is useful for plugin developers who want to add new functions to jQuery. That is, {} is the default attribute. The user sets the attribute in it, overwriting the default attribute. If it is not set, the default attribute is used.

var object = $.extend({}, object1, object2)
var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
}var object2 = {  banana: { price: 200 },  durian: 100
}
// 将obj2合并到obj1上的案例
$.extend( object1, object2 )

.clone()

.clone()The method deeply copies all matching element sets, including all matching elements, matching elements Subordinate elements, text nodes.
Usually when we insert an element on the page into another place in the DOM, it will be removed from the old place, similar to a shearing effect.

For example:

<div class="container">    
<div class="hello">Hello</div>    
<div class="world">World</div></div>
$(&#39;.hello&#39;).appendTo(&#39;.world&#39;);<div class="container">  <div class="world">
    World    <div class="hello">Hello</div>  </div></div>

If you need to copy rather than cut, you can write the code as follows:

$('.hello').clone().appendTo('.world')

.index()

From Find a specific element in a given collection indexSubscript

• Without parameters, return the first elementindex

• If the parameter is a DOM object or jQuery object, return the parameter in the collection index

• If the parameter is a selector, return the first match Element index, not found returns -1

$('p').eq(2).index()  //2
$('.ok').index('p')  //获取p标签中的.ok的下标

.ready()

is equivalent to native JS’s document.onDOMContentLoaded
Specify a function to execute when the DOM is ready.

For example, when the executed code needs to be used after the element is loaded (for example, getting the size of the image needs to be done after the image is loaded), you need to put such code in the load event.

The following two ways of writing are equivalent

$(document).ready(function(){
})

$(function(){
})

Example

$(function(){    console.log('ready')
})

window.onload and $(document).ready

We often need it in development Bind handlers to events on some elements. But the problem is that if the element has not been loaded on the page but the binding event has been executed, it will have no effect. These two events are roughly used to avoid such a situation. Put the bound functions in the callbacks of these two events to ensure that the event functions can be bound after certain elements of the page are loaded. What is the difference between window.onload and $(document).ready? document.onDOMContentLoaded What about?

What is the difference between window.onload and $(document).ready?

Execution time is different

window.onload must wait until all elements in the page, including images, are loaded before it can be executed.
$(document).ready() is a DOM structure that is executed after drawing is completed without waiting for all page elements to be loaded.

The difference between repeated execution of the two methods

You cannot write multiple window.onloads at the same time. If there are multiple window.onload methods, only the last one
$(document) will be executed. Multiple ready() can be written at the same time, and all of them can be executed.
If both methods are written, then $(document).ready() will be executed before window.onload.

Simplified writing method

document.onDOMContentLoaded What?

document.onDOMContentLoaded is equivalent to .ready() in jQuery. The DOMContentLoaded event is fired after the initial HTML document has been fully loaded and parsed, without waiting for stylesheets, images, and subframes to complete loading.

There is a paragraph in the jQuery documentation introduction that explains that these two are not the same function

Translation

ready() method provides a Method that runs JavaScript code as soon as the page's DOM Document Object Model becomes safe to operate on. This is often a good time to perform required tasks before the user views or interacts with the page, such as adding event handlers and initializing plugins. When multiple functions are added through successive calls to this method, they are prepared in the DOM and run in the order they were added. In jQuery In 3.0, jQuery ensures that an exception occurring in one handler does not prevent subsequently added handlers from executing.

Most browsers end with Similar functionality is provided in the form of the DOMContentLoaded event. However, jQuery's .ready() methods have an important and useful difference: if the DOM is ready, the browser loads it before the code calls .ready(handler) DOMContentLoaded , then the function handler will still be executed. In contrast, the DOMContentLoaded event listener added after the event fired never executed.

So document.onDOMContentLoaded is not equivalent to .ready() in jQuery, it can only be said to be a similar method.

Related recommendations:

Implementation and usage of unordered image preloading in jquery

Between jQuery object and native DOM object The difference and conversion

The above is the detailed content of What are the methods in jQuery? Commonly used methods in jQuery (with code). For more information, please follow other related articles on the PHP Chinese website!