jQuery Learning Experience Summary of Required Readers
- 2021-06-28 08:40:00
- OfStack
jQuery object
&8226;The jQuery object is the result of wrapping the DOM object with jQuery.
&8226;The jQuery object is unique to jQuery.
&8226;Only the jQuery object can use the jQuery method, and no method of the DOM object can be used in the jQuery object, nor can the DOM object use any method of the jQuery.
&8226;Convention: If you get an jQuery object, add $before the variable
&8226;The jQuery object encapsulates multiple DOM objects, and the jQuery object is a class array object
&8226;The difference between an array and a class array object
1. The type of the array is Array
2. The type of class array object is Object
DOM Object to jQuery Object
&8226;Wrapping an DOM object in $() converts it to an jQuery object
var item = document.getElementsByTagName('ul')[0], // DOM object
$item = $(item); // jQuery object
jQuery object to DOM object
The jQuery object obtains the corresponding DOM object through the get (index) method provided by jQuery
var $ul = $('ul'),
ul = $ul.get(0);
The jQuery object is a class array object, and the corresponding DOM object can be obtained by [].
Class Array Object
A class array object is essentially an object, but it is stored in a structure similar to an array
&8226;arguments Object - Number of Accepted Function Arguments
&8226;jQuery Object - The bottom level is the dom object
attribute
&8226;length attribute (length of array | number of elements)
Method
&8226;get (index): Play back the corresponding dom object according to index
&8226;eq (index): Returns the corresponding jQuery object based on index
&8226;index(): Find the index value of an element
Differences between ready and onlaod
ready
1. Short form
2. Allow multiple occurrences in an HTML page
3. Execute after loading the DOM structure
4. Fast execution
onload
1. There is no abbreviation
2. Use only one in an HTML page
3. You need to wait until all the resources on the page are loaded before executing
4. The execution speed is slower than ready
jQuery Animation
Basic Hide, Show Effects
&8226;show()/ hide()
$('div').show(1000).hide(1000);
Chain operation can be used for the same jQuery object.
Sliding animation effect
&8226;slideDown()/ slideUp()
$('div').slideUp(1000).slideDown(1000);
Fade in and out
&8226;fadeIn() fade in
&8226;fadeOut() fade out
$('div').fadeIn(1000).fadeOut(1000);
Concurrency and queuing effects
&8226;Concurrent Effect: Set up multiple animations to execute simultaneously
&8226;Queuing effect: Set up multiple animations and execute them in sequence
jQuery Plugin
Role of jQuery Plugin
&8226;Extend the capabilities of jQuery
&8226;Presenting Componentized Features
Date Plugin - layDate Plugin
&8226;Preliminary use of layDate
1. Introducing laydate.js
2.laydate (options)
Develop plug-ins
Global Functions
The global function is essentially jQuery's own method.
Some of the functions built into jQuery are implemented through global functions.
&8226;For example, $.ajax() is a typical global function
To add a function to the jQuery namespace, simply specify the new function as an attribute of jQuery itself
$.globalFunction = function(){
// todo...
};
Callable through jQuery.globalFunction() or $.globalFunction()
You can use the $.extend() function when you need to add more than one function
$.extend({
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
});
Global functions can be added from the above code, but the code risks namespaces
We can encapsulate all global functions belonging to a plug-in into an object
$.plugins = function(){
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
};
With the above code, you have actually created another method for global functions - - plugins
functionOne and functionTwo have become attributes of the plugins object.
$.plugins.functionOne();
$.plugins.functionTwo();
Method of adding jQuery instance object
$.fn.method = function(){}; Environment for object methods
Inside any plug-in method, the keyword this references the jQuery object of the current calling method, so any built-in jQuery method can be called on top of this.
Method Concatenation
Chain operation through return this