屬性

attr(“屬性”，“屬性值”)　　添加屬性

attr(“屬性”)　　獲取屬性值

removeAttr()　　移除屬性

//$("").attr("value")可以簡寫為
$("").val()

事件

bind(事件類型，處理函數)　　綁定事件

事件類型（處理函數）　　比如：click()

unbind()　　移除所有事件的處理程序

unbind(“click”)　　移除所有的click事件處理程序

unbind("click",函數名)　　移除click事件的指定名稱的處理函數，這種無法移除匿名函數

dom事件不支持多播（一個事件只能註冊一個處理函數），JQuery支持多播（一個事件可以指定多個處理函數）

頁面加載

window.onload=function(){}　　標簽加載完成，並且標簽指定的資源也加載完成

$(document).ready(function(){})==$(function(){})　　標簽加載完成，標簽指定的資源可能還沒有加載完成（比如圖片還沒加載完成）

隱式叠代

會自動將數組中的每個元素進行事件綁定

集成事件

hover(fn1,fn2)　　fn1表示mouseover的處理函數，fn2表示mouseout的處理函數

toggle(fn1,fn2...fnN)　　當元素被click後，輪流執行fn1、fn2、fnN方法（註：1.9版本往後不支持事件切換功能）

　　　　　　　　　 var
 
 num=0;
                $("div").click(function(){
                    num++;
                    if(num%2!=0){
                        $("div").removeClass("white");
                        $("div").addClass("black");
                    }else{
                        $("div").removeClass("black");
                        $(
 
"div").addClass("white");
                    }
                })

one(type,fn)　　表示註冊的時間只響應一次，然後失效，type表示事件類型

轉換

JQuery對象轉換成dom對象，通過[下標]的形式返回dom對象

dom對象轉換成JQuery對象，$(dom對象)

動態操作元素

創建元素

$("<span>你好</span>")

添加元素

append()　　$("#con").append($("<span>hi</span>"));往容器的最後追加自己

appendTo()　　$("<span>hi</span>").appendTo($("#con"))把自己追加到容器的最後

prepend()　　$("#con").prepend($("<span>hi</span>"));往容器的開頭追加自己

prependTo()　　$("<span>hi</span>").prependTo($("#con"))把自己追加到容器的開頭

after()　　同級添加（在當前元素後面）

insertAfter()

before()　　同級添加（在當前元素前面）

insertBefore()

刪除元素

empty()　　清空子元素

remove(selector)　　無參表示把自己幹掉，有參表示移除符合選擇器的元素

省市聯動　

var data={
                "北京":["朝陽","海澱","大興","豐臺","昌平"],
                "河北":["邯鄲","石家莊","邢臺","保定"],
                "山東":["威海","濟南","榮成"]
            }
            $(function(){
                //創建一個省的下拉列表
                var proSel = $(‘<select id="province"></select>‘);
                //追加到body裏
                $(‘body‘).append(proSel);
                //創建一個市的下拉列表
                var citySel=$(‘<select id="city"></select>‘);
                //追加到body裏
                $(‘body‘).append(citySel);
                //each遍歷data，key為鍵，value為值
                $.each(data, function(key,value) {
                    var province = $("<option></option>");
                    province.html(key);
                    proSel.append(province);
                });
                $("#province").change(function(){
                    $("#city").empty();
                    //遍歷省，key為索引，value為值
                    $.each(data[this.value], function(key, value) {
                        var city = $("<option></option>");
                        city.html(value);
                        citySel.append(city);
                    });
                })
            })

樣式操作

addClass()　　添加類樣式

removeClass()　　移除類樣式

css()　　添加樣式

//設置樣式
.css("color","red");
//設置多個樣式
.css({"color":"red","float":"left"});
//獲取樣式值
.css("color");

鏈式編程

$("p").text("哈哈").css("color","yellow");

註：end()　恢復到最近的一次鏈的破壞

層級選擇器

空格，後代元素

>,子元素

+，之後緊鄰的一個同級元素

~，之後所有的同級元素

next()、prev()、nextAll()、siblings()、parent()、childre()

過濾選擇器

：first、：last、：eq()、：gt()、：lt()、：not(選擇器)、：even偶數、：odd奇數

標題的快速獲取

//普通方法
$(‘h1,h2,h3,h4,h5,h6‘)
//快捷方法
$(‘:header‘)

屬性選擇器

[attr=value]　　 等於

[attr!=value]　　不等

[attr^=value]　　以此開頭

[attr$=value]　　以此結尾

[attr*=value]　　包含

[attr1][attr2][attr3]　　並且

表單選擇器

：input　　所有input（不包括select和textare）

：text　　所有文本框

：password　　所有密碼框

：radio　　所有單選按鈕

：checkbox　　所有復選按鈕

：submit　　所有提交按鈕

：image　　所有圖片（type="image"）

：reset　　所有重置按鈕

：button　　所有button

：file　　所有文件

：hidden　　所有隱藏域

:enabled　　可用的

:disabled　　不可用的

:checked　　選中（radio、checkbox）

:selected　　選中（select）

創建表格

var data=[
            {id:"1",country:"china",capital:"北京"},
            {id:"2",country:"US",capital:"紐約"},
            {id:"3",country:"UK",capital:"不知"}
            ];
　　　　　　　　　 var table = $("<table></table>");
                $(‘body‘).append(table);
                //遍歷對象
                $.each(data, function(index,obj) {
                    var tr = $("<tr></tr>");
                    table.append(tr);
                    //遍歷屬性
                    $.each(obj, function(key,value) {
                        var td = $("<td></td>");
                        td.text(value);
                        tr.append(td);
                    });
                });

方法調用

　　　　　　　　　 var id=10;//為window對象定義了屬性id
                function showId(){
                    alert(this.id);
                }
                //第一種方式讓this指向Person對象
                function Person(){
                    this.id=20;//為類定義了屬性id
                }
                var p=new Person();
                p.SayId=showId();//將方法showId賦值給變量
                p.SayId();//調用方法，使用p調用的方法，索引showId函數中的this就是p
                //第二種方式讓this指向Person對象()
                function Person2(fn){
                    this.id=20;
                    this.SayId=fn;
                }
                var p2=new Person2(showId);
                p.SayId();
                //但是上面兩種方法都改變了Person原有的成員，怎麽在不改變原有成員的情況下，讓person對象調用showId方法
                //如果傳參，參數是一個一個的，使用call，如果是數組，使用apply
                showId.call(new Person());//call表示由哪個對象來調用這個方法，方法中的this就是這個對象

Jquery-基礎