Note: 2016-06-03

Jquery

Understanding of the ScrollTop:

vertical scroll bar position is a scrollable area in the above the viewable area the height of the area being hidden.

if the scroll bar does not scroll at the top or the current element does not have a scroll bar, so this distance is 0

Bind mode (not recommended, 1.7 after the jquery version is on replace)

Delegate mode (features: High performance, support for dynamically created elements)

Role: Bind events to matching elements, valid for elements that support dynamic creation

1.1.1 on mode (most modern way, compatible with Zepto (mobile-like a library of jquery), strongly recommended way) (emphasis)

After the jquery1.7 version , jquery uses on to unify all the event-handling methods

Function: Binds an event to a matching element, including the advantages of all of the above binding event modes

Grammar:

First parameter: events, the name of the binding event can be multiple events separated by spaces (standard event or custom event)

Second parameter: selector, the descendant element of the execution event

The third parameter: data, which is passed to the processing function, is used by Event.data when the event is triggered.

Fourth parameter: handler, event handler function

$ (selector). On (Events[,selector][,data],handler);

Represents a bound event to $ (selector) when it must be an internal element of span to perform this event

$ (selector). On ("click", "Span", function () {});

Binding Multiple Events

Represents an element that is bound to $ (selector) to match the keystroke and mouse entry events

$ (selector). On ("Click MouseEnter", Function () {});

1.1.1 Event Unbind

L Unbind () mode

Role: Unbind Bind-bound events

$ (selector). Unbind (); To unbind all events

$ (selector). Unbind ("click"); Unbind the specified event

L Undelegate () mode

Action: Unbind an event that is bound by a delegate method

$ (selector). Undelegate (); To unbind all delegate events

$ (selector). Undelegate ("click"); Unbind All Click events

off Unbind on mode-bound events (emphasis)

Unbind all events that match an element

$ (selector). Off ();

Unbind all click events of a matching element

$ (selector). Off ("click");

Unbind the Click event of all agents, the events of the element itself will not be untied

$ (selector). Off ("click", "* *");

1.1.1 Event Triggering

Simple event triggering

$ (selector). Click (); Trigger Click event

Trigger Method Trigger Event

$ (selector). Trigger ("click");

Triggerhandler Trigger Event Response method, does not trigger browser behavior

For example: default behavior for text boxes to get focus

$ (selector). Triggerhandler ("Focus");

1.1.1 JQuery Event Object Introduction

Event.data additional data passed to the event handler

Event.currenttarget is equivalent to this, the current DOM object

Event.pagex the position of the mouse relative to the left edge of the document

Event.target Trigger event source, not necessarily ===this

event.stoppropagation () ; prevent events from bubbling

Event.preventdefault (); Block default behavior

Event.type Event Type: Click,dbclick ...

Event.which mouse Key type: Left 1 2 Right 3

Event.keycode Keyboard Key Code

1.1 jquery Supplement 1.1.1 chained programming

Chain Programming Principle: return this;

Typically, only the setup operation can continue the chained programming. This is not returned because the corresponding value obtained is returned when the operation is taken.

End (); Ends the most recent filter operation for the current chain, and returns the state before the matching element. 1.1.2 Implicit Iteration

Implicit iteration means that the inside of a method loops through all the elements that are matched, executes the corresponding method, and does not have to loop, simplifying our operation, and making it easier for us to invoke.

If you get a multi-element value, the value of the first element is returned in most cases.

Case "Pentagram scoring control" 1.1.3 each method

With implicit iterations, why use each function traversal?

In most cases, it is not necessary to use the each method because of the implicit iterative nature of jquery.

If you want to do different things for each element, the each method is used.

Function: Iterate through a collection of jquery objects and execute a function for each matching element

Parameter one represents the index number of the current element in all matching elements

Parameter two represents the current element (DOM object)

$ (selector). each (function (index,element) {});

"Case" can't see anything. 1.1.4 Multi-Library coexistence

The multi-Library coexistence here means that jquery occupies both the $ and jquery variables. When the JS Library of jquery is referenced in the same page, and the other libraries referenced (or other versions of the jquery library) are used in either the $ or jquery variables, then there is the problem of multi-library coexistence in order to ensure that each library is working properly.

Simulate another library that uses $ this variable

At this point, there is a conflict with the jquery library

var $ = {Name: "Itecast"};

How to resolve:

Role: Let jquery release control over $, allowing other libraries to use the $ symbol to achieve multi-library coexistence. After that, you can only use jquery to invoke the methods provided by jquery

$.noconflict ();

1.2 jquery plugin mechanism

The JS Library of jquery, though powerful, is not exhaustive and contains all the features.

jquery is the way to extend its functionality through plugins:

When you need a plugin, you can "install" it onto jquery and then, use it.

When you no longer need the plugin, you can "unload" it from jquery.

(Lenovo: Mobile phone software, installed app is like plug-in, use when installed, when not uninstalled) 1.2.1 third-party plug-in

JQuery.color.js

Animate () Custom Animation: Animation effects that do not support backgrounds

List of properties supported by animate animation

JQuery.lazyload.js

Steps to use:

1. Introduction of jquery Files

2. Introduction of Plugins

3. Using plugin 1.2.2 to make plugins

How to create a jquery plugin:

http://learn.jquery.com/plugins/basic-plugin-creation/

Global jquery Function extension method

$.pluginname = function () {};

jquery Object extension Methods

$.fn. Pluginname = function () {}; 1.2.3 jQueryUI

jQueryUI refers to plugins that are officially maintained by jquery in the UI direction.

Official api:http://api.jqueryui.com/category/all/

Other Tutorials: jQueryUI tutorials

Basic use:

1. Introduction of jQueryUI Style files

2. Introduction of jquery

3. Introduction of jQueryUI JS file

4. Using the jQueryUI function

Note: 2016-06-03