jquery Learning Summary (must see article) _jquery

JQuery objects

The jquery object is the object that is generated after the DOM object is wrapped through jQuery.

The jquery object is unique to JQuery.

• Only jquery objects can use the JQuery method, and any method of Dom objects cannot be used in jquery objects, whereas DOM objects cannot use any method of jquery.

• Convention: If you get a JQuery object, precede the variable with $

Multiple DOM objects are encapsulated in the jquery object, while the JQuery object is a class array object

• The difference between an array and a class array object

1. The type of the array is an array

2. Class array objects are of type Object

DOM object to JQuery object

• Wrapping a DOM object with $ () can be converted to a JQuery object

var item = document.getelementsbytagname (' ul ') [0],//DOM object
  $item = $ (item);//jquery Object

JQuery object converted to DOM object

The jquery object obtains the corresponding DOM object by using the Get (index) method provided by jquery

var $ul = $ (' ul '),
  ul = $ul. Get (0);

The JQuery object is a class array object that can be used [] to get the corresponding DOM object.

Class Array Object

A class array object is essentially an object, but is stored in a way similar to the structure of an array

arguments Object----Accept the number of function arguments
The jquery object----The bottom is the DOM object

Property

Length Property (Length of array | Number of elements)

Method

Get (Index): Returns the corresponding DOM object based on index
eq (Index): Returns the corresponding JQuery object according to index
index (): Finding the index value of an element

The difference between ready and onlaod

Ready

1. With the shorthand method
2. In an HTML page, allow multiple
3. Load the DOM structure to perform
4. Fast execution speed

OnLoad

1. No Shorthand method
2. In an HTML page, you can use only one
3. Need to wait for all the resources on the page to be loaded before executing
4. Slower execution speed than ready

JQuery Animation

Basic hide, display effect

Show ()/Hide ()

$ (' div '). Show (1000). Hide (1000);

If you are using the same JQuery object, you can use a chained operation.

Sliding animation effect

Slidedown ()/Slideup ()

$ (' div '). Slideup (1000). Slidedown (1000);

Fade in

Fadein () fade in
fadeout () Fade out

$ (' div '). FadeIn (1000). fadeout (1000);

Concurrency and queuing effects

• Concurrency effects: Set multiple animations to execute simultaneously
• Queued Effects: Set up multiple animations, followed sequentially

JQuery Plugin

The role of JQuery Plug-ins

• Extend the functionality of JQuery
• Presentation of component features

Date plugin-Laydate plugin

Preliminary use of laydate
1. Introduction of Laydate.js
2.laydate (Options)

Developing Plug-ins

Global functions

The global function, in fact, is the method of JQuery itself.

Some of the features built into JQuery are implemented through global functions.

• such as $.ajax () is a typical global function

To add a function to the jquery namespace, just specify the new function as a property of jquery itself

$.globalfunction = function () {
  //todo ...
};

Can be invoked by jquery.globalfunction () or $.globalfunction ().

When you need to add multiple functions, you can use the $.extend () function

$.extend ({
  functionone:function () {
    //todo ...
  },
  functiontwo:function () {
    //Todo ...
  }}
);

The above code allows you to add global functions, but the code has a risk for namespaces

We can encapsulate all the global functions that belong to one plug-in to an object

$.plugins = function () {
  functionone:function () {/
    /todo ...
  },
  functiontwo:function () {/
    / Todo..
  }
};

This code, in fact, creates another method for global functions---plugins

Functionone and Functiontwo have become properties of plugins objects.

$.plugins.functionone ();
$.plugins.functiontwo ();

Ways to add a JQuery instance object

$.fn.method = function () {}; Environment of Object method

Within any plug-in method, the keyword this refers to the jquery object of the current calling method, so you can invoke any built-in jquery method above this.

Method consonant

To implement chained operations via return-this

The above jquery Learning summary (must read) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.