一、初始化

$(document).ready(function(){});
$(function(){});
$().ready(function(){});

1. js的window.onload事件是等到所有內容，以及我們的外部圖片之類的檔案載入完了之後，才回去執行
   只執行一次。
2. jQuery的入口函式 是在 html所有標籤都載入之後，就回去執行。寫幾次執行幾次。
   js建立物件：

var obj = {};                 //1
var obj1 = new Object();      //2
var obj2 = Object.create();   //3

1跟2的區別：
推薦使用第一個方式
第二種方式存在效率問題，因為要new物件，會涉及到原型查詢的問題。

二、選擇器

基本選擇器

層級選擇器

基本過濾選擇器

屬性選擇器

input的型別選擇器

$(“:radio”) $(“:text”) $(“:button”)
$(this)[hasHighlight ? “removeClass” : “addClass”](“highlight”)

mouseover/mouseout事件，滑鼠經過的時候會觸發多次，每遇到一個子元素就會觸發一次。
mouseenter/mouseleave事件，滑鼠經過的時候只會觸發一次

jQuery物件轉換成DOM物件:

方式一：$(“#btn”)[0]
方式二：$(“#btn”).get(0)
DOM物件轉換成jQuery物件：
var btn = document.getElementById(“btn”);
var jquery_btn = $(btn);
jquery獲取innerHTML $(“#id”).html()

jQuery的庫衝突問題

通過呼叫jQuery.noConflict(); 將$控制權轉移給其他庫。

三、DOM

（一）節點

1.查詢節點 屬性：$p.attr(“title”) 元素：$(“ul li:eq(1)”).text()
2.建立節點 元素（li）：文字（草莓）：屬性（草莓）：$("ul").append($("<li tittle=’草莓’>草莓</li>"))
3.插入節點
append() 正常加 appendTo()邏輯反的，往裡面加 prepend() prependTo()
after() insertAfter() 前正常，後邏輯反。 before() insertBefore()
4.刪除節點
（1）remove var $li = $(“ul li:eq(1)”).remove(); 刪除後，得到刪除節點的引用,還可以操作新增給其他節點。也可以直接通過append等轉移節點，可以達到刪除效果。
$(“ul li:eq(1)”).remove(“li[title!=草莓]”); 傳入選擇器選擇
（2）$(“ul li:eq(1)”).empty(); 刪除內容 li還在
5.複製節點
$("ul li:eq(1)").clone().appendTo("ul"); 傳入true，克隆節點事件。
6.替換節點
replaceWith() replaceAll() 前正常，後邏輯反。
7.包裹節點
wrap() 後包裹前 每個符合情況單獨包裹
wrapAll() 符合元素的所有全部包裹一次
wrapInner() 包裹內容

（二）屬性

1.獲取：$(“ul”).attr(“title”) 設定：$(“ul”).attr(“title”,”your title”) $(“ul”).attr({“title”:”your title”,”color”:”red”});
html() val() text() height() width() css()
2.刪除：$(“ul”).removeAttr(“title”)

（三）樣式

1．獲取：$(“ul”).attr(“class”) 設定：$(“ul”).attr(“class”,”high”)
2．追加：$(“ul”).addClass(“class”) 追加同一屬性會覆蓋 第一次呼叫與attr相同
3．移除：removeClass() 不傳引數刪除所有class屬性，傳引數刪除引數
4．切換：$(“ul”).toggleClass(“class”)
5．$(“ul”).hasClass(“class”) 相當於 (“ul”).is(“.another”)

（四）HTML 文字 值

1.html() innerHTML 不能用於XML
2.text() innerText XML XHTML都有效 FireFox 不能用innerText 但是可用text()
3.val() 讀寫 下拉選擇 $("select").val("22"); $("select").val(["22",”33”]);

（五）遍歷節點

1.children()
2.next() 後面的同輩節點 prev()
3.siblings() 元素前後所有同輩節點
4.closest() 找最近的匹配元素，不匹配逐級向上查詢。
5.find() filter() nextAll() prevAll() parent() parents()

（六）CSS DOM

1.$(“li”).css(“color”) $(“li”).css(“color”,”red”) $(“li”).css({“color”:”red”,”tittle”:”title content”}) 直接寫數字預設轉畫素

$(“li”).width()   $(“li”).width(“400px”)  $(“li”).width(400)  $(“li”).width(“400em”)  

1. offset() 獲取元素的offset物件，該物件有left和top元素，左偏移和右偏移。
2. position() 獲取元素相對於最近的一個position樣式屬性為relative absolute的祖父節點的相對偏移。
   4.scrollTop() scrollLeft() 距頂端 距左端 的距離 傳入值可設定滾動位置

四、事件和動畫

1．事件

（一）事件繫結

1.$li.click(function(){})
2.$li.bind(“click”,function(){})

（二）合成事件

1．$li.hover(fn1, fn2) 相當於mouseLeave mouseEnter
2．$li.toggle(fn1,fn2) 模擬滑鼠連續單擊

（三）事件冒泡

1．event.stopPropagation() event.preventDefault()
簡寫：return false; jquery不支援事件捕獲
2．event.type()
3．event.target()
4．event.relatedTarget()
5．event.pageX() event.pageY() 滑鼠點選座標
6．event.which() 獲取滑鼠左中右鍵 1左,2中,3右
7．event.metaKey() 按鍵
8．originalEvent() 指向原始事件物件
9．$li.one(“click”,function(){}) 相當於bind 只有效一次，之後點選無作用

（四）移除事件

1．$btn.unbind(“click”); 沒有引數，刪除所有繫結時間，函式作為第二個引數，只刪除事件事件處理函式。只有一個引數，傳入一個型別，只刪除一個事件繫結。

（五）模擬操作

1．$li.trigger(“click”) $li.click()
2．觸發自定義事件 $li.bind(“myClick”,function(){}) $li.trigger(“myClick”)
3．傳遞資料 $li.bind(“myClick”,function(event,message1,message2){}) $li.trigger(“myClick”,[“引數一”,”引數二”])
4．執行預設操作
$(“input”).trigger(“focus”) 不僅會觸發focus繫結的事件，也會使input本身繫結事件
$(“input”).triggerHandler(“focus”) 不觸發瀏覽器預設操作，觸發focus事件

（六）其他用法

1．繫結多個事件型別

$li.bind(“mouseover mouseout”,function(){})

2．名稱空間

$li1.bind(“click.plugin”,function(){})
$li2.bind(“mouseover.plugin”,function(){})
$li3.unbind(“.plugin”)   整體解除繫結

3．相同控制元件 不同名稱空間的相同事件

$li1.bind(“click”,function(){});
$li1.bind(“click.plugin”,function(){});
$li2.bind(“click”,function(){
$li1.trigger(“click!”);       
});

2．jQuery中的動畫

1.show () hide() 引數 slow 600ms normal 400ms fast 200ms 傳入數字預設為ms 同時變高度 寬度 不透明度
2.fadeIn() fadeOut() 不透明度
3.slideUp() slideDown() slow 600ms normal 400ms fast 200ms
4.自定義動畫

$li.animate({left:”500px”},3000);

scrollTop
5.累加、累減動畫

$li.animate({left:”+=500px”},3000);

6.多重動畫 綜合動畫

$li.animate({left:”500px”,height:”200px”},3000);  //同時執行多個動畫
$li.animate({left:”500px”},3000)

.animate({height:”200px”},3000); //按順序執行多個動畫
7.停止動畫和判斷是否處於動畫狀態

stop([clearQueue][,gotoEnd])
$li.stop(true,true)
$li.is(“:animated”)

8.toggle() slideToggle() fadeIn(600,0.2)
9

.$li.animate({opacity:”show”},400) ;   //相當於：$li.show(400)  $li.fadeIn(400)
$li.animate({height:”show”},400) ;  // 相當於：$li.slideDown(400)
$li.animate({opacity:”0.6”},400) ;  // 相當於：$li.fadeTo(400,0.6)

10.$("#comment").animate({height: "+=50"}, 1000);
11.$comment.is(":animated") 判斷處於動畫狀態 返回布林值

例子：

$('tbody>tr').click(function(){
                $(this).addClass("highlight")
                .siblings().removeClass("highlight").end()
                .find(':radio').attr("checked",true);
            });
//$(':radio:checked').parent().parent().addClass("highlight");
            //$(':radio:checked').parents('tr').addClass("highlight");
            $('tbody>tr:has(":checked")').addClass("highlight");

$('th[class="h"]').click(function(){
                $(this).parent().siblings('.child_' + $(this).parent()[0].id).toggle();   //點選自動執行與取消
            });

動態篩選

$("#filterName").keyup(function(){
                $("table tbody tr").hide().filter(":contains("+ $(this).val() +")").show();
            }).keyup();

$('#cssfile').attr("href", "css/" + this.id + ".css");     //jQuery
        $('#cssfile')[0].href = ("css/" + this.id + ".css");       //js

var hasHighlight = $(this).hasClass('highlight');
                $(this)[hasHighlight ? "removeClass" : "addClass"]("highlight")
                .find(':checkbox').attr("checked", !hasHighlight);

$('tbody>tr:has(":checked")').addClass("highlight");
var index = $('div.tab_menu>ul>li').index(this);    //傳入js物件