What Jquery that?
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, provide a simple JavaScript design patterns to optimize HTML document manipulation, event handling, animating and Ajax interactions design.
Download jquery
Download URL:
http://www.jq22.com/jquery-info122
. When downloading, select the stable version of the code, here we use version 2.1.4.
How to introduce jquery?
Using <script> in the html pages need to be introduced <script> tag is introduced, the introduction of the format <script src = "jquery file storage path"> </ script>. Do not write the note introduced inside the js code, otherwise they will be invalid, we create a <script> </ script> tag to write code internally.
jquery selector
JQuery selector can be divided into nine selector, respectively: basic, level, simple, content, visibility, attributes, sub-elements, the form, the form object properties.
Use basic selector
$ ① find the object by id ( "# id");
② find the object through the $ class ( "class.");
③ find the object $ ( "div") through the label;
Uses a hierarchical selector
l ancestor descendant: descendant selectors, get children and grandchildren ancestors following elements
l parent> child: the specified child element selector, matching the following sub-elements parent element
l prev + next: selector element matches the next sibling of the current element requires two adjacent elements must be adjacent
l prev ~ siblings: siblings selector to match all elements below the specified current brother
Example:
Level selector //
// descendant selectors
var Li = $ ( "UL # Li Box") [2] .innerHTML;
the console.log (Li);
Simple selector
l: first matches the first element
l: last match the last element
l: even index matching value is even all elements of
l: All elements of odd index is an odd number of matches
l: eq (index) matches the value of the subscript is specified element
l: gt (index) match the specified index value greater than all of the elements
l: lt (index) match the specified index value of less than all of the elements
l: not (selector) In addition to matching all the elements other than the specified selection
// simple selector
var li = $ ( "ul: first") html (); // first.
The console.log (Li);
var Li = $. ( "UL: Last") HTML (); / / last
console.log (li);
Use attribute selector
ll [attribute] match the specified element property
ll [attribute = value] attribute match element equal to the specified value of input [name = username]
ll [attribute! = value] matches the specified attribute value is not equal to the element
ll [attribute ^ = value] matches the specified attribute value of the element to the beginning
ll [attribute $ = value] matching attribute with the specified value of the end elements
ll [attribute * = value] contained in the specified attribute value matching elements
ll [selector1] [selector2] [selectorN] Any number of attribute selector
var name = $('input[name="name"]').val(); console.log(name);
Form selector
ll: input matches any form element comprising: a text box (input) drop-down list (select), the text field (TextArea)
ll: text matching line text boxes
ll: password matches the one-way password box
ll: radio radio buttons match
ll: checkbox match checkboxes: submit submit button matching $ ( ": submit")
ll: reset button to reset the Match
ll: image matching picture button
ll: button matching push button
ll: file matching file upload
ll: hidden hidden field if you want to match to match hidden form field must be coupled with input labels such as: $ ( "input: hidden")
// sheet selectors var INPUT = $ ( ": text" ) .val (); the console.log (INPUT); var pwd = $ ( ": password" ) .val (); the console.log (pwd);
Using a form attribute selector
ll: enabled match form controls available
ll: disabled matching form control unavailable
ll: checked to match the selected radio buttons and checkboxes
ll: selected to match the selected drop-down list
DOM objects and objects jquery
Find objects by the way native dom is the object, the object is found by the method jquery jquery object, jquery contains objects dom, DOM objects added by way of array elements in the jQuery object.
DOM objects and each object is converted jquery
function Test () { // jQuery object containing the object dom var obj = document.getElementsByTagName ( 'div'); // by native dom way to find the object subject console.log ($ (obj) .html ( )); // DOM => $ a way jquery (DOM objects); var obj = $ ( "div"); // the object is found by the method jquery jquery object console.log ($ (obj) .get ( 0) .innerHTML); // jQuery => $ first method of DOM (jQuery objects) .get (subscript) the console.log ($ (obj) [2] .innerHTML); // jQuery => second DOM $ method (jQuery object). [index] }
Two ways to achieve interlaced color change form
<html> <meta charset="utf-8"/> <head><title>表格</title></head> <body> <button onclick="color()">原生换色</button> <button onclick="jcolor()">jquery换色</button> <table cellspacing=0 border=1> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td></333td> <td>333</td> <td>333</td> </tr> <tr> <td>444</td> <td>444</td> <td>444</td> </tr> </table> </body> </html> <script type="text/javascript" src="Jqery2.1.4.js"></script> <script type="text/javascript"> function color(){ //alert(1); var tr = document.getElementsByTagName('tr'); //console.log(tr); //console.log(tr[1].innerHTML); for(var i =0;i<tr.length;i++){ if(i%2==1){ tr[i].style.backgroundColor="red"; } if(i%2==0){ tr[i].style.backgroundColor="blue"; } } } function jcolor(){ //alert(1); //简单选择器 $("table tr:even").css("backgroundColor","green");//: even index matching value is even $ ( " Table TR: ODD " ) .css ( " the backgroundColor " , " Pink " ); // : ODD is an odd number matching subscript } </ Script >
effect:
Primeval 换色
jquery color change
