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.
Traverse a jQuery object and execute a function for each matching element
$('p').each(function(idx,node){
$(node).text(idx + ':' + 'hello')
}) 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()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>
$('.hello').appendTo('.world');<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')
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的下标
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')
})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?
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
There is no simplified writing method for window.onloaddocument.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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
