The concept: a JavaScript framework. JS simplify development
* jQuery is a fast and concise JavaScript frameworks, following yet another excellent Prototype JavaScript code libraries (or JavaScript framework). jQuery design aim is to "write Less, Do More", that is advocated write less code, do more things. It encapsulates the JavaScript code for commonly used functions,
providing a simple JavaScript design patterns to optimize HTML document manipulation, event handling, animating and Ajax interactions design.
* JavaScript framework: in essence is that some js file encapsulates js native code just
2 quick start.
1 steps:
1 . Download JQuery
* Currently jQuery has three major versions:
1 .x: compatible ie678, the most widely used, BUG official only maintenance
functions are no longer new. Therefore, in general projects, using version 1.x on it,
the final version: 1.12 . 4 (May 20, 2016)
2.x: incompatible ie678, rarely used, only the official BUG maintenance
function is no longer new. If you do not consider compatible with low version of the browser can use 2.x,
the final version: 2.2 . 4 (May 20, 2016)
3 .x: incompatible ie678, only supports the latest browsers. Unless special requirements,
generally do not use the 3.x version, many of the old jQuery plugin does not support this version.
The current version is a major update to maintain the official version. The latest version: 3.2 . 1 (March 20, 2017)
* jQuery-xxx.js with JQuery xxx.min.js differences:
1 . JQuery xxx.js: development version. To the programmer, a good indentation and comments. Some bulky
2 JQuery. Xxx.min.js: the production version. Used in the program, there is no indentation. Smaller volume. Programs load faster
2. JQuery js file import: import file min.js
3 used.
Var DIV1 = $ ( " # DIV1 " );
Alert (div1.html ());
3 JQuery difference between the object and the object JS conversion.
. 1 JQuery object. when the operation is more convenient.
2 .. JQuery js objects and methods are not common objects
3 . Both conversion
* jq -> js: jq Object [Index] jq or objects. GET (index)
* js -> jq: $ (js object)
4 selector: filter elements (tags) with similar characteristics
1 learning the:
1 . event binding
// 1. get b1 button
$ ( " # b1" ) .Click (function () {
Alert ( " ABC " );
});
2 entry function.
$ (Function () {
});
the window.onload and $ (function) the difference between
* the window.onload defined only once, If you define multiple, behind the front will be overwritten
* $ (function) can be defined many times.
3 style controls:. css method
// $ ( "# div1") CSS ( "background-Color",. " Red ");
$ ( " # div1 " ) .css ( " backgroundColor " , "pink");
2 classification.
1 basic selectors.
1 tag selector (element selector).
* Syntax: $ ( " HTML tag name " ) to get all the elements matching the tag name
2 . The above mentioned id selector
* Syntax: $ ( " # the id attribute value " ) to obtain the specified element of id attribute value matching
3 class selector.
* syntax: $ ( " attribute value of the .class " ) obtained with the specified class attribute value matching element
4 and set the selector:
* syntax: $ ( " selector 1, selector 2 .... " ) to obtain multiple selectors to select all elements
2 . level selector
1 descendant selectors.
* Syntax: $ ( " AB " ) Select all B elements within element A
2 sub-selector.
* Syntax: $ ( " A> B " ) select all the B sub-elements within the element A
3 Property selector
1 attribute name selectors.
* syntax: $ ( " a [attribute name] " ) containing the specified attribute selector
2 attribute selector.
* syntax: $ ( " a [attribute name = 'value'] " ) comprising specified attribute value equal to the selectors
3 composite attribute selector.
* syntax: $ ( " a [attribute name = 'value'][]..." ) Comprising a plurality of attribute conditions selector
4 . Filter selector
. 1 the first element selector.
* Syntax:: a first element to obtain the selected first elements
2 last element selector.
* Syntax:: Last selected obtained the last element of elements
3 non-element selector.
* syntax:: not (selector) is not an element of the specified content comprises
4 even number selector.
* syntax:: the even an even number, from 0 starts counting
5 odd selector.
* syntax: : odd odd, from 0 starts counting
6 equal index selector.
*Syntax:: eq (index) the specified index element
7 . Is greater than the index selector
* Syntax:: gt (index) is greater than the specified index element
8 is smaller than the index selector.
* Syntax:: lt (index) is less than the specified index element
9 title selection. is
* syntax:: header to obtain the title (h1 of ~ H6) element, the fixed wording
5 form the filter selector.
1 available element selector.
* syntax:: enabled for available elements
2 unavailable element selector.
* syntax:: disabled obtained unavailable element
3 selected selector.
* syntax:: the checked get radio /Checkbox element
4 . Selector select
* Syntax:: selected element obtained in the drop down box
. 5 the DOM operation
a content operation.
An HTML ():. Gets / sets the contents of the tag body element <a> <font> SUMMARY </ font> </a> -> < font> SUMMARY </ font>
2 text ():. tag body Gets / sets the plain text content element <a> <font> SUMMARY </ font> </ a > -> content
3 Val ():. Get / set value attribute value of the element
2 . attribute operations
1 General properties operation
1 . attr (): Get / set attribute element
2 . removeAttr (): delete attribute
3 . prop ():Get / Set Attribute element
4. RemoveProp (): Delete attributes
* attr and prop difference?
1 . If the operation is an inherent property of an element, it is recommended to use prop
2 if the operation is an element-defined properties, it is recommended to use attr.
2 pair of class attribute operations.
1 . AddClass ():. Add class attribute value
2 removeClass. (): delete class attribute value
. 3 toggleClass ():. handover class attribute
* toggleClass ( " one " ):
* is determined if there is an object on an element class = " one " , then the deleted one attribute value. If the element is not present on class = Object " One " , is added
. 4 CSS ().:
. 3 . The CRUD operations:
1 the append ():. Parent element to the child element appended to the
* objects 1.append (Object 2): 2 to add objects to the object inside the element 1, and at the end of
2 The prepend ():. Parent element child element is added to the beginning
* Object 1.prepend (Object 2): 2 to the object elements inside the object 1, and at the beginning
. 3 the appendTo ():.
* Object 1.appendTo (Object 2): add 1 to the object inside the object 2, and at the end
. 4 prependTo ():.
* Object 1.prependTo (Object 2): add 1 to the object 2 inside the object, and at the beginning
. 5 After ():. add elements to the element behind
* Object 1. after (Object 2): 2 to the object behind the object 1. Objects 1 and 2 are brothers
6 the before ():. Add an element to the front element
*Object 1.before (Object 2): 2 to the object in front of the object 1. Objects 1 and 2 are brothers
7 insertAfter ().
* Object 1.insertAfter (Object 2): 2 will add objects to an object behind 1. Objects 1 and 2 are brothers
8 insertBefore ().
* Object 1.insertBefore (Object 2): 2 will add an object to an object 1 in front. Objects 1 and 2 are brothers
9 the Remove ():. Removes the element
* objects .remove (): the deleted object out
10 empty ():. All descendent elements empty element.
* Object .empty (): the descendants of all the empty elements of the object, but retain the current object and its properties node