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


Related articles: