Examples of jquery and essential jquery Selector details _jquery

What can jquery do?

Accessing and manipulating DOM elements

Controlling page Styles

Handling Page Events

Extend the new jquery plugin

Perfect combination with Ajax technology

The advantage of jquery

Small size, only about 100KB after compression

L A powerful selector

Excellent DOM encapsulation

• Reliable event-handling mechanisms

Excellent browser compatibility

Simplifying programming with implicit iterations

Rich support for Plug-ins

Decomposition of the knowledge of jquery:

1. About window.onload and $ (function () {}) Differences

Parsing: Window.onload waits for all resources on the page (HTML tags, css,img,js) to be loaded before execution, including (text footage, pictures, js,css)

$ (function () {}): Waits for the label material on the page to finish loading and start execution

2nd:

Window.onload can only be called once

$ (function () {}) can be invoked multiple times

2. How to set the style through jquery

1. Through $ ("selector"). CSS ("Property name", "property value");

The written attribute name here is consistent with the writing in CSS

2. $ ("selector"). HTML (): Get the HTML code between two tags

3. $ ("selector"). AddClass ("Property value")

The DOM document structure can be changed dynamically. And then set the style.

Conversion of 3.DOM objects and jquery objects

jquery object converted to DOM object

jquery provides two ways to convert a jquery object into a DOM object, that is, [index] and get (index).

Ar cr= cr= ("#cr"); jquery objects
var cr = $CR [0]; Dom objects can also be written as Var cr= $cr. Get (0);
alert (cr.checked); Check to see if this checkbox is checked

Dom object converted to jquery object

For a DOM object, you can get a jquery object by wrapping the DOM object with $ (), which means $ (DOM object);

Code:

var Cr=document.getelementbyid ("Cr"); Dom Object
var cr= cr= (CR); Convert to jquery Object

Light Rod Effect Case:

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 Flow Case:

<script> var margin = 10;//set spacing here var li = $ ("li");//Here is the block name var li_w = li[0].offsetwidth + margin;//The actual width of the chunk
    (contains spacing, where the source-born offsetwidth function is not applicable because the width () function of jquery does not apply because it does not get the actual width, such as pandding in the element) function Liuxiaofan () {//defined as a function for easy invocation var h = [];//record block height array var n = document.documentelement.offsetwidth/li_w | The width of the 0;//window divided by the width of the block is one row can put several blocks for (var i = 0; i < li.length i++) {//How many li on the cycle li_h = li[i].offsetheight;//get every The height of an li (i < n) {//n is the most Li in one row, so less than N is the first line h[i] = li_h;//put each li into an array li.eq (i). CSS ("top", 0);//First line The top value of li is 0 li.eq (i). CSS ("left", I * li_w);//The left-hand coordinate of the first Li is the width of I*li} else {min_h = Math.min.apply (null, h);//Get the smallest value in the array, the Minkey = Getarraykey (h, Min_h) with the lowest height value in the Block;//The smallest value corresponds to the pointer h[minkey] + = Li_h + margin;//  Add a new height and update the height value li.eq (i). CSS ("top", Min_h + margin);//First get the height of the smallest Li, and then put the next Li under its li.eq (i). CSS ("left", Minkey *  LI_W); The left coordinate of the first Li is the width of I*li} $ ("H3"). EQ (i). Text ("No.:"+ i +", Height: "+ li_h")//write the serial number of the block and its height value into the corresponding block H3 header}/* Use the for in operation to return the number of entries for a value in the array (for example, to calculate the minimum height value is the first of the array) * * * FUNCTI
  On Getarraykey (S. V) {for (k in s) {if (s[k) = v) {return k;}}}
  /* Here must use the onload, because the picture does not load up do not know the height value */window.onload = function () {Liuxiaofan ();};
* * Browser window changes also run the function/window.onresize = functions () {Liuxiaofan ();}; </script>

jquery Selector

Parsing: To better or faster find the kind of tags we need from a complex DOM tree

1. Hierarchy Selector

<!--When you click the H2 element, add the color background for the <span> element under #menu to #09f-->
  <!--<script type= "Text/javascript" >
    $ (function () {
      $ (' H2 '). Click (function () {
        $ (' #menu span '). CSS (' Background-color ', ' #09F ');
      }
  ); </script>-->

2. Basic Selector

<!--add a style to the tag Selector-->
  <script type= "Text/javascript" >
    $ (function () {
      $ (' H2 '). Click ( function () {
        $ (' H3 '). CSS (' Background-color ', ' #09F ');
       
      }
  ); </script>

3. Basic Filter Selector

<script type= "Text/javascript" >
    $ (function () {
      $ (' H2 '). Click (function () {
        //$ (' Li:first '). CSS (' Background-color ', ' #09F ');/the first
        //$ (' Li:last '). CSS (' Background-color ', ' #09F ');//The Last
        //$ (' Li:not. three). css (' Background-color ', ' #09F ');//class is not three element
        //$ (' Li:even '). CSS (' Background-color ', ' #09F '); An element of an even number
        //$ (' Li:eq (1) '). CSS (' Background-color ', ' #09F ');//element//$ with index value 1
         (' li:gt (1) '). CSS (' Background-color ', ' #09F '); the element
        //$ (' li:lt (1) ') with the index value greater than 1. CSS (' Background-color ', ' #09F '), element//$ with index value less than 1
        ( ': Header '). css (' Background-color ', ' #09F ');//The element of all headings
        $ (': Focus '). css (' Background-color ', ' #09F ');//Get focus Element

      });
    });
  </script>

4. Visibility Filter Selector

<script src= "Js/jquery-1.8.3.js" ></script>
  <script type= "Text/javascript" >
    $ (function ( ) {
      //$ (' P:hidden '). Show ()//Display text
      $ (' p:visible '). Hide ();//Hidden text
    });
  </script>
  <style type= "Text/css" >
    #txt_show
    {
      display:none;color: #00C;
    }
    #txt_hide
    {
      display:block;color: #F30;
    }
  </style>
 
 

5. Property Selector

<!--the background color-->
   <script type= "Text/javascript" >
     $ (function () {
       $ ("H2") of the odds element is changed by the value of the class attribute. Click (function () {
         $ (' [Class=odds] '). CSS ("Background-color", "#FFFFFF");
       })
     ;
  </script>

The above examples of jquery and the important jquery selector is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.