JQuery的常見用法，一個後端的認知

1，Jquery版本的選擇javascript

目前jQuery有三個大版本：
1.x：兼容ie678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，通常不會使用3.x版本的，不少老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。php

So，此處筆者選用1.x，1.8.3html

2，Jquery用法java

2.1 後端使用jquery最多的也就是ajax了jquery

2.1.1 $.ajax　　　　ajax

$.ajax({
    url:'/comm/test1.php',
    type:'POST', 　　　　　　　　  //GET(GET時沒有data參數)
    async:true,    　　　　　　　　//或false,是否異步
    data:{
        name:'yang',age:25
    },
    timeout:5000,    　　　　　　　//超時時間
    dataType:'json',    　　　　　//返回的數據格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('發送前')
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log('錯誤')
        console.log(xhr)
        console.log(textStatus)
    }
})

2.1.2 $.getjson

$.get("test.php", function(data){
　　alert(data);
});

2.1.3 $.post後端

  $.post("action.php",{email:$('#email').val(),address:$('#address').val()},function(data){
    alert(data);
  },"text");//這裏返回的類型有：json,html,xml,text

2.2 Jquery選擇器數組

1、選擇網頁元素jQuery的基本設計和主要用法，就是"選擇某個網頁元素，而後對其進行某種操做"。這是它區別於其餘函數庫的根本特色。瀏覽器

　　　　使用jQuery的第一步，每每就是將一個選擇表達式，放進構造函數jQuery()(簡寫爲$)，而後獲得被選中的元素。

選擇表達式能夠是CSS選擇器：

1 $(document)//選擇整個文檔對象
2 $('#myId')//選擇ID爲myId的網頁元素  
3 $('div.myClass')//選擇class爲myClass的div元素    
4 $('input[name=first]')//選擇name屬性等於first的input元素

也能夠是jQuery特有的表達式：

 
      1 
      $('a:first')//選擇網頁中第一個a元素  
     
      2 
       $('tr:odd')//選擇表格的奇數行  
     
      3 
       $('#myForm :input')//選擇表單中的input元素  
     
      4 
       $('div:visible') //選擇可見的div元素  
     
      5 
       $('div:gt(2)')//選擇全部的div元素，除了前三個  
     
      6 
       $('div:animated')//選擇當前處於動畫狀態的div元素

2、改變結果集

若是選中多個元素，jQuery提供過濾器，能夠縮小結果集：

1 $('div').has('p'); //選擇包含p元素的div元素  
2 $('div').not('.myClass'); //選擇class不等於myClass的div元素  
3 $('div').filter('.myClass'); //選擇class等於myClass的div元素  
4 $('div').first(); //選擇第1個div元素  
5 $('div').eq(5); //選擇第6個div元素

有一些時候，咱們須要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：

1 $('div').next('p'); //選擇div元素後面的第一個p元素  
2 $('div').parent(); //選擇div元素的父元素  
3 $('div').closest('form'); //選擇離div最近的那個form父元素  
4 $('div').children(); //選擇div的全部子元素  
5 $('div').siblings(); //選擇div的同級元素

3、鏈式操做

選中網頁元素之後，就能夠對它進行某種操做。

jQuery容許將全部操做鏈接在一塊兒，以鏈條的形式寫出來，好比：

1 $('div').find('h3').eq(2).html('Hello');

咱們能夠這樣拆封開來，就是下面這樣：

1 $('div')//找到div元素  
2 .find('h3')//選擇其中的h3元素  
3 .eq(2)//選擇第3個h3元素  
4 .html('Hello'); //將它的內容改成Hello

這是jQuery最使人稱道、最方便的特色。它的原理在於每一步的jQuery操做，返回的都是一個jQuery對象，因此不一樣操做能夠連在一塊兒。

jQuery還提供了.end()方法，使得結果集能夠後退一步：

1 $('div')  
2 .find('h3')  
3 .eq(2)  
4 .html('Hello')  
5 .end()//退回到選中全部的h3元素的那一步  
6 .eq(0)//選中第一個h3元素  
7 .html('World'); //將它的內容改成World

4、元素的操做：取值和賦值

操做網頁元素，最多見的需求是取得它們的值，或者對它們進行賦值。

jQuery使用同一個函數，來完成取值(getter)和賦值(setter)。究竟是取值仍是賦值，由函數的參數決定。

 
      01 
      $('h1').html(); //html()沒有參數，表示取出h1的值 
     
      02 
      $('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值  
     
      03 
      常見的取值和賦值函數以下： 
     
      04 
      .html()  
     
      05 
      .text() 取出或設置text內容  
     
      06 
      .attr() 取出或設置某個屬性的值  
     
      07 
      .width() 取出或設置某個元素的寬度  
     
      08 
      .height() 取出或設置某個元素的高度  
     
      09 
      .val()  
     
      10 
      取出或設置html內容 取出某個表單元素的值

取出或設置html內容取出某個表單元素的值

　　　　須要注意的是，若是結果集包含多個元素，那麼賦值的時候，將對其中全部的元素賦值;取值的時候，則是隻取出第一個元素的值(.text()例外，它取出全部元素的text內容)。

5、元素的操做：移動

　　　　若是要移動選中的元素，有兩種方法：一種是直接移動該元素，另外一種是移動其餘元素，使得目標元素達到咱們想要的位置。

假定咱們選中了一個div元素，須要把它移動到p元素後面。

第一種方法是使用.insertAfter()，把div元素移動p元素後面：

$('div').insertAfter('p');

第二種方法是使用.after()，把p元素加到div元素前面：

$('p').after('div');

　　　　表面上看，這兩種方法的效果是同樣的，惟一的不一樣彷佛只是操做視角的不一樣。可是實際上，它們有一個重大差異，那就是返回的元素不同。第一種方法返回div元素，第二種方法返回p元素。你能夠根據須要，選擇到底使用哪種方法。

使用這種模式的操做方法，一共有四對

1 .insertAfter()和.after()：在現存元素的外部，從後面插入元素  
2 .insertBefore()和.before()：在現存元素的外部，從前面插入元素  
3 .appendTo()和.append()：在現存元素的內部，從後面插入元素  
4 .prependTo()和.prepend()   
5 ：在現存元素的內部，從前面插入元素

6、元素的操做：複製、刪除和建立

複製元素使用.clone()。

　　　　刪除元素使用.remove()和.detach()。二者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於從新插入文檔時使用。

清空元素內容(可是不刪除該元素)使用.empty()。

建立新元素的方法很是簡單，只要把新元素直接傳入jQuery的構造函數就好了：

1 $('<p>Hello</p>');  
2 $('<li class="new">new list item</li>');  
3 $('ul').append('<li>list item</li>');

7、工具方法

　　　　除了對選中的元素進行操做之外，jQuery還提供一些工具方法(utility)，沒必要選中元素，就能夠直接使用。

　　　　若是你懂得Javascript語言的繼承原理，那麼就能理解工具方法的實質。它是定義在jQuery構造函數上的方法，即jQuery.method()，因此能夠直接使用。而那些操做元素的方法，是定義在構造函數的prototype對象上的方法，即jQuery.prototype.method()，因此必須生成實例(即選中元素)後使用。若是不理解這種區別，問題也不大，只要把工具方法理解成，是像javascript原生函數那樣，能夠直接使用的方法就好了。

經常使用的工具方法有如下幾種：

 1 $.trim() 去除字符串兩端的空格。  
 2 $.each() 遍歷一個數組或對象。  
 3 $.inArray() 返回一個值在數組中的索引位置。若是該值不在數組中，則返回-1。  
 4 $.grep() 返回數組中符合某種標準的元素。   
 5 $.extend() 將多個對象，合併到第一個對象。   
 6 $.makeArray() 將對象轉化爲數組。  
 7 $.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。  
 8 $.isArray() 判斷某個參數是否爲數組。  
 9 $.isEmptyObject() 判斷某個對象是否爲空（不含有任何屬性）。  
10 $.isFunction() 判斷某個參數是否爲函數。  
11 $.isPlainObject() 判斷某個參數是否爲用"{}"或"new Object"創建的對象。  
12 $.support() 判斷瀏覽器是否支持某個特性。

8、事件操做

jQuery能夠對網頁元素綁定事件。根據不一樣的事件，運行相應的函數。

1 $('p').click(function(){  
2 alert('Hello');  
3 });

目前，jQuery主要支持如下事件：

 1 .blur() 表單元素失去焦點。  
 2 .change() 表單元素的值發生變化  
 3 .click() 鼠標單擊  
 4 .dblclick() 鼠標雙擊  
 5 .focus() 表單元素得到焦點  
 6 .focusin() 子元素得到焦點  
 7 .focusout() 子元素失去焦點  
 8 .hover() 同時爲mouseenter和mouseleave事件指定處理函數  
 9 .keydown() 按下鍵盤（長時間按鍵，只返回一個事件）  
10 .keypress() 按下鍵盤（長時間按鍵，將返回多個事件）  
11 .keyup() 鬆開鍵盤  
12 .load() 元素加載完畢  
13 .mousedown() 按下鼠標  
14 .mouseenter() 鼠標進入（進入子元素不觸發）  
15 .mouseleave() 鼠標離開（離開子元素不觸發）  
16 .mousemove() 鼠標在元素內部移動  
17 .mouseout() 鼠標離開（離開子元素也觸發）  
18 .mouseover() 鼠標進入（進入子元素也觸發）  
19 .mouseup() 鬆開鼠標  
20 .ready() DOM加載完成  
21 .resize() 瀏覽器窗口的大小發生改變  
22 .scroll() 滾動條的位置發生變化  
23 .select() 用戶選中文本框中的內容  
24 .submit() 用戶遞交表單  
25 .toggle() 根據鼠標點擊的次數，依次運行多個函數  
26 .unload()  用戶離開頁面

以上這些事件在jQuery內部，都是.bind()的便捷方式。使用.bind()能夠更靈活地控制事件，好比爲多個事件綁定同一個函數：

1 $('input').bind(  
2 'click change'， //同時綁定click和change事件  
3 function(){  
4 alert('Hello');  
5 }  
6 );

若是你只想讓事件運行一次，這時可使用.one()方法。

1 $("p").one("click"， function(){  
2 alert("Hello"); //只運行一次，之後的點擊不會運行  
3 });

.unbind()用來解除事件綁定。

$('p').unbind('click');

全部的事件處理函數，均可以接受一個事件對象(event object)做爲參數，好比下面例子中的e：

1 $("p").click(function(e){  
2 alert(e.type); //"click"  
3 });

這個事件對象有一些頗有用的屬性和方法：

 1 event.pageX 事件發生時，鼠標距離網頁左上角的水平距離
 2 
 3 event.pageY 事件發生時，鼠標距離網頁左上角的垂直距離
 4 
 5 event.type 事件的類型(好比click)
 6 
 7 event.which 按下了哪個鍵
 8 
 9 event.data 在事件對象上綁定數據，而後傳入事件處理函數
10 
11 event.target 事件針對的網頁元素
12 
13 event.preventDefault() 阻止事件的默認行爲(好比點擊連接，會自動打開新頁面)
14 
15 event.stopPropagation() 中止事件向上層元素冒泡

在事件處理函數中，能夠用this關鍵字，返回事件針對的DOM元素：

1 $('a').click(function(){  
2 if ($(this).attr('href').match('evil')){//若是確認爲有害連接  
3 e.preventDefault(); //阻止打開  
4 $(this).addClass('evil'); //加上表示有害的class  
5 }  
6 });

有兩種方法，能夠自動觸發一個事件。一種是直接使用事件函數，另外一種是使用.trigger()或.triggerHandler()。

1 $('a').click();
2 $('a').trigger('click');

9、特殊效果

jQuery容許對象呈現某些特殊效果。

$('h1').show(); //展示一個h1標題

經常使用的特殊效果以下：

 1 $('h1').show(); //展示一個h1標題 
 2 經常使用的特殊效果以下：
 3 .fadeIn() 淡入
 4 .fadeOut() 淡出
 5 .fadeTo() 調整透明度
 6 .hide() 隱藏元素
 7 .show() 顯示元素
 8 .slideDown() 向下展開
 9 .slideUp() 向上捲起
10 .slideToggle() 依次展開或捲起某個元素
11 .toggle() 依次展現或隱藏某個元素

除了.show()和.hide()，全部其餘特效的默認執行時間都是400ms(毫秒)，可是你能夠改變這個設置。

1 $('h1').fadeIn(300); // 300毫秒內淡入  
2 $('h1').fadeOut('slow'); //緩慢地淡出

在特效結束後，能夠指定執行某個函數。

$('p').fadeOut(300, function(){$(this).remove(); });

更復雜的特效，能夠用.animate()自定義。

1 $('div').animate(  
2 {  
3 left : "+=50"，//不斷右移  
4 opacity : 0.25 //指定透明度  
5 },
6 300,// 持續時間  
7 function(){ alert('done!'); }//回調函數  
8 );

.stop()和.delay()用來中止或延緩特效的執行。

$.fx.off若是設置爲true，則關閉全部網頁特效。

部分引用於http://www.cnblogs.com/Look_Sun/p/3186592.html