JQuery examples and important jQuery selectors are required.
What can Jquery do?
Access and operate DOM elements
Control page styles
Process page events
New jQuery Extension
Perfect Combination with Ajax technology
Advantages of Jquery
Small Size, only about KB after compression
L powerful Selector
Excellent DOM Encapsulation
L reliable event processing mechanism
Excellent browser compatibility
Simplified programming using implicit Iteration
Rich plug-ins
Decomposition of jQuery knowledge:
1. Differences between window. onload and $ (function () {})
Resolution: window. onload is executed only after all resources (html tags, css, img, and js) on the page are loaded, including (text materials, images, js, and css)
$ (Function () {}): Wait until the tag material on the page is loaded.
Second point:
Window. onload can only be called once
$ (Function () {}) can be called multiple times
2. How to Set styles through Jquery
12.16.$$( ))))). CSS ("attribute name", "attribute value ");
// The attribute names written here are the same as those written in css.
22.16.html (): gets the html code between two tags.
3). $ ("selector"). addClass ("attribute value ")
The dom document structure can be dynamically changed. Then set the style.
3. Conversion of DOM objects and Jquery objects
Convert a jquery object to a dom object
Jquery provides two methods to convert a jquery object into a dom object, that is, [index] And get (index ).
Ar $ cr = $ ("# cr"); // jquery object
Var cr = $ cr [0]; // The dom object can also be written as var cr = $ cr. get (0 );
Alert (cr. checked); // checks whether the checkbox is selected.
Convert a dom object to a jquery object
For a dom object, you only need to wrap the dom object with $ () to obtain a jquery object. The method is $ (dom object );
Code:
Var cr = document. getElementById ("cr"); // dom object
Var $ cr = $ (cr); // convert to jquery object
Case study of beam effect:
Js Code:
$(function () { var lis = document.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function () { this.style.background = 'red'; }; lis[i].onmouseout = function () { this.style.background = ''; } } });
JQuery code:
$(function () { $('li').mouseover(function () { $(this).css('background','red'); }).mouseout(function () { $(this).css('background', ''); }) });
JQuery waterfall Stream case:
<Script> var margin = 10; // set the spacing var li = $ ("li") here; // The Block name var li_W = li [0]. offsetWidth + margin; // obtain the actual width of the block (including the spacing. Here, the offsetWidth function generated by the source is used. The width () function of jQuery is not applicable because it cannot obtain the actual width, for example, if pandding exists in the element, it will not work.) function liuxiaofan () {// defines it as a function to facilitate the call of var h = []; // records the array var n = document.doc umentElement of the block height. offsetWidth/li_W | 0; // The window width divided by the block width means that several blocks can be placed in a row (var I = 0; I <li. length; I ++) {// li_H = li [I]. offsetHeight; // obtain the height of each li. if (I <n) {// n is the most li in a row, so less than n is the first line with h [I] = li_H; // put each li in the array li.eq(i2.16.css ("top", 0); // The top value of Li in the first line is 0 li.eq(i2.16.css ("left", I * li_W ); // The left coordinate of the I-th li is the width of I * li} else {min_H = Math. min. apply (null, h); // obtain the minimum value in the array. The minKey = getarraykey (h, min_H) with the smallest height value in the block ); // pointer h [minKey] + = li_H + margin corresponding to the smallest value; // after adding the new height, the height value li.eq( I ).css ("top", min_H + margin) is updated ); // first obtain the smallest Li, and then put the following li under it. li.eq(iyun.css ("left", minKey * li_W ); // The left coordinate of the I-th li is the width of the I * li} $("h3 "). eq (I ). text ("No.:" + I + ", height:" + li_H ); // write the block sequence number and its height value to the corresponding block H3 title}/* use the for in operation to return the number of corresponding items of a value in the array (for example, to calculate the minimum height value) is the number in the array) */function getarraykey (s, v) {for (k in s) {if (s [k] = v) {return k ;}}} /* onload must be used here, because the image is not loaded and the height value is unknown */window. onload = function () {liuxiaofan () ;};/* run the function when the browser window is changed */window. onresize = function () {liuxiaofan () ;}; </script>
JQuery Selector
Resolution: To better or faster find the type of tag we need from the complex DOM tree
1. Hierarchical Selector
<! -- When you click the h2 element, add a color background of # 09F to the <span> element under # menu --> <! -- <Script type = "text/javascript"> $ (function () {$ ('h2 '). click (function () {$ ('# menu span'background .css ('background-color',' # 09f') ;}); </script> -->
2. Basic Selector
<! -- Add a style for the tag selector --> <script type = "text/javascript" >$ (function () {$ ('h2 '). click (function () {response ('h3'background .css ('background-color', '# 09f') ;}); </script>
3. Basic filter Selector
<Script type = "text/javascript"> $ (function () {$ ('h2 '). click (function () {// $ ('li: first'background .css ('background-color', '# 09f'); // The first one // $ ('li: last'background .css ('background-color', '# 09f'); // The Last One // $ ('li: not(.three+'background .css ('background-color',' # 09f '); // elements whose class is not three // $ ('li: even'background .css ('background-color', '# 09f '); // element with an even index value // $ ('li: eq(1'' background .css ('background-color', '# 09f '); // element whose index value is 1 // $ ('li: gt(1'' background .css ('background-color', '# 09f '); // element with an index value greater than 1 // $ ('li: lt(1'' background .css ('background-color', '# 09f '); // element whose index value is less than 1 // $ (': header'background .css ('background-color',' # 09f'); // element of all titles $ (': focus'background .css ('background-color', '# 09f'); // elements that obtain the focus}) ;}</script>
4. Visibility filter Selector
<Script src = "js/jquery-1.8.3.js"> </script> <script type = "text/javascript"> $ (function () {// $ ('P: den den '). show (); // display text $ ('P: visable '). hide (); // hide text}); </script> <style type = "text/css"> # txt_show {display: none; color: # 00C ;} # txt_hide {display: block; color: # F30 ;}</style>
5. Attribute Selector
<! -- Change the value of the class attribute to the background color of the odds element --> <script type = "text/javascript" >$ (function () {$ ("h2 "). click (function () {$ ("[class = odds]" ground .css ("background-color", "# FFFFFF") ;}); </script>