Review jq today

jQuery concept:

jQuery is a fast and concise JavaScript library, which is an encapsulated specific collection (Methods and functions)

Learning the essence of jQuery: learning to call these functions (Methods).

Simple understanding: it is a js file that encapsulates our native js code and stores it in it. In this way, we can use these encapsulated functions quickly and efficiently.

Advantages of jQuery

Lightweight. The core file is only tens of kb, which will not affect the page loading speed

Chain programming, implicit iteration

Cross browser compatibility. It is basically compatible with mainstream browsers

Event, style and animation support greatly simplify DOM operation

Support plug-in extension development. There are rich third-party plug-ins, such as tree menu, date control, rotation chart, etc

Free and open source

jQuery entry function

First:

$(function () {   

    ...  // This is the entrance to the completion of page DOM loading

 }) ;  

Second:

$(document).ready(function(){
   ...  //  The entry of the page loaded here is DOM
});   

$is the top-level object of jQuery, which is equivalent to window in native JavaScript. Wrap the element into a jQuery object with $, and you can call the method of jQuery.

Mutual conversion

DOM objects and jQuery objects can be converted to each other

Because the native js is larger than jQuery, some of the native properties and methods of jQuery are not encapsulated To use these properties and methods, you need to convert the jQuery object into a DOM object.

DOM object to jQuery object: $(DOM object)

Converting jQuery objects to DOM objects (two ways)

$('div') [index] index is the index number

$('div') .get(index) index is the index number

jQuery common API s

jQuery selector

There are many ways for native JS to obtain elements, which are very miscellaneous, and the compatibility is inconsistent. Therefore, jQuery encapsulates us to make the acquisition of elements unified

$("selector") / / just write CSS selector directly in the selector, but use quotation marks

Implicit iteration

The process of traversing internal DOM elements (stored in pseudo array form) is called implicit iteration

jQuery filtering method (key)

$('li').parent() parent

$('ul').children('li'); Subset [if no parameters are added, get all; if specified elements are added, find according to the specified]

$('ul').find('li ') offspring

$('li').siblings('li ') brother

$('li').nextAll(); hinder

$('li').prevAll(); ahead

Judge whether there is a class name: $('div ') hasClass('aaa')

$('div').eq(index); Specify index method

jQuery style operation

If the parameter only writes the property name, the property value is returned[ $(this).css(''color'');]

Parameters are attribute name, attribute value and comma separated. They are used to set a set of styles. Attributes must be quoted. If the value is a number, it can not be followed by unit and quotation mark[ $(this).css(''color'', ''red'');]

Parameters can be in the form of objects, which is convenient for setting multiple groups of styles. Attribute names and attribute values are separated by colons. Attributes can be separated without quotation marks,
[$(this).css({ "color":"white","font-size":"20px"});]

Set class style method

Add class[ $("div").addClass(''current'');]

Remove class[ $("div").removeClass(''current'');]

Switching class[ $("div").toggleClass(''current'');]

Show hidden effects

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])

Sliding effect

slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])


(1)Parameters can be omitted.
(2)speed: A string of three predetermined speeds("slow","normal", or "fast")Or a number in milliseconds that represents the duration of the animation(For example: 1000). 
(3)easing: (Optional) Used to specify the switching effect. The default is“ swing"，Available parameters“ linear". 
(4)fn:  Callback function, the function executed when the animation is completed, and each element is executed once

Animation queue and its stopping method

Animation or effects will be executed once triggered. If triggered multiple times, multiple animations or effects will be queued for execution.

Stop queuing:stop()

(1)stop() Method to stop an animation or effect.
(2)  be careful: stop() Writing in front of the animation or effect is equivalent to stopping and ending the last animation

Fade in and fade out effect

fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]])[be careful fadeTo Two parameters must be written, speed and opacity]

Custom animation

Syntax: animate(params,[speed],[easing],[fn])

Parameters:
(1)params: If the style attribute you want to change is passed as an object, it must be written. The attribute name can be without quotation marks. If it is a composite attribute, the hump naming method needs to be adopted borderLeft. Other parameters can be omitted.
(2)speed: A string of three predetermined speeds("slow","normal", or "fast")Or a number in milliseconds that represents the duration of the animation(For example: 1000). 
(3)easing: (Optional) Used to specify the switching effect. The default is“ swing"，Available parameters“ linear". 
(4)fn:  Callback function, the function executed when the animation is completed, and each element is executed once.

Additional data syntax

data(''name'',''value '') / / attach data to the selected element

Get data syntax

date(''name '') / / obtain data from the selected element

$('span').data('spanindex',3);

console.log($('span').data('spanindex'));

jQuery element operation

It is mainly used to traverse, create, add and delete elements.

Traversal element

Syntax 1: $("div") each(function(index, domEle) { xxx; })

\1. each() Method traverses each element of the match. Mainly used DOM handle. each every last

\2. The callback function inside has two parameters:  index Is the index number of each element;  demEle It's every DOM Element object, not jquery object

\3. So if you want to use jquery Method, you need to give this dom Convert element to jquery object  $(domEle)

Syntax 2: $ each(object，function(index, element){ xxx;})

\1. $.each()Method can be used to traverse any object. It is mainly used for data processing, such as arrays and objects

\2. The function inside has two parameters:  index Is the index number of each element;  element  Traversal content

Create element

Syntax: $('' < li > < / Li > '');

Add element

element.append('' content '') [put the content at the back of the matching element, similar to the native appendChild.]

element.prepend('' content '') puts the content at the front of the matching element.

External addition

element.after('' content '') / / put the content after the target element

element.before('' content '') / / put the content in front of the target element

①Internal elements are added. After generation, they are parent-child relationships.

②External elements are added. After generation, they are brothers.

Delete element

element.remove() / / delete the matching element (itself)

element.empty() / / delete all child nodes in the matched element collection

element.html('' '') / / empty the matching element content

① remove removes the element itself.

② empt() and html('' '') are equivalent. They can delete the content in the element, but html can also set the content.

jQuery size

width(), height() [width and height only]

innerWidth(), innerHeight() [including padding+width]

outerWidth(), outerHeight() [including padding, border and width]

outerWidth(true), outerHeight(true) [including padding, border, margin and width]

jQuery location

There are three main positions: offset(), position(), scrollTop()/scrollLeft();

offset() sets or obtains the element offset offset: the distance from the document [left, top]

position() gets the element offset

① The position() method is used to return the offset coordinates of the selected element relative to the parent with positioning. If the parent has no positioning, the document shall prevail.

② This method has two attributes: left and top. position().top is used to obtain the distance from the top of the positioning parent, position() Left is used to get the distance to the left of the positioning parent.

Note: this method can only get.

scrollTop(), scrollLeft() set or get the header and left side of the element to be rolled away

① The scrollTop() method sets or returns the header of the selected element to be rolled away.

② If the parameter is not followed, it is obtained. If the parameter is a number without unit, it is used to set the rolled head.

jQuery event

jQuery event registration

$("div").click(function(){  Event handler }) 

Event handling on() binding event

The on() method binds the event handler of one or more events on the matching element

element.on(events,[selector],fn)

Same as processing procedure: $('div').on('mouseenter click',function () {
			console.log(123);
		});

Different handlers: $("div").on({

  mouseover: function(){}, 

  mouseout: function(){},

  click: function(){}  

});       

You can delegate actions to events. The definition of event delegation is to bind the event originally added to the child element to the parent element, that is, to delegate the event to the parent element

$('ul').on('click', 'li', function() {

    alert('hello world!');

}); 

Event handling off() unbinding event

The off() method removes the event handler added through the on() method.

Auto trigger event (trigger)

$("p").trigger("click"); // Click event is triggered automatically at this time, and mouse click is not required
 Auto trigger event: $(Element).click();

​				  $(Element).trigger('click');

​				  $(Element).triggerHandler('click');

​	Event object: $(Element).click(function (e) {e});
Block default behavior: event.preventDefault()   perhaps return  false 

Prevent bubbling: event.stopPropagation()   

jQuery plug-in

JQuery has limited functions. If you want more complex special effects, you can complete them with the help of jQuery plug-in.

Lazy loading of pictures