jQuery 知識整理

核心語法：  全局函數： jQuery()  快捷鍵： $


鏈式調用： $("p").css("bacnkground-color","yellow") 獲取所有 p 元素並調整css 中的背景色爲黃色

學習筆記：


1： 基礎部分


選擇網頁元素：


選擇表達式爲CSS 選擇器：
${document} // 選擇整個文檔對象
${'#myId'}  // 選擇ID 爲 myId 的網頁元素
${'div.myClass'}  //選擇class爲myClass 的div元素
${'input[name=first]'}   // 選擇name屬性等於first的input元素

選擇表達式爲jQuery 特有表達式：
${'a.first'}  // 選擇網頁中第一個a元素
${'tr:odd'}  // 選擇表格的奇數行
${'#myForm :input'}  // 選擇表單中的input元素
${'div:visible'}  // 選擇可見的div
${'div:gt(2)'}    // 選擇所有的div元素 除了前三個
${'div:animated'}   //選擇當前處於動畫狀態的div元素

改變結果集 -- 強大的過濾器

$('div').has('p')  // 選擇包含p 元素的div元素
$('div').not('.myClass')   // 選擇class 不等於 myClass 的div元素
$('div').filter('.myClass')  // 選擇class = myClass 的div元素
$('div').dirst()   // 選擇第一個div 元素
$('div').eq(5)     // 選擇第六個div元素
$('div').find('h3')  選擇 div中的 h3 元素

選擇附近相關元素  從結果集出發
$('div').next('p')  // 選擇 div元素後面的第一個 p 元素
$('div').parent()    // 選擇 div 元素的父元素
$('div').closest('form')    //選擇離div最近的form 父元素
$('div').children()       //選擇 div 的所有子元素
$('div').siblings()      // 選擇div的同級元素

鏈式操作：
    　　$('div').find('h3').eq(2).html('Hello');  // 找到 div 中 h3 元素的 第三個元素並改信息爲 Hello 
最讚的，每一步都返回一個jQuery 對象  不同操作可以連接在一起
.end()  回退一步

元素的操作：  取值和賦值   jQuery設計思想之四  就是使用同一個函數來完成取值和賦值

$('h1').html()   // htlm 沒有參數 表示取出 h1 的 值
$('h1').html('hello')   //  html 有參數 表示賦值 hello 給 h1

常見的取值和賦值函數：
.html()   // 設置或返回所選元素的內容（包括 HTML 標記）
.text()  // 設置或返回所選元素的文本內容
.attr()   // 取出或設置某個屬性的值
$("#submit").attr({ disabled: "disabled" });  禁用提交按鈕防止重複提交
.width()  // 取出或設置某個元素的寬度
.height()    // 取出或設置某個元素的高度
.val() - 設置或返回表單字段的值

最好元素定義ID  這樣就可以通過 $('#idName').html()  來訪問元素對象
注意： 如果結果集包含多個元素 那麼賦值的時候將對所有元素都賦值，取值的時候只取第一個元素的值

元素的操作-- 移動：
兩種方式：   1  $('div').insertAfter($('p'))   把  div元素移到 p 元素的後面   這裏返回 div 元素
2  $('p').after($('div'))    把 p 元素放在 div 元素的前面     這裏返回 p 元素

四對：  insertAfter/after 現存元素外部
insertBefore/before   現存元素外部
appendTo/append       現存元素內部
prependTo/prepend     現存元素內部

元素複製： .clone()
元素刪除： .remove() /  .detach()  不同 前者不保留被刪除元素的事件  後者保留
元素創建： 　$('<p>Hello</p>');

工具方法：  定義在 jQuery 構造函數上的方法，可以直接使用   jQuery.method()
其他方法定義在 構造函數的 prototype 對象上的方法，jQuery.prototype.method() 必須生成實例(選中元素) 才能使用

$.trim() 去掉空格
$.each() 便利一個數組或對象
$.inArray() 返回一個值在索引位置 沒有返回-1
$.grep() 返回數組中符合某種標準的元素
$.extends() 將多個對象合併到第一個對象中
$.makeArray()  將對象轉化爲數組
$.type() 判斷對象類別
$.isArray() 是否數組
$.isEmptyObject() 是否空對象
$.isFunction() 是否函數



事件操作：  注意 當元素採用 id= 時 使用 $('#id')   如果是 class="className" 使用 $(".className") 來獲取值
$(document).ready(function()  當頁面全部加載完才調用 推薦使用這個 不然有些事件不一定能夠執行

.click()  鼠標單擊觸發事件
.slideUp(毫秒)  點擊後元素消失(一般配合 click使用)
.slideDown(毫秒)  點擊後元素出現(一般配合 click使用)
.change() 在某個域被使用或者改變時觸發事件
.dblclick() 鼠標雙擊觸發事件
.focus() 表單元素獲取焦點時觸發事件  如 $("input").focus(function(){});
$("input").css("background-color","#FFFFCC")  改變元素的顏色
.focusin() 當前面的元素或者其下的子元素獲取焦點時觸發事件
.focusout() 當前面的元素或者子元素失去焦點時觸發的事件 
.hover  鼠標指針懸停觸發事件
.ready()  DOM 加載完成
.select()  選取輸入框的文本時觸發事件
.submit()  submit 表單被提交時觸發的事件
.toggle() 方法用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。
語法： $(selector).toggle(function1(),function2(),functionN(),...)

$("p").one("click", function() {});  想讓事件只運行一次 可以使用 .one() 方法
.bind() 綁定事件方法，可以同時綁定多個事件
如 $('input').bind('click change',function() {alert('Hello');});    //同時綁定click和change事件
.unbind() 解除事件綁定  $('p').unbind('click');

.hide() 隱藏參數包含  1 slow 緩慢隱藏
  2 fast 快速隱藏
  3 normal 正常速度
  4 毫秒 延緩指定時間隱藏
注意 這裏有個 callback 函數 即當動畫完成後調用  
語法爲： .hide("slow",function(){其他事件});

.show() 顯示元素  和 hide 正好相反
如果想一個按鈕顯示和隱藏兩個功能都要 請使用 .toggle

反向在html 元素 中獲取 script 內的var值
如 <script type="text/javascript"> var demo = "123"</script>
html 元素內獲取  <p><script type="text/javascript">document.write(demo)</script></p> 

2： ajax 部分 多種技術綜合    Ajax與服務器端語言無關。
XHTML  使用XMLHTTP組件XMLHttpRequest對象進行異步數據讀取
DOM（Document Object Model,文檔對象模型）實現動態顯示和交互；  
XML  一種描述數據的格式 AJAX 程序需要某種格式化的格式來在服務器和客戶端之間傳遞信息，XML 是其中的一種選擇
javascript 使用JavaScript綁定和處理所有數據


ajax 核心對象 XMLHttpRequest 和服務器的交互過程
初始化--> 發送請求--> 等待服務器相應--> 接受響應
步驟： 1 創建 XMLHttpRequest 對象
   2  使用 open 方法設置和服務端交互的相應參數，包括髮送請求的方式(get/post) 請求的URL 和是否異步交互
   3 使用 send 方法發送請求
   4 使用 onreadystatechange事件 監聽服務器端反饋，根據 readyState 屬性判斷和服務器端的交互是否完成
根據 status 屬性判斷服務器是否正確返回了數據，完成後接受server return data
更簡單的實現方法： jQuery


jQuery Ajax 方法：
selector：存放返回的數據的元素，示例中的<div id="message"></div>
URL：請求的地址
data：發送至服務器的 key-value 數據 json
callback： 請求完成後要執行的函數(不管請求成功或者失敗)

ajax 缺陷： 1 大量使用了javascript 和 ajax 引擎，需要瀏覽器支持，測試兼容性
2 ajax 更新的時候並沒刷新頁面，所以回退的功能是失效的。 需要添加 數據已更新的提示
3 對流媒體的支持不如flash java applet 好
4 對終端設備支持度較差



1  .load()  語法結構： $(selector).load(URL,data,callback)


   var userName = document.getElementById("UserName").value;  // 獲取用戶輸入
   
   //load()方法從服務器加載數據，並把返回的數據放入被選元素中。  
   get 方式：       $('#message').load("AJAX?name=" + userName);
   post 方式： $("#message").load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});
   
2： $.ajax  語法結構   $.ajax({name:value, name:value, ... }) 內部爲 k-v格式內容
$.ajax({
url:"UserServlet?method=findAccount",//傳入的servlet和對應的方法
type:"post",//提交方式
dataType:"json",//提交的數據爲json串
data:{"logname":$('#loginname').val()},//傳入的數據爲輸入的登錄名
});

內部的一些方法：
beforeSend(function(){});   //發送請求前運行的函數
或者  beforeSend: function (){},
$("#submit").attr({ disabled: "disabled" });  請求前禁用 提交按鈕 防止重複提交

async : 布爾值，表示請求是否異步處理。默認是 true。
complete(function(){},status);  請求完成時運行的函數（在請求成功或失敗之後均調用，即在 success 和 error 函數之後）
complete: function () {$("#submit").removeAttr("disabled");}, 請求後放開禁用的提交按鈕

contentType: 發送數據到服務器時所使用的內容類型。默認是："application/x-www-form-urlencoded"。
data: 發送的數據
error(function(){},status,error) 如果請求失敗運行的函數
success(function(){},status,sucess) 請求成功運行的函數
success: function (data){}, 這裏的data 就是返回的數據 Sucess 或者 Error
timeout 設置本地的請求超時時間
type： 規定請求的類型 get/post

3：$.get(URL,callback)  $.get() 方法通過 HTTP GET 請求從服務器上請求數據。

4： $.post(URL,data,callback)  $.post() 方法通過 HTTP POST 請求從服務器上請求數據。

不刷新頁面與服務器通訊的方式：
1：Flash
2：java applet
3: 使用框架  
4：隱藏的 iframe
配置 iframe
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
通過 iframe 的name 屬性 可以在任何地方加載iframe 指定頁面
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

5：XMLHttpRequest  該對象是對於 java script 的擴展，可使網頁與服務器通訊，是創建ajax 應用的最佳選擇。



全局ajax 處理程序： 都可以寫到內部ajax 方法體內
  $(document).ajaxComplete(function (event, xhr, settings) {
$('#dd').text("ajax 啓動完成 "+xhr1.responseText);
  });
  // ajax 錯誤觸發
  $(document).ajaxError(function (event,xhr,settings,error) {
$('#dd').text("ajax error = "+error.toString());
  });
  // ajax 請求發送前觸發
  $(document).ajaxSend(function (evetn,xhr,settings,error) {
  $('#cc').text("加載前觸發");
  });
  // ajax 請求發送時檢查是否還有其他未完成的ajax 請求  全局事件  1.9 以後綁定document
  $(document ).ajaxStart(function() {
$("#bb" ).text("ajax is start");
  });
  // ajax 請求結束後 檢查是否還有其他未完成的ajax請求 沒有的話會觸發
  $( document ).ajaxStop(function() {
$( "#bb" ).hide();
  });
  // ajax 運行完畢後觸發 注意 這裏觸發後才進行 ajax 後的下一步 類似於 ajax 內部的 success
  $(document).ajaxSuccess(function () {
alert('ajax 運行完成');
  });
輔助函數：
主要是序列化  $.param(obj)  obj 可以是 dom 對象 也可以是其他對象
ajax 方法詳解：
ajax 方法類型 $.ajax(url[,settings]) 返回的是一個 XMLHttpRequest 對象
url: String 類型的URL字符串
settings： PlantObject 一個以鍵值組成的ajax請求設置，所有選項都是可選。可以使用 $.ajaxSetup() 設置任何默認

-------------------------------------消息類型設置

1： accepts  一個鍵值對集合映射給定的dataType 到其的MIME類型，可以從發送accept 請求頭信息中獲得。
意思就是告訴服務器我能接受什麼類型數據
2： dataType  告訴服務器我想要什麼類型的數據，沒有指定的話自動推斷  XML JSON Script  String
如  dataType: 'json',
XML：返回 xml文檔
html： 純文本html 包含的script 標籤會在插入dom 時執行
script： 把響應的結果當做js來執行並將其當做文本返回。
text：返回純文本
jsonp:以 JSONP 的方式載入 JSON 數據塊。會自動在所請求的URL最後添加"?callback=?"
json:


3:  contentType  告訴服務器我要發什麼類型的數據
如    contentType: 'application/x-www-form-urlencoded',  窗體數據被編碼爲名稱/值對。這是標準的編碼格式
multipart/form-data：窗體數據被編碼爲一條消息，頁上的每個控件對應消息中的一個部分。
text/plain：窗體數據以純文本形式進行編碼，其中不含任何控件或格式字符
--------------------------------------消息類型設置結束
4: async (default true) 請求是否異步，如果爲false 則失去ajax原意

5:  beforeSend(xhr,settings)  function類型  可以自定義 http 頭部
請求發送前的回調函數，if return false 將取消這個請求

6: cache(default true)  dataType爲 json 或者script 時默認false
是否緩存該頁面  原理是在 GET 請求參數中添加一個 _={timestamp}時間戳

7: complete(xhr,textStatus) 完成ajax請求後的回調函數,在 success 和 error 後均可用
return xhr 對象和 一個描述請求狀態的字符串 success/notmodified/nocontent/error/timeout/abort

8: contents 一個以"{字符串/正則表達式}"配對的對象，根據給定的內容類型，解析請求的返回結果

9: context(Object)  用於設置ajax 相關回調函數的上下文，如指定一個dom對象作爲參數
  context: document.body


10: converters默認: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

11： crossDomain(boolean false) 跨域請求

12: data 類型: PlainObject 或 String 或 Array
發送到服務器的數據，會被轉換成一個查詢字符串 追加到 GET 請求的URL 後面
必須是 鍵值對形式 {k:v,k:v} 如果參數爲數組會自動轉換

13: dataFilter 類型 function(String data,String type)
用來處理XMLHttpRequest 原始相應數據的函數  data 爲ajax 返回的原始數據  type 爲 dataType參數

14：error function(xhr,textStatus,error) 請求失敗調用這個函數

15: global(default true) 是否觸發全局ajax事件處理程序  false 將不觸發 如 ajaxStart  ajaxStop

16: headers {k:v} 類型
一個額外的"{鍵:值}"對映射到請求一起發送。此設置會在beforeSend 函數調用之前被設置 ;
因此，請求頭中的設置值，會被beforeSend 函數內的設置覆蓋
17: jsonp String或boolean
在一個JSONP請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分
18: jsonpCallback  爲jsonp請求指定一個回調函數名
19: method: post/get  如果用的1.9 前版本 需要 type 
20: mimeType  String類型 用來覆蓋 xhr 的 MIME 類型
21：password (String)認證密碼
26： username  認證用戶名
22: statusCode PlantObject 類型  HTTP狀態響應碼
$.ajax({
  statusCode: {
404: function() {
  alert("page not found");
}
  }
});
23：success(data,textStatus,xhr)
data:服務器返回的數據
textStatus： 狀態

24: timeout 請求超時時間
25: URL 請求地址
xhr 方法：
xhr.done(function(){}) 1.5版本後代替 xhr.success()
xhr.fail(function(){})  1.5版本後代替 xhr.error()
xhr.always(function(){})  1.5 版本後代替 xhr.complete()

xhr.readyState
xhr.responseXML/responseText
xhr.status
xhr.statusText
xhr.getAllResponseHeaders()  String
xhr.getResponseHeader(name)
xhr.overrideMimeType(mimeType)
xhr.setRequestHeader(name,value) 
xhr.statusCode(callbacksByStatusCode)

回調函數：
Callback function Queues(回調函數)
beforeSend, error, dataFilter, success 和 complete接受的回調函數是在合適的時間調用。
















3： Echarts 插件學習
統計圖庫  MSChart:Visual Studio裏的自帶控件
  ichartjs: 基於 HTML5的圖形庫，支持各種圖形繪製
  Chart.js:基於HTML5 圖庫適合移動端
  ECharts:  基於HTML5的百度庫