JQuery examples and important jQuery selectors are required.

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>