原來的時候本身看過jQuery，可是對於什麼是jQuery，除了知道jQuery是一種javascript類庫外，除了會用幾個網頁特效外，其餘的我這真的是不知道啊。眼看本身就要找工做了，因此本身須要好好學習一下，系統的瞭解一下。學習了一天，下面把我學習到的精華寫給你們，若是有什麼錯誤，但願你們給予指正。javascript
咱們學習jQuery以前，必須好好的學習javascript，若是不會javascript的話，jQuery仍是不會學的很好的。css
1、下面先了解什麼是javascript。javascript須要學習什麼，html
JavaScript是一種通用的腳本編程語言，也是一種基於對象(object)和事件驅動(event Driven)並具備安全性能的腳本語言，JavaScript代碼嵌套在HTML頁面中，它把靜態頁面變成支持用於交互並相應事件的活頁面。如今很難找到一個不包含JavaScript代碼的商業站點頁面，在其它類型的站點頁面中，也可能找到JavaScript代碼。java
但是咱們怎麼快速學習的javascript腳本語言啊，真正的IT編程人員不須要了解很深的javascript，這是一個根本所在，我在這裏只是點名學習javascript須要學習的內容，不詳細描述。學習javascript就是學習一種語言，可是咱們都知道語言如今都是基本相同的，只是看咱們對API怎麼操做而已。jquery
（1）首先將javascript中的基本概念弄懂弄通。如變量\數組等.ajax
（2）學習一下javascript的對象，擴展，封裝。編程
（3）瀏覽器DOM編程，只要將基本概念弄懂了，再學這個就不太難了，由於瀏覽器DOM就是各類對象的集合。數組
剩下的時間就是本身的努力了，只要你好好學習，多加練習，把javascript搞懂的話，你將必定是個高手。瀏覽器
2、認識jQuery安全
對於新手想知道是jQuery，其實jQuery就是javascript的庫文件的，她幫助咱們作了不少麻煩的東西，只要javascript學好了，jQuery一天就可以學會。
jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。
3、有步驟的學習jQuery
一、學習jQuery的選擇器，什麼是選擇器，咱們須要瞭解，在javascript中，咱們若是想要獲取html中標籤的值，咱們就會用到DOM中的一些東西，例如
document.getElementById("標籤ID").value;
可是在jQuery中咱們只是用到了一個符號就能夠完成這麼長的單詞拼寫。
$("#標籤ID").val();
好好的比較一下是否是下面的很簡單啊，好了，廢話不說了，切入正題，選擇器咱們須要學習的是css選擇器（標籤選擇器，ID選擇器，類選擇器，羣組選擇器，後代選擇器，通配選擇器）
因爲本文主要講解的是jQuery的選擇器，jQuery的選擇器徹底繼承了CSS的風格。因此對於CSS選擇器不重複說明
（1）基本選擇器
標籤選擇器，ID選擇器，類選擇器
$("input").css("backgroundColor","Red");//將標籤爲input的背景顏色設爲紅色 $("#myDiv").css("backgroundColor","Red");//將ID爲myDiv的背景顏色設爲紅色 $(".myclass").css("backgroundColor","Red");//將類名爲myclass的背景顏色設爲紅色
可是這裏須要說清楚的是ID選擇器>類選擇器>標籤選擇器
<script type="text/javascript"> $("#Text1").css(" backgroundColor","Red"); $(" .txt").css(" backgroundColor","Green"); $(" input").css ("backgroundColor","Black"); </script > <input id="Text1" type="text" class="txt" /> <input type="text" class="txt" />
你們若是懂得上面的規則後，就會必定知道兩個標籤的背景顏色
（2）層次選擇器
例如：
$("body div") .css("backgroundColor","Red");//改變body中全部div標籤的背景色 $("body>div") .css("backgroundColor","Red");//改變body中字div標籤的背景色 $(".one+div") .css("backgroundColor","Red");//改變class爲.one的下一個同輩div標籤的背景色 $("#two~div") .css("backgroundColor","Red");//改變id爲two的全部同輩div標籤的背景色
（3）基本選擇器
包括(:first，:last, :not(selector), :even, :odd, :eq(selector), :gt(selector), :lt(selector), :header, :animated, :focus)
例如：
$("div:first") .css("backgroundColor","Red");//改變第一個div標籤的背景色 $("div:not(.one)") .css("backgroundColor","Red");//改變class不爲one的div標籤的背景色 $("div:even") .css("backgroundColor","Red");//改變c索引值爲偶數的div標籤的背景色 $("div:header") .css("backgroundColor","Red");//改變全部標題元素的的背景色 $("div:focus") .css("backgroundColor","Red");//改變得到焦點元素的的背景色
（4）內容選擇器
（:contains(text), :empty, :has(selector), :parent）
例如：
$("div:contains(di)").css("backgroundColor","Red");//改變含有文本「di」的div標籤的背景色 $("div:empty").css("backgroundColor","Red");//改變不包含子元素的div標籤的背景色 $("div:parent").css("backgroundColor","Red");//改變包含子元素的div標籤的背景色
（5）可見性選擇器
$("div:visible").css("backgroundColor","Red");//改變全部可見的div標籤的背景色
（6）屬性選擇器
$("body div") .css("backgroundColor","Red");//改變body中全部div標籤的背景色 $("div[title=test]").css("backgroundColor","Red");//改變屬性title值爲test的div標籤的背景色 $("div[title*=s]").css("backgroundColor","Red");//改變屬性title值包含s的div標籤的背景色 $("div[title^=s]").css("backgroundColor","Red");//改變屬性title值以s開頭的div標籤的背景色
（7）子元素過濾器
$("div.one :nth-child(2)").css("backgroundColor","Red");//改變每一個class爲one的<div>的父元素下的第二個子元素的背景色 $("div.one :first-child").css("backgroundColor","Red");//改變每一個class爲one的<div>的父元素下的第一個子元素的背景色 $("div.one :only-child").css("backgroundColor","Red");//若是class爲one的<div>的父元素下只有一個子元素，改變這個子元素的背景色
（8）表單過濾器
$("#form1 input :enabled") .val("123");//改變表單內可用的<input>元素的值
（9）表單選擇器
$("#form1 :input ") .val("23");//改變表單內單行文本框的值
二、jQuery中的DOM操做
jQuery的DOM操做是個很重要的東西，包括不少常常用到的東西，
例如：對於節點操做：建立節點（建立元素節點，建立屬性節點，建立文本節點），插入節點（append，after，before，insertBefore），刪除節點（remove，empty，），複製節點，替換節點，包裹節點。
還有屬性操做，樣式操做（獲取設置樣式，追加樣式，刪除樣式，切換樣式等），遍歷節點（children(),next(),prev(),siblings(),）
例如：var $para=$("p");//獲取屬性
var p_text=$para.attr("title");設置屬性
$("p").removeAttr("title");//刪除<p>元素的屬性title
這個地方必須看開發手冊才行，用到哪裏就看哪裏，這裏不詳細介紹
三、jQuery的事件和動畫
（1）加載DOM
$(window).load(function(){ ……}) 等價於javascript中的 window.onload=function(){……}
$(document).ready(function(){……}) 等價於 $(function(){……});
(2)事件綁定(移除事件和綁定事件差很少)
例如：
$(function(){ $("#panel1 h5.head").bind("click",function(){ //綁定方式 if($(this).next().is(":visible")){ $(this).next().hide(); }else{ $(this).next().show(); } });
$("#panel1 h5.head").click(function(){ //簡寫方式
if($(this).next().is(":visible")){
$(this).next().hide(); }else{ $(this).next().show(); } });
});
<div id="panel1">
<h5 class="head">這是什麼</h5>
<div class="content"> ………………………… ………………………… <div> </div>
上面內容實現的功能是：當反覆點擊「標題」連接時，內容會在顯示和隱藏中切換
（3）合成事件
$(function(){ $("#panel1 h5.head").hover(function(){ //hover方法 $(this).next().hide(); },function(){ $(this).next().show(); } });
$("#panel1 h5.head").toggle(function(){ //toogle方法
$(this).next().hide();
},function(){
$(this).next().show();
}
});
});
（4）事件冒泡
這裏簡要的講一下事件冒泡，事件冒泡是多個嵌套元素響應一個事件時，產生的效果，若是中止事件冒泡採用event.stopPropagation(); 等價於 return false;
還有阻止默認行爲:event.preventDefault(); 等價於 return false;
（5）jQuery中的動畫
主要的方法是 show(),hide(),fadIn(),fadeOut(),animate(),toggle(),slideToggle(),fadeTo(),fadeToggle()
其實jQuery的動畫就是對前面知識點的應用，沒有什麼新鮮的，這裏很少說，上傳一個總體實例供你們參考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p,button,label{font-size:12px} img{position:absolute;left:10px;top:500px;} span{color:Red;font-weight:bold;padding:6px;} </style> <script src="js/jquery-1.8.0.js" type="text/javascript"></script> <script type="text/javascript"> var fn = function () {//定義函數並存儲在變量fn中 var q = $("img").queue("fx");//獲取附加在圖片上的動畫隊列 $("span").text(q.length); } $(function () { $.fx.off = $("input#off").is(":checked");//根據複選框狀態設置$.fx.off的屬性 $("button#run").click(function () {//對run按鈕綁定click事件 $("img").animate({ left: "+=456", top: "+=35" }, 4000, fn)//建立自定義動畫 .animate({ left: "-=168", top: "-=50" }, 2000, fn) .delay(1000) .animate({ left: "+=136", top: "-=30" }, 2000, fn) .animate({ left: "-=196", top: "-=10" }, 2000, fn) fn(); }); $("button#add").click(function () {//對add按鈕綁定click處理事件 $("img").queue("fx", function () {//向圖片的動畫隊列中添加兩個動畫 $(this).animate({ height: "+=30", width: "+=50" }, 1500, fn) .animate({ height: "-=30", width: "-=55" }, 1500, fn) .dequeue();//執行動畫隊列中的下一個函數 }); }); $("button#stop").click(function () {//對stop按鈕綁定click處理事件 $("img").stop(true, true);//中止圖片正在執行動畫 }); $("input#off").click(function () {//