與jQuery的感情碰撞——由淺入深學jQuery

    原來的時候自己看過jQuery，但是對於什么是jQuery，除了知道jQuery是一種javascript類庫外，除了會用幾個網頁特效外，其他的我這真的是不知道啊。眼看自己就要找工作了，所以自己需要好好學習一下，系統的了解一下。學習了一天，下面把我學習到的精華寫給大家，如果有什么錯誤，希望大家給予指正。

   我們學習jQuery之前，必須好好的學習javascript，如果不會javascript的話，jQuery還是不會學的很好的。

一、下面先了解什么是javascript。javascript需要學習什么，

    JavaScript是一種通用的腳本編程語言，也是一種基於對象(object)和事件驅動(event Driven)並具有安全性能的腳本語言，JavaScript代碼嵌套在HTML頁面中，它把靜態頁面變成支持用於交互並相應事件的活頁面。現在很難找到一個不包含JavaScript代碼的商業站點頁面，在其它類型的站點頁面中，也可能找到JavaScript代碼。

   可是我們怎么快速學習的javascript腳本語言啊，真正的IT編程人員不需要了解很深的javascript，這是一個根本所在，我在這里只是點名學習javascript需要學習的內容，不詳細描述。學習javascript就是學習一種語言，但是我們都知道語言現在都是基本相同的，只是看我們對API怎么操作而已。

（1）首先將javascript中的基本概念弄懂弄通。如變量\數組等.

（2）學習一下javascript的對象，擴展，封裝。

（3）瀏覽器DOM編程，只要將基本概念弄懂了，再學這個就不太難了，因為瀏覽器DOM就是各種對象的集合。

剩下的時間就是自己的努力了，只要你好好學習，多加練習，把javascript搞懂的話，你將一定是個高手。

二、認識jQuery

對於新手想知道是jQuery，其實jQuery就是javascript的庫文件的，她幫助我們做了很多麻煩的東西，只要javascript學好了，jQuery一天就能夠學會。

jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。

 

三、有步驟的學習jQuery

1、學習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");//改變表單內單行文本框的值

 

2、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

這個地方必須看開發手冊才行，用到哪里就看哪里，這里不詳細介紹

 

3、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 () {//對off復選框綁定click事件處理程序
                if (this.checked) $("img").clearQueue();//若選中了復選框，則清除動畫隊列
                $.fx.off = this.checked//根據復選框狀態設置$.fx.off
            });
        });
    </script>
</head>
<body>
    <p align="center">
        <button id="run">運行動畫</button>
        <button id="add">添加動畫</button>
        <button id="stop">停止動畫</button>
        <label><input id="off" type="checkbox" />禁止動畫</label>
    </p>
    <p align="center">動畫隊列的長度為<span>0</span></p>
    <img src="images/3.gif" alt=""/>
</body>
</html>

（6）鍵盤事件操作

其實這里也是沒有什么重點的東西，就是前面知識點的應用，寫個例子，大家看看

<!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">
        div.container{font-size:12px;font-family:Verdana;height:100px;width:368px;
                      margin:0 auto;text-align:center;overflow:scroll;border:2px solid #999;}
        span{color:Red;font-weight:bold;margin:6px;}
    </style>
    <script src="js/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).keydown(function (e) {//對文檔綁定keydown處理程序
                var code = "<div align='center'>按鍵代碼=<span>" + e.which + "</span></div>";
                $("div.container").append(code);
            });
            $(document).keyup(function (e) {//對文檔綁定keyup處理程序
                if (e.which == 113)//若按下了<ESC>鍵
                    $("div.container").html("");//清除container元素內容
            });
            $(document).keypress(function (e) {//對文檔對象綁定keypress處理程序
                var char = ",字符=<span>" + String.fromCharCode(e.which)+ "</span>";
                $("div.container>div:last").append(char);
            });
        });
    </script>
</head>
<body>
    <p align="center">從鍵盤上按下某個鍵，或輸入某個字符（按<b>F2</b>鍵清除內容（好像在IE中可以，其他的瀏覽器好像不行））</p>
    <div class="container"></div>
</body>
</html>

（7）鼠標事件操作

