(轉)jQuery知識總結

時間 2019-11-12

標籤 jquery 知識總結欄目 JQuery 简体版

原文原文鏈接

jQuery知識總結

jQuery一直都在用，但都是在用時查查手冊，並無系統的學過，最近組內作jQuery交流，花了幾天時間系統了學習了下，作了個PPT，本文是根據PPT總結而來，有些地方作了些補充。但願對jQuery初學者有些幫助。javascript

jQuery簡介

簡介php

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫的更少,作的更多)。 jQuery在2006年1月由美國人John Resig在紐約的barcamp發佈，吸引了來自世界各地的衆多javascript高手加入，如今由Dave Methvin率領團隊進行開發。現在， jQuery已經成爲最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery 。【摘自百度百科】css

下載地址html

http://jquery.com/java

源碼地址jquery

https://github.com/jquery/jquerygit

能夠經過 git clone git://github.com/jquery/jquery.git 來獲取源碼。github

在線文檔ajax

http://www.ostools.net/apidocs/apidoc?api=jquery編程

http://www.ostools.net/上有各類在線工具，在此推薦下。

使用jQuery

使用jQuery首先須要在頁面中進行引用，以下：

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>

使用的代碼以下：

$(document).ready(function () {
    $("#div1").html("hello world");
});

$(function () {
    $("#btnOK").bind("click", function () { 
    
    });
});

上面的代碼至關於window.onload，不過跟window.onload仍是有一些區別，後面會以表格的形式來展示他們的區別。在jQuery中處處能夠見到$符號，這是jQuery裏的一種簡寫，$("#btnOK")和jQuery("#btnOK")是等價的。

window.onload和$(document).ready()的區別

	window.onload	$(document).ready()
執行時間	網頁全部內容加載完後執行	DOM結構加載完後就執行，效率更高
編寫個數	1個	多個，多個的執行順序取決於函數的順序以及引用文件的順序
是否支持簡寫	不支持	簡寫形式爲：$(function(){});

DOM對象和jQuery對象轉換

獲取DOM對象代碼以下：

//獲取DOM對象
var div1 = document.getElementById("div1");
div1.innerHTML = "oec2003";

獲取jQuery對象代碼以下:

//獲取jQuery對象
var div1 = $("#div1");
div1.html("oec2003");

jQuery對象轉DOM對象

//由於ajQuery對象是一個數組對象，因此轉換爲DOM對象時要用索引的形式
var $div1 = $("#div1"); //jQuery對象
var div1 = $div1[0]; //轉換爲了DOM對象
var div2 = $div1.get(0); //和上面一行效果同樣
div1.innerHTML = "oec2003";

DOM對象轉jQuery對象

//DOM對象轉jQuery只需用$包裝便可
var div1 = document.getElementById("div1");
var $div1 = $(div1); //轉換爲了jQuery對象
$div1.html("oec2003");

解決衝突

有時會有jQuery和其餘的庫或本身寫的一些公共腳本文件一塊兒使用的場景，就有可能會出現$衝突的問題，衝突的解決分兩種狀況：

一、jQuery庫在其餘庫以後引用，以下所示：

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="Scripts/common.js"></script>

在common.js中有對$從新定義，代碼以下：

function $(id) {

    return document.getElementById(id);
}

下面是在jQuery中解決衝突的代碼，有四種方式：

