Understanding and using jQuery

1. What is jQuery

   It is a lightweight javascript library , a class of others written.

2. jQuery advantage

  2.1 is always set for
  more than 220 lines to one line set of operations 

 

  Note 1: For a class "jQuery", abbreviated "$"

3, import js library

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>

4, three types of procedures as well as the entrance of using the difference

/ * $ (The Fn) as the program entry 
   
   $ (fn), $ (document ) .ready (fn) the difference between the window.onload?   
   * /  
  
   The window.onload = function () { 
       Alert ( "Hello jQuery3" ); 
   } 
   
  $ (Document) .ready (function () { 
      Alert ( "Hello jQuery2" ); 
  }) 
  
    $ (function () { 
    Alert ( "Hello jQuery1 " ); 
    
  })

 Pop-up order: jQuery2 - jQuery1 - jQuery3

the difference:

   jQuery1 and jQuery2 who will come to run in front, jsp the dom tree loaded immediately call the method
   jQuery3 last run, jsp dom tree is finished loading, css, js and other static resources to load and then execute window.onload

5, jQuery several simple selector

 

<Script type = "text / JavaScript"> 

   $ (function () { 
       // use a label acquisition jquery Examples 
      / *   $ ( "a") the Click (function () {. 
           Alert ( "123"); 
       }); * / 
       // use jQuery instance id equal to a3 acquisition 
       / * $ ( "# a3") the Click (function () {. 
           Alert ( "123"); 
       }); * / 
       // use class to obtain a value equal to c1 jquery example 
       / * $ (. "C1") the Click (function () {. 
           Alert ( "123"); 
       }); * / 
       // acquires jquery contains examples of the use form 
      / *   . $ ( "PA") the Click (function ( ) { 
           Alert ( "123"); 
       });
       * /        
       // combination selector 
       / *. $ ( "a, span") the Click (function () { 
           Alert ( "123"); 
       }); * / 
       // action of the second argument (to find a tag inside the div tag, and then added to the label Found event)
        // if the second parameter is not filled, then the default is Document 
       $ ( "A", "div" ) .click (function () { 
           Alert ( "123" ); 
       }); 
       
   })


 </ Script>

 

JQuery 5.1 to an instance of an additional jsp code by clicking on the event

 

$ (function () { 
      $ ( ": INPUT [name = 'NAME1']" ) .click (function () {
           // on jquery select the instance id = selId1 additional "<option value = '1' > Hunan Province </ option> "examples of html jquery 
         $ (" # selId1 ") append . (" <option value = '1'> Hunan </ option> " ); 
      }); 
      $ ( ": INPUT [name = ' NAME2 '] " ) .click (function () {
           // the" <option value =' 1 ' > Changsha </ option> "appended to the HTML jquery instance id = selId2 the select tag jquery example 
          $ (" <option value = '1'> Changsha </ Option> ") the appendTo (." # selId2 " ); 
    
      })

 

Page displays:

6, jQuery js with the system conversion

 // jQuery object-js objects 
          var h1Node h1.get = $ (0 ); 
          var h1Node = $ h1 of [0 ]; 
          Alert (h1Node.value); * / 
          
          var h2Node = document.getElementById ( "H2" ); 
             Alert ( h2Node.value); 
             // JS object-jquery object 
            var $ h2Node = $ (h2Node); 
             Alert (h2Node.val ());

   jQuery is a class;

   js is a structural element (element)

 

Action 7, this pointer

$ (function () { 
        $ ( ": INPUT" ) .click (function () {
             // refers to an event source 
            Alert ( the this .Value); 
            $ ( "A" ) .each (function (index, Item) {
                 // means that the current element 
                Alert (index + "," + $ ( the this ) .html () + "," + $ (Item) .html ()); 
            }); 
            
        }); 
    })

8, $. Extend and $ .fn.extend

$ .Extend is used to expand the class property or method jquery

     jsonObj2 = {} var; 
     // expanded behind the first object with the object 
     //$.extend(jsonObj2,jsonObj1); 
     attribute value // value coverage extension issue, previously covered by the expansion will be behind the object, If the new object is behind the property will continue to expand 
     $ .extend (jsonObj2, jsonObj1, jsonObj3); 
     the console.log (jsonObj2); 
     
     $ .extend ({ 
      Hello: function () { 
       Alert ( "Hello"); 
      } 
     } ); 
     $ .hello ();

$ .Fn.extend extended attribute is used or the method used in example jquery

$.fn.extend({
            sayHello:function(){
                alert("nihao");
            }
        });
        
        $("#yellow").sayHello();
        alert("yellow");

Use the mouse events to achieve automatic replacement class style

<style type="text/css">
.fen{
   background:#ff66ff;
}
.yello{
   background:#ffff66;
}
.red{
   background:#ff3333;
}
</style>

<script type="text/javascript">

 $(function(){
     $("table tr:eq(0)").addClass("yello");
     $("table tr:gt(0)").addClass("red");
     
     $("table tr:gt(0)").hover(function(){
      $(this).removeClass().addClass("fen");
     },
     function(){
       $(this).removeClass().addClass("red");
     });
     
    })

</script>

jsp page display

Please ignore the data show the problem, we look at the effect

 

 

9, simple use of ajax

 

1.1 What is Jackson
Jackson is a simple Java-based application library, Jackson can easily convert Java objects into xml json objects and documents, also can convert json, xml into Java objects.

 

1.2 core code
// JSON core operations, all of Jackson JSON operations are implemented in the ObjectMapper

 

ajax conversion

 

 

Map <String, String> STU = new new hashMap '<> (); 
    stu.add ( "M 1", "peas" ); 
    stu.add ( "M 2", "bean" ); 
    ObjectMapper Mapper = new new ObjectMapper ( ); // into json form 
   System.out.print (mapper.writeValueAsString (obj);) ;