第1章，認識jQuery

註意：使用的jQuery版本為1.7.1

目前流行的JavaScript庫

jQuery優勢

jQuery代碼的編寫

jQuery對象和DOM對象的相互轉換

var $cr = $("#cr");     //jQuery對象
var cr = $cr[0];          //DOM對象

var $cr = $("#cr");     //jQuery對象
var cr = $cr.get(0);     //DOM對象

var cr = document.getElementById("cr");          //DOM對象
var $cr = $(cr);                                 //jQuery對象

解決jQuery和其它庫的衝突

<!-- 引入prototype庫 -->
<script type="text/javascript" src="lib/prototype.js"></script>
<!-- 引入jQuery庫 -->
<script type="text/javascript" src="lib/jQuery.js"></script>
<script type="text/javascript">
    jQuery.noConflict();    //將變數$的控制權移交給prototype.js
    jQuery(function(){      //使用jQuery
        jQuery("p").click(function(){
            alert(jQuery(this).text());
        });
    });
    $('pp').style.display = 'none'; //使用prototype.js隱藏元素
</script>

（2）想確保jQuery不與其他庫衝突，又想自定義快捷方式：

<script type="text/javascript">
    var $j = jQuery.noConflict();   //自定義快捷方式
    $j(function(){                  //使用jQuery，利用自定義快捷方式  $j
        $j("p").click(function(){
            alert.($j(this).text());
        });
    });
    $('pp').style.display = 'none'; //使用prototype.js隱藏元素
</script>

<script type="text/javascript">
    jQuery.noConflict();                 //將變數$的控制權移交給prototype.js
    jQuery(function($){                  //使用jQuery設定頁面載入時執行的函數
        $("p").click(function(){         //函數內部繼續使用$()
            alert.($(this).text());
        });
    });
    $('pp').style.display = 'none';      //使用prototype.js隱藏元素
</script>

<2>

<script type="text/javascript">
    jQuery.noConflict();                 //將變數$的控制權移交給prototype.js
    (function($){                        //定義匿名函數
        $(function(){                    //匿名函數內部的$均為jQuery
            $("p").click(function(){
                alert.($(this).text());
            });
        });
    })(jQuery);                          //執行匿名函數且傳遞實參jQuery
    $('pp').style.display = 'none';      //使用prototype.js隱藏元素
</script>

第2章，jQuery選擇器

jQuery選擇器的優勢

if($("#tt")){   /* do something */   }

應根據獲取的元素長度來判斷：

if($("#tt").length > 0){   /* do something */   }

或轉換成DOM對象：

if($("#tt")[0]){   /* do something */   }

選擇器中的註意事項

第3章，jQuery中的DOM操作

DOM操作分類

jQuery中的DOM操作

$("ul li:eq(1)").remove();

$("ul li").remove("li[title!=test]");

$("p").replaceWith("<strong>hello</strong>");
$("<strong>hello</strong>").replaceAll("p");

<strong>hello</strong>

$("strong").wrap("<b></b>");     //用b標簽把strong元素包裹起來

<b><strong>hello</strong></b>

<strong>hello</strong>
<strong>hello</strong>

$("strong").wrap("<b></b>");

<b><strong>hello</strong></b>
<b><strong>hello</strong></b>

<b>
<strong>hello</strong>
<strong>hello</strong>
</b>

<strong>hello</strong>

$("strong").wrapInner("<b></b>");

<strong><b>hello</b></strong>

var $p = $("p");
var p_txt = $p.attr("title");

$("p").attr("title","value");     //用於設置單個屬性
$("p").attr({"title":"you title","name":"you name"});     //用於設置多個屬性，使用對象傳遞

$("p").removeAttr("title");

$("p").addClass("another");

$toggleBtn.toggle(function(){
     //代碼1
},function(){
     //代碼2
});

$("p").toggleClass("another");

$("p").css("color","red");     //設置單個
$("p").css({"color":"red","fontSize":"30px");     //設置多個

$("p").height();