//方式1
jQuery.noConflict(); //將$控制權移交出去，之前使用$的地方都改用jQuery
jQuery(document).ready(function () {
    alert(jQuery("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式2
var $j=jQuery.noConflict(); //定義快捷方式
$j(document).ready(function () {
    alert($j("#span1").html());
});

window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式3
jQuery.noConflict(); //在函數內部繼續使用$
jQuery(function ($) {
    alert($("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式4
jQuery.noConflict(); //在函數內部繼續使用$另外一種方式
(function ($) {
    $(function(){
        alert($("#span1").html());
    });
})(jQuery);
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

二、jQuery庫在其餘庫以前使用

//若是先引用jQuery腳本，能夠不使用noConflict
//jQuery.noConflict(); 
jQuery(document).ready(function () {
    alert(jQuery("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

選擇器

基本選擇器

<body>
    <div>
        <div id="div1">
            aaaaaaaaaaa</div>
        <div class="c1">
            bbbbbbbbb</div>
        <span>ccccccccc</span>
    </div>
</body>

$(function () {

    $("#div1").html("hello world 1"); //根據id匹配元素（a）

    $(".c1").html("hello  world 2"); //根據Yclass匹配元素（b）

    $("span").html("hello world 3"); //根據元素名稱匹配 （c）

    $("span,div.c1").html("hello world 4"); //匹配頁面全部的span 和class=c1的div（b c）

    $("*").html("hello world 5"); //匹配頁面全部元素,也包含body

});

層級選擇器

<body>
    <span id="span1">
        aaaaaaaaa</span>
    <span class="c1">
        bbbbbbbbb</span>
    <div>
        ccccccccc
        <span>ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("body span").html("hello world 1"); //選取body中全部的span（a b d）

    $("body>span").html("hello world 2"); //選取body元素的子span元素(a b)

    $("span.c1+div").html("hello world 3"); //選取class爲c1的span的下一個div元素，注意是同級元素
    $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)

    $("span.c1~div").html("hello world 4"); //選取class爲c1的span的後面的全部div
    $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)

});

基本過濾選擇器

<body>
    <h1>header1</h1>
    <h2>header2</h2>
    <h3>header3</h3>
    <span id="span1">aaaaaaaaa</span>
    <span class="c1">bbbbbbbbb</span>
    <div>
        ccccccccc
        <span>ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("div:first").html("hello world 1"); //選取全部div中的第一個div
    $("span:last").html("hello world 2"); //選取全部span中的最後一個
    $("span:not(.c1)").html("hello world 3"); //選取除class爲c1的span外的全部span
    $("span:even").html("hello world 4"); //選取索引爲偶數的span，索引從0開始
    $("span:odd").html("hello world 5"); //選取索引爲奇數的span，索引從0開始
    $("span:eq(2)").html("hello world 6"); //選取指定索引的span，索引從0開始
    $("span:gt(0)").html("hello world 7"); //選取大於指定索引的span，不包含指定索引
    $("span:lt(2)").html("hello world 8"); //選取小於指定索引的span，不包含指定索引
    $(":header").html("hello world 9"); //選取頁面中全部的標題元素 h1 h2 h3...

});

內容過濾選擇器

<body>
    <span id="span1">aaaaaaaaa</span>
    <span class="c1">bbbbbbbbb</span>
    <span></span>
    <div>
        ccccccccc
        <span id="span2" class="c2">ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("span:contains(aa)").html("hello world 1"); //選取內容包含aa的span元素

    $("span:empty").html("hello world 2"); //選取空的span元素

    $("div:has(span)").html("hello world 3"); //選取包含span的div元素

    $("span:parent").html("hello world 4"); //選取包含子元素的span元素，包含文本

});

屬性過濾選擇器

<body>
    <span id="span1">aaaaaaaaa</span>
    <span class="c1">bbbbbbbbb</span>
    <span></span>
    <div>
        ccccccccc
        <span id="span2" class="c2">ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("span[id]").html("hello world 1"); //選取有屬性id的span元素
    $("span[id=span2]").html("hello world 2"); //選取屬性id等於span2的span元素
    $("span[id!=span2]").html("hello world 3"); //選取屬性id不等於爲span2的span元素
    $("span[id^=span]").html("hello world 4"); //選取屬性id以span開始的span元素
    $("span[id$=2]").html("hello world 5"); //選取屬性id以2結尾的span元素
    $("span[id*=an]").html("hello world 6"); //選取屬性id包含an的span元素
    $("span[id*=an][class$=2]").html("hello world 6"); //選取屬性id包含an而且class以結尾的span元素

});

子元素過濾選擇器

<body>
   <div class="c1">
        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>
   </div>
   <div class="c1">
        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>
   </div>
   <div class="c1">
        <span>aaaaaaaa</span>
   </div>
</body>

$(function () {

    $("div.c1 :nth-child(1)").html("hello world 1"); //選取class等於c1的div的指定索引子元素
    $("div.c1 :nth-child(even)").html("hello world 2"); //選取class等於c1的div的偶數子元素
    $("div.c1 :nth-child(odd)").html("hello world 3"); //選取class等於c1的div的奇數子元素
    $("div.c1 :first-child").html("hello world 4"); //選取class等於c1的div的第一個子元素
    $("div.c1 :last-child").html("hello world 5"); //選取class等於c1的div的最後一個子元素
    $("div.c1 :only-child").html("hello world 6"); //選取class等於c1的div只有一個子元素的子元素

});

表單選擇器

<body>
  <form id="form1" action="#">
    <input type="button" value="button1" />
    <input type="text" value="text1" />
    <input type="text" value="text2" />
    <textarea rows="8" cols="40"></textarea><br />
    <input type="checkbox" name="chk" />籃球
    <input type="checkbox" name="chk" />足球
    <input type="password" />
    <input type="hidden" /><br />
    <select multiple="multiple">
        <option selected="selected">武漢</option>
        <option selected="selected">黃岡</option>
        <option >麻城</option>
    </select>
    <input id="n" type="radio" name="s"/>男
    <input type="radio" name="s"/>女<br />
    <input type="submit" /><input type="reset" />
  </form>
</body>

$(function () {
    //表單中的表單元素
    $("#form1 :input").val("hello world 1");
    //表單中的input元素
    $("#form1 input").val("hello world 1");
    $(":text").val("hello world 2");
    $(":password").val("hello world 3");
    //男的單選框被選中
    $(":radio[id=n]").attr("checked", true);
    $(":checkbox[name=chk]").length;
    $(":submmit").val("提交");
    $(":reset").val("重置");
    $(":button").val("hello world 4");
    $(":hidden").val("hello world 5");
});

表單對象屬性過濾選擇器

<body>
  <form id="form1" action="#">
    <input type="text" disabled="disabled" value="禁用1" />
    <input type="text"  value="啓用1" />
    <input type="text" disabled="disabled" value="禁用2" />
    <input type="text"  value="啓用2" />
    <input type="checkbox" name="chk" value="籃球" checked="checked"/>籃球
    <input type="checkbox" name="chk" value="足球" />足球
    <input type="checkbox" name="chk" value="編程" checked="checked"/>編程
    <input type="checkbox" name="chk" value="旅遊" checked="checked"/>旅遊
    <select multiple="multiple">
        <option selected="selected">武漢</option>
        <option selected="selected">黃岡</option>
        <option >麻城</option>
    </select>
  </form>

$(function () {

    $("#form1 input:enabled").val("hello world 1"); //選取form表單中沒有禁用的文本框
    $("#form1 input:disabled").val("hello world 2"); //選取form表單中沒有禁用的文本框
    $("#form1 input:checked").attr("checked",false); //選取form表單中選的複選框
    $("select option[selected]").each(function () {
        alert($(this).val());
    });

});

使用選擇器要注意的地方

<body>
    <div id="div#1">aaaaaaaaaaa</div>
    <div class="c[1]">bbbbbbbbb</div>
    <div class="c1">
        <div name="div">ccccccccc</div>
        <div name="div">ddddddddd</div>
        <div name="div">eeeeeeeee</div>
        <div class="c1" name="div">fffffffff</div>
    </div>
    <div class="c1" name="div">gggggggg</div>
    <div class="c1" name="div">hhhhhhhh</div>
</body>

$(function () {

    //有時在id或是class中有一些特殊字符如 [等，須要用反斜槓進行轉義
    $("#div\\#1").html("hello world 1");
    $(".c\\[1\\]").html("hello world 2");
    //有沒有空格的區別
    //有空格是選取class等於c1的div裏面的name等於div的div（c d e f）
    $(".c1 [name=div]").html("hello world 3");
    //沒有空格是選取class等於c1而且name等於div的div (f g h)
    $(".c1[name=div]").html("hello world 4");

});

幾個簡單的示例

摺疊效果，很經常使用的一個功能，在寫博客插入代碼時，有些就支持代碼摺疊。實現代碼以下：

<body>
   <div id="div">
    <h3>jQuery簡ò介é</h3>
    <div id="content">
        jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫的更少,作的更多)。 
        jQuery在2006年1月由美國人John Resig在紐約的barcamp發佈，吸引了來自世界各地的衆多javascript高手加入，
        如今由Dave Methvin率領團隊進行開發。現在，jQuery已經成爲流行的javascript庫，
        在世界前10000個訪問最多的網站中，有超過55%在使用jQuery 。
    </div>
   </div>
</body>

$(function () {
    //方法1
    $("#div h3").bind("click", function () {
        if ($("#content").is(":visible")) {
            $("#content").hide();
        } else {
            $("#content").show();
        }
    });

    //方法2
    $("#div h3").toggle(function () { $("#content").hide(); }, function () { $("#content").show(); });

});

斑馬線，這個在列表中很是常見。

<table id="tbl" cellpadding="0" cellspacing="0">
    <tr>
        <th>第一季度</th>
        <th>第二季度</th>
        <th>第三季度</th>
        <th>第四季度</th>
    </tr>
    <tr>
        <td>5444</td>
        <td>3453</td>
        <td>453</td>
        <td>5656</td>
    </tr>
    <tr>
        <td>5454</td>
        <td>7676</td>
        <td>4454</td>
        <td>333</td>
    </tr>
    <tr>
        <td>333</td>
        <td>556</td>
        <td>44</td>
        <td>55</td>
    </tr>
</table>

<script type="text/javascript">
    $(function () {
        //實現單雙行以不一樣的顏色間隔
        $("#tbl tr:odd").addClass("trOdd");
        //實現點擊行，改變好行的背景色
        $("#tbl tr").click(function () {
            $(this).addClass("trOdd").siblings().removeClass("trOdd");
        });
      
    });
</script>

<style type="text/css">
    #tbl{width:300px; border:solid 1px #666; background-color:#eee;}
    #tbl tr{ line-height:25px;}
    #btl tr th{ background-color:#ccc;color:#fff;}
    #tbl .trOdd{ background-color:#fff;}
</style>

CheckBox全選，列表中很經常使用的功能。

<table id="tbl" cellpadding="0" cellspacing="0">
    <tr>
        <th><input id="chkAll" type="checkbox" /></th>
        <th>第一季度</th>
        <th>第二季度</th>
        <th>第三季度</th>
        <th>第四季度</th>
    </tr>
    <tr>
        <td><input name="chk" type="checkbox" /></td>
        <td>5444</td>
        <td>3453</td>
        <td>453</td>
        <td>5656</td>
    </tr>
    <tr>
        <td><input name="chk" type="checkbox" /></td>
        <td>5454</td>
        <td>7676</td>
        <td>4454</td>
        <td>333</td>
    </tr>
</table>

<script type="text/javascript">
    $(function () {

        $("#chkAll").bind("click", function () {
            $("input[name='chk']").attr("checked", $(this).attr("checked") == undefined ? false : true);
        });
        $("input[name=chk]").each(function () {
            $(this).bind("click", function () {
                $("#chkAll").attr("checked", $("input[name=chk]:checked").length == $("input[name=chk]").length);
            });
        });
    
    });
</script>

<style type="text/css">
    #tbl{width:300px; border:solid 1px #666; background-color:#eee;}
    #tbl tr{ line-height:25px;}
    #btl tr th{ background-color:#ccc;color:#fff;}
    #tbl .trOdd{ background-color:#fff;}
</style>

jQuery-Ajax

傳統的實現方式

$(function () {
    var xmlHttp = null;
    $("#btn").bind("click", function () {

        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }

        xmlHttp.open("GET", "JQueryAjax.ashx?name=oec2003", true);
        xmlHttp.onreadystatechange = requestCallback;
        xmlHttp.send(null);
    });

    var requestCallback = function () {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                $("#div").html(xmlHttp.responseText);
            }
        }
    }
});

$.load

<body>
    <input type="button" id="btn" value="Ajax" /><br />
    <div id="div"></div>
</body>

$(function () {
    //加載AjaxWebForm.aspx頁面的id爲adiv1的部分，參數以get形式傳遞
    $("#div").load("AjaxWebForm.aspx?name=oec2003 #div1", function () { });
    //加載AjaxWebForm.aspx頁面的id爲div2的部分，參數以post形式傳遞
    $("#div").load("AjaxWebForm.aspx #div2", { name1: "oec2003", age: "30" }, callBack);

    function callBack(responseText, status, xmlHttpObject) {
        alert(responseText);
        alert(status);
        alert(xmlHttpObject);
    }
});

$.get和$.post

$(function () {

    //$.get參數以json格式收集，最終在url上進行傳遞
    $("#btn").bind("click", function () {
        $.get("JQueryAjax.ashx", { name: "oec2003", age: "30" }, callBack);
    });
    //data的格式能夠是html xml json
    function callBack(data, status) {
        $("#div").html(data);
    }
    //$.post
    $("#btn").bind("click", function () {

        $.post("JQueryAjax.ashx", { name: "oec2003", age: "30" }, callBack);
    });
    //data的格式能夠是html xml json
    function callBack(data, status) {
        $("#div").html(data);
    }

});

$.ajax

<body>
<form id="form1" action="#">
    姓名：<input name="name" type="text" id="txtName" /><br />
    年齡:<input  name="age" type="text" id="txtAge" /><br />
    <input type="button" id="btn" value="Ajax" /><br />
</form>

<div id="div"></div>
</body>

$(function () {
    $("#btn").bind("click", function () {
        $.ajax({
            type: "GET",
            url: "JQueryAjax.ashx",
            async:true, //同步仍是異步，默認爲異步
            dataType: "html",
            //使用serialize進行數據收集，根據type類型決定傳遞方式
            data: $("#form1").serialize(),
            beforeSend: function () {
                if ($("#txtName").val() != "oec2003") {
                    alert("姓名必須爲aoec2003");
                    return false;
                }
            },
            complete: function () {
                //請求成功或失敗均調用
            },
            success: function (data) {
                $("#div").html(data);
            },
            error: function () {
                $("#div").html("出錯啦！");
            },
            global:true   //默認爲atrue 表示是否出發Ajax全局事件

        });
    });
});