jQuery開發(fā)中容易忽視的錯(cuò)誤

昵稱10504424 2014-08-06

展開全文

1、引用jQuery庫(kù)文件的<script>標(biāo)簽，必須放在引用自定義腳本文件的<script>標(biāo)簽之前，否則，就會(huì)發(fā)生找不到對(duì)象；最好在<head>元素中，把引入樣式表的<link />放在<script>標(biāo)簽前面；有時(shí)候其他的javascript庫(kù)也會(huì)用$符號(hào)，為了不沖突，可以使用.noConflict()方法把控制權(quán)交給別的庫(kù).
    <script src="prototype.js" type="text/javascript" />
    <script src="jquery.js" type="text/javascript" />
    <script type="text/javascript">
        jQuery.noConflict();
    </script>
    <script src="myjs.js" type="text/javascript"/>
    在使用jquery方法時(shí)，必須使用jquery代替$來(lái)調(diào)用。

2、基本選擇符：標(biāo)簽名，${"p"}；ID選擇符，${"#idname"}；類選擇符，${".classname"}。

3、css選擇符，舉個(gè)例子來(lái)說(shuō)
    $(document).ready(function(){
        $("#aSelect > li").addClass("aClass");
        $("#aSelect li:not(.aClass)").addClass("otherClass");
    });
    上面第二行中的>就是元素組合符，查找ID為aSelect的元素的子元素（>）中所有的列表項(xiàng)。這個(gè)子元素，不包含孫元素。
    上面第三行中的aSelect li，表示查找ID為aSelect的元素的所有下級(jí)列表項(xiàng)，包含孫元素。

4、屬性選擇符：$("img[alt]")就是選擇所有帶有alt屬性的圖像元素；另外，屬性選擇符允許以類似正則表達(dá)式的語(yǔ)法來(lái)標(biāo)識(shí)字符串的開始(^)和結(jié)尾($)，而且，也可以使用(*)表示位于字符串中任意位置的值，適用(!)來(lái)表示相反的值。
    e.g.:
    $(document).ready(function(){
        $("a[href^=mailto:]").addClass("mailto");

$("a[href$=.pdf]").addClass("pdflink");

$("a[href^=http][href*=henry]").addClass("henrylink");

    });

5、自定義選擇符，語(yǔ)法與css中的偽類選擇符語(yǔ)法相同，以一個(gè)冒號(hào)開頭，比如，我們要從某個(gè)集合里面選擇第一項(xiàng)，可以使用下面的代碼：
    $("a[href^=http]:eq(0)")...
    $("div:first-child")...
    另外兩個(gè)比較常用的自定義選擇符是：odd和：even，分別對(duì)應(yīng)選擇奇數(shù)行和偶數(shù)行。
    $("table tr:odd").addClass("odd");
    $("table tr:even").addClass("even");
    猜猜看：$("td:contains(a)").css("color","red");這會(huì)有什么效果？

6、基于表單的選擇符，簡(jiǎn)單列舉一下吧，有心人通過(guò)練習(xí)會(huì)明白的。
    :text    ：checkbox    ：radio    :image    :submit    :reset    :password
    :file    :input    :button    :enabled    :disabled    :checked    :selected
    這些選擇符可以鏈?zhǔn)绞褂?，比?(':radio:checked')，$(':text:enabled')等等。

7、.find()和.filter()的相同點(diǎn)和區(qū)別，他們都是遍歷元素，區(qū)別就是find是對(duì)子集操作，filter是對(duì)自身集合元素操作。比如
        var $find=$("div").find(".name"); 是對(duì)class為name的div內(nèi)的元素操作，
        var filter=$("div").filter(".name");是對(duì)所有class為name的div進(jìn)行操作。

8、.next()下一個(gè)同輩元素；.nextAll()下面所有的同輩元素；
    .prev()上一個(gè)同輩元素；.prevAll()上面所有的同輩元素；
    .siblings()所有的同輩元素；.andself()包含自己；
    .parent()父元素；.children()子元素；
    .end()恢復(fù)最近依次破壞性對(duì)匹配元素集合的操作，返回到之前的匹配元素集合狀態(tài),返回匹配元素集合。

9、jQuery為標(biāo)準(zhǔn)的DOM事件都提供了相應(yīng)的簡(jiǎn)寫事件方法：
    .blur    .change    .click    .dbclick    .error    .focus    .keydown    .keypress    .keyup    .load    .select    .scroll
    .mousedown    .mouseover    .mouseout    .mousemove    .mouseup    .resize    .submit    .unload

10、復(fù)合事件
    .toggle(fun1,fun2,fun3...)參數(shù)都是函數(shù)，第一次點(diǎn)擊執(zhí)行fun1，第二次點(diǎn)擊執(zhí)行fun2，依次類推，執(zhí)行完以后，重新回到fun1開始。
    .hover(fun1,fun2)，當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配元素上面時(shí)(over)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)(out)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。

11、盡管解釋起來(lái)很難，但是想象起來(lái)卻很容易，div里面的一個(gè)元素被點(diǎn)擊了，但是我們只想執(zhí)行div的點(diǎn)擊事件：(感興趣的去了解事件捕獲和事件冒泡)
    $(document).ready(function(){
        $("#divId").click(function(event){
            if(event.target==this){
                這里是事件執(zhí)行代碼...
            }
        });
    });
    另外還有直接阻止事件冒泡的方法.stopPropagation()

   $(document).ready(function(){
        $("#divId .button").click(function(event){
                這里是事件執(zhí)行代碼...
                event.stopPropagation();
        });
    });
    在這里我要說(shuō)的是，上面兩個(gè)例子，分別對(duì)應(yīng)的是事件捕獲和事件冒泡，不是一回事。

12、移除事件處理程序，直接看代碼，很直觀
    $(function(){
        $("#largeDiv").click(function(event){
            事件處理代碼
        });
        $("#largeDiv-firstChild").click(function(){
            $("#largeDiv").unbind("click");
        });
    });
    但是如果click里面的代碼，有一部分要執(zhí)行，有一部分不執(zhí)行怎么辦呢，.unbind()只能全部移除，其實(shí)，是可以解決的，給事件起個(gè)別名就好了

    $(function(){
        $("#largeDiv").bind('click.first',function(event){
            第一個(gè)事件處理代碼
        });

        $("#largeDiv").bind('click.second',function(event){
            第二個(gè)事件處理代碼
        });

        $("#largeDiv-firstChild").click(function(){
            $("#largeDiv").unbind("click.first");
        });
    });

14、.show() .hide() .fadeIn() .fadeOut()可以用不同的形式來(lái)實(shí)現(xiàn)展示和隱藏效果。具體自己研究吧，比較簡(jiǎn)單。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)