<!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">
        div.demo{height:103px;width:330px;margin:0 auto;padding:6px;
                 border:2px solid #999;overflow:scroll;}
        p,div{font-size:12px;}
        #xy{background-color:Yellow;height:120px;width:358px;border:3px inset red; 
            margin:0 auto;text-align:center;line-height:120px;font-family:Georgia;}
    </style>
    <script src="js/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getTime() {//定義函數計算時間
            var date = new Date();
            var time = date.getHours() + ":" + date.getMinutes() + ":" 
                        + date.getSeconds() + "." + date.getMilliseconds();
            return time;
        }
        $(function () {
            var button = ["左鍵", "中鍵", "右鍵"];
            $("div.demo").click(function (e) {//對div綁定click事件處理程序
                var msg = getTime(e.timeStamp) + ":<b>單擊鼠標</b>" + "</br>";
                $(this).append(msg).scroll()
            }).dblclick(function () {//對div綁定dblclick事件處理程序
                $(this).html("");
            }).mousedown(function (e) {//對div綁定mousedown事件處理程序
                var msg = getTime(e.timeStamp) + ":<b>按下鼠標" + button[e.which - 1] + "</b><br/>";
                $(this).append(msg).scroll()
            }).mouseup(function (e) {//對div綁定mouseup事件處理程序
                var msg = getTime(e.timeStamp) + ":<b>按下鼠標" + button[e.which - 1] + "</b><br/>";
                $(this).append(msg).scroll()
            }).scroll(function () {//對div綁定scroll事件處理程序
                $(this).scrollTop($("div.demo").find("b").length * 12);
            }).mouseenter(function (e) {//對div綁定mouseup事件處理程序
               var msg = getTime(e.timeStamp) + ":<b>觸發"+e.type+"事件</b><br/>";
               $(this).append(msg).scroll()
           }).mouseleave(function (e) {//對div綁定mouseup事件處理程序
               var msg = getTime(e.timeStamp) + ":<b>觸發" + e.type + "事件</b><br/>";
               $(this).append(msg).scroll()
           }).mouseover(function (e) {//對div綁定mouseup事件處理程序
               var msg = getTime(e.timeStamp) + ":<b>觸發" + e.type + "事件</b><br/>";
               $(this).append(msg).scroll()
           }).mouseout(function (e) {//對div綁定mouseup事件處理程序
               var msg = getTime(e.timeStamp) + ":<b>觸發" + e.type + "事件</b><br/>";
               $(this).append(msg).scroll()
           })
        });
        $(function () {
            $("#xy").mousemove(function (e) {
                var msg = "e.pageX=" + e.pageX + ",e.pageY=" + e.pageY;
                $(this).html(msg);
            });
        });
    </script>
</head>
<body>
    <p align="center">請用鼠標左鍵或右鍵單擊下面的方框（雙擊清除內容）</p>
    <div class="demo"></div>

    <p align="center">請在下面方框中移動鼠標</p>
    <div id="xy"></div>
</body>
</html>

4、jQuery與Ajax

這一小結是最重要的，由於前面專門一節講的是Ajax與ASP.Net，在這里不再重復,請訪問： 學習.net與ajax的詳細案例總結

在這里添加一個很重要的知識點，

jQuery中的AJax全局事件

我們是否平時上網的時候主要到這么個細節，當網站還沒有加載完畢時，會顯示  “加載中……”的字樣，這是怎么實現的，就是通過AJax全局事件實現的

<div id="loading">加載中……</div>

$("#loading").AjaxStart(function(){
   $(this).show(); 
});

$("#loading").AjaxStop(function(){
   $(this).hide(); 
});   //這里也可以使用連式寫法



//如果想使某個頁面其他Ajax不受全局Ajax的影響，使用：

$.ajax({
   url："……";
   global:false;  
});

//在jQuery1.5版本之后，如果Ajax請求不觸發全局方法，可以設置：

$.ajaxPrefilter(function(){
   options.global=true; 
})

 5、jQuery的插件的使用和寫法

（1）表單驗證插件（Validation）但是默認語言是英語，如果想要其顯示漢語，只需要引入中文信息驗證庫。

（2）jQuery表單插件（Form）,核心方法是ajaxForm(),ajaxSubmit()，能夠很容易將表單升級為Ajax提交方式，這里不細說

（3）模態窗口插件（SimpleModel）

（4）Cookie插件（很好用）

不細說，添加代碼

<!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>
    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnWrite").click(function () {
                $.cookie("myText", $("#Text1").val());
            });
            $("#btnRead").click(function () {
                $("#Text1").val($.cookie("myText"));
            });
            $("#btnDing").click(function () {
                if ($.cookie("isding") == "true") {
                    alert("不能重復頂");
                    return;
                }
                alert("頂");
                $.cookie("isding", "true", { expires: 1 })//會話Cookie

            });

            setInterval(function () {
                var myNote = $("#myNote").val();
                $.cookie("myNote", myNote, {expires:7});
            }, 5000);
        });
    </script>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="btnWrite" type="button" value="寫入" />
    <input id="btnRead" type="button"value="讀取" />
    <input id="btnDing" type="button" value="頂" />
    <textarea rows="20" height="20" id="myNote">
        
    </textarea>
</body>
</html>

（5）jQuery UI

（6）自定義jQuery插件

jQuery插件機制是提供了兩個用於jQuery擴展的方法，jQuery.ftn.extend(),jQuery.extend().

這里自己可以上網查看資料，不在這里細說。

 

 

jQuery的基本內容就是這些，就看你掌握了多少，就看你會不會用，如果學的比較好的話，可以自己寫一個自定義jQuery插件，還是自己寫的東西適合自己開發用。