JQ (on)

About jQuery

jQuery is JavaScript and query (Query) that is an auxiliary library JavaScript development.

jQuery is a multi-browser compatible javascript library.

The core idea is to write less, do more (written less, do more).

jQuery barcamp in New York, published by the American John Resig in January 2006, attracted a lot of JavaScript experts from around the world to join.

Once, jQuery is the most popular JavaScript library, in front of 10,000 most visited websites in the world, with more than 55% use jQuery!

Most JavaScript libraries usually have features include:

A selector (Selector), DOM, practical functions, event handling, Ajax, etc.

Use jQuery

JQuery enter the official website or download the jQuery file to other platforms, and the introduction of the page:

http://www.jq22.com/jquery-info122

Typically, each version has two versions available for download

Production version - the actual site has been streamlined and downsized

Dev - for testing and development, uncompressed, the code is readable

Note: version 2.0 and later, is no longer compatible IE 6 7 8

It can also be introduced jQuery files on the server

In the jQuery library jQuery $ is a shorthand form of

Rei如: $ ( "# nan") === jQuery ( "# nan")

After the completion browser parses DOM, ready to perform a function within the parentheses

$(document).ready( function () { …} )

Can be abbreviated as: $ (function () {...})

JQ advantages:

Lightweight powerful selector

Excellent and reliable operation of the DOM event handling mechanism

Excellent sound Ajax browser compatibility

Rich chain operation plug-in support

Well documented open source

......

jQuery selector

Selector: simple wording, to support CSS3 selectors of CSS1

$ ( "# Test") to select an id test individual elements of ---

$ ( ". Test") select all elements of class to test the elements of the collection ---

$ ( "Div") select all <p> elements --- a collection of elements

$ ( "Div span") Choose <div> in all <span> (sub can choose to Sun and all the elements) elements --- a collection of elements

$ ( "Div: first") select all <div> element of a <div> element single element ---

$ ( "Div: last") Select the last <div> --- a single element of all elements <div> element

$ ( "Input: even") Select an index (index starts from 0, 0 count is an even number) is an even number of <input> element collection of elements ---

$ ( "Input: odd") Select an index (index starts from 0) is odd <input> element collection of elements ---

$ ( "Div [title = test]") to select the property title of "test" <div> element collection of elements ---

$ ( "Div: nth-child (1)") select all div, the div element is the first child of its parent element tag set ---

.......

jQuery DOM

Create a node:

Javascript using traditional methods to create a div node:

var newDiv = document.createElement(‘div’);

jQuery to create a div node:

$ ( '<Div> New node </ div>');

Insert node:

The method of using javascript, inserting a node:

var Newp = document.createElement(“p”);

document.body.appendChild(Newp);

jQuery insert node: Example: $ (a) .append (c);

append ------ a plug in the end of the c

appendTo --- c inserted in the end of a

prepend ------ a plug in front of c

prependTo --- c inserted in front of a

After insertion after ----------- a c

After insertAfter ---- c plugged into a

Before insertion before -------- a c

insertBefore --c inserted before a

Delete node:

With javascript method to delete a node:

var b = document.getElementById(“test”);

var c = b.parentNode;

c.removeChild(b);

jQuery remove a node:

$('#test').remove();

remove () remove nodes

empty () to empty the contents of the node

Replace node:

The method of using javascript, node replacement:

parent.replaceChild( newNode , oldNode );

jQuery replacement node:

$ ( "<P> Replace </ p>") replaceAll ( "# test1").;

Copy nodes:

Javascript using traditional methods, a copy node:

var txt = document.querySelector("p");

var clonep = txt.cloneNode(true);

document.body.appendChild(clonep);

jQuery copy a node:

var clone_a = a.clone (true); deep copy event handler comprising

$('body').append(clone_a);

Common methods:

.children () obtaining a matching element in the set of all sub-elements of each element

.next () to get the next sibling matching element in the set of each element

.prev () obtained for each sibling element on a proximate set of matching elements

.parent () to get the parent element of the current set of matched elements in each element

.find (child) get the current set of matched elements offspring each element

.siblings () obtained sibling matching element in the set of all elements

() A matching element in the set of elements specified index .eq

. Index () method returns the index position of the element relative to the specified other specified elements

.end () of a previous element matched to a state

.each () loop, performing the function of each matching element

.is () to detect a match based on a selector element, the element or collection of objects jQuery, if the element matches the given parameters, return true

.addClass () Adds the specified for each element that matches the class name

.removeClass () delete all or a specified class from the matched elements

.toggleClass () to add or remove from a class of the matched elements

.hasClass () to check whether it contains elements of a particular class, there are true

.attr () to set or return the property value of the selected element

.removeAttr () to delete an attribute from each of the matched elements

.html () set or get html contents of the first matching element

.val () value (form elements) or returns the set of matching elements

.css () returns the style property set or matching elements

.width () sets or returns the width of matching elements

.height () returns the set of matching elements or height

.scrollLeft () returns the set of matching elements or relative rolling of the left shift bar

.scrollTop () returns the set of matched elements, or top bar offset relative rolling

.POSITION () Gets matching elements are offset relative positioning of the parent element

.offset () Gets or sets the matching elements in the current viewport relative offset

. Substr () extracted from the specified position specified start character string length

......

jQuery animation

Expand / Collapse:

slideUp (null / speed, easing, fn); Collapse

slideDown (null / speed, easing, fn); Expand

Parameters: Optional

null: no mass participation, the implementation of the default effect

speed: 'slow' | 'normal' | 'fast' or milliseconds

easing: Specifies the animation, the default is "swing", extensible

fn: callback function, when the animation is finished after execution

Examples

$('#con').slideDown( 1000 , 'swing' , function (){ alert('123'); } );

$ ( '# With'). SlideUp ({

duration:1000,

easing:'easeOutElastic',

complete:function (){

alert ( 'bye ~');

}

});

Reverse switch:

toggle(null/speed , easing , fn);

Parameters: Optional

null: no mass participation, the implementation of the default effect

speed: 'slow' | 'normal' | 'fast' or milliseconds

easing: Specifies the animation, the default is "swing", extensible

fn: callback function, when the animation is finished after execution

1. A binding two or more event handler function, click event in response to rotation of the selected elements

2. If the element is visible, the hidden switch; if the element is hidden, invisible switched

Show Hidden:

show (null / speed, easing, fn); Show

hide (null / speed, easing, fn); Hide

Parameters: Optional

null: no mass participation, the implementation of the default effect

speed: 'slow' | 'normal' | 'fast' or milliseconds

easing: Specifies the animation, the default is "swing", extensible

fn: callback function, when the animation is finished after execution

fade in and fade out:

fadeIn (null / speed, easing, fn); Fade

fadeOut(null/speed , easing , fn); 淡出

Parameters: Optional

null: no mass participation, the implementation of the default effect

speed: 'slow' | 'normal' | 'fast' or milliseconds

easing: Specifies the animation, the default is "swing", extensible

fn: callback function, when the animation is finished after execution

Custom Animation:

A Usage: animate ({styles}, speed, easing, fn)

Parameters: Optional

{Styles}: the set of setting a set css

speed: 'slow' | 'normal' | 'fast' or milliseconds

easing: Specifies the animation, the default is "swing", extensible

fn: callback function, when the animation is finished after execution

Animate () method performs custom animation attribute set css

Usage two: animate ({styles}, {queue, duration, easing, complete});

parameter:

{Styles}: the set of setting a set css

queue: whether to join the animation queue perform true / false (default true)

duration: define the duration of the animation

easing: Specifies the animation, the default is "swing", extensible

complete: the callback function, when the animation is finished after execution

Operational attributes:

Not all attributes may be Jquery css animation (Animate function) to dynamically change, the following properties are css JQ can operate:

backgroundPosition borderWidth borderBottomWidth

borderLeftWidth borderRightWidth borderTopWidth

borderSpacing margin marginBottom marginLeft

marginRight marginTop outlineWidth padding

paddingBottom paddingLeft paddingRight

paddingTop height width maxHeight maxWidth

minHeight maxWidth font fontSize opacity

bottom left right top letterSpacing wordSpacing

lineHeight textIndent scrollLeft scrollTop

… …

Stop Animation:

stop () Stops the current animation (animation queue and will not stop the rest of the animation)

stop (true) to stop all animation

stop (true, true) stop all animation and reach the end of the current animation

$("#go").click(function(){

$(“.block”).animate({left: ‘200px'}, 5000);

});

$("#stop").click(function(){

$ ( "Block.") Stop ();. // stop current animation

});

Guess you like