2019-04-22

jQuery

jQuery 是一套兼容多瀏覽器的 javascript 腳本庫. 核心理念是寫得更少，做得更多位隶，

使用 jQuery 將極大的提高編寫 javascript 代碼的效率,幫助開發(fā)者節(jié)省了大量的工作,讓

寫出來的代碼更加優(yōu)雅, 更加健壯，“如虎添翼”. 同時網(wǎng)絡(luò)上豐富的 jQuery 插件也讓我

們的工作變成了"有了 jQuery,一切 soeasy."--因為我們已經(jīng)站在巨人的肩膀上了短蜕。

jQuery 在 2006 年 1 月由美國人 John Resig 在紐約的 barcamp 發(fā)布患雏，吸引了來自

世界各地的眾多 JavaScript 高手加入拾因，由 Dave Methvin 率領(lǐng)團(tuán)隊進(jìn)行開發(fā)或渤。如今只洒，

jQuery 已經(jīng)成為最流行的 javascript 框架，在世界前 10000 個訪問最多的網(wǎng)站中劳坑，有超

過 55%在使用 jQuery。

一成畦、jQuery 的下載和安裝

1. 官網(wǎng)

http://jquery.com/ 下載

2. 版本

jQuery 2.x has the same API as jQuery 1.x, but does not support?

Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下載 1.X)

（1）完整版 : jquery-2.1.4.js -->學(xué)習(xí)版本(學(xué)習(xí)源碼想高手學(xué)習(xí)是最好學(xué)習(xí)方法)

（2）壓縮版 : jquery-2.1.4.min.js -->開發(fā)版本(壓縮版距芬，減少傳輸)

3. 優(yōu)點

（1）提供了強(qiáng)大的功能函數(shù)

（2）解決瀏覽器兼容性問題

（3）實現(xiàn)豐富的 UI 和插件

（4）糾正錯誤的腳本知識

太多了! 等待我們一一去發(fā)現(xiàn)...............

4. 安裝

在頁面引入即可

二涝开、jQuery 核心

"$"符號在 jQuery 中代表對 jQuery 對象的引用, "jQuery"是核心對象，通過該對象

可以獲取 jQuery 對象框仔，調(diào)用 jQuery 提供的方法等舀武。只有 jQuery 對象才能調(diào)用 jQuery 提供

的方法。

$ <==> jQuery

三离斩、DOM 對象和 jQuery 包裝集對象

明確 Dom 對象和 jQuery 包裝集的概念, 將極大的加快我們的學(xué)習(xí)速度银舱。原始的 Dom 對

象只有 DOM 接口提供的方法和屬性，通過 js 代碼獲取的對象都是 dom 對象跛梗；而通過 jQuery

獲取的對象是 jQuery 包裝集對象寻馏，簡稱 jQuery 對象，只有 jQuery 對象才能使用 jQuery 提

供的方法核偿。

1. Dom 對象

javascript 中獲取 Dom 對象诚欠，Dom 對象只有有限的屬性和方法:

var div = document.getElementById("testDiv");

var divs = document.getElementsByTagName("div");

2. jQuery 包裝集|對象

可以說是 Dom 對象的擴(kuò)充.在 jQuery 的世界中將所有的對象, 無論是一個還是一組,?

都封裝成一個 jQuery 包裝集,比如獲取包含一個元素的 jQuery 包裝集:

var jQueryObject = $("#testDiv");

3. Dom 轉(zhuǎn) jQuery 對象

Dom 對象轉(zhuǎn)為 jQuery 對象，只需要利用$()方法進(jìn)行包裝即可

var domDiv = document.getElementById('mydiv'); // 獲取 Dom 對象

mydiv = $(domDiv);

4. jQuery 對象轉(zhuǎn) Dom 對象

jQuery 對象轉(zhuǎn) Dom 對象漾岳，只需要取數(shù)組中的元素即可

//第一種方式獲取 jQuery 對象

var jqueryDiv = jQuery('#mydiv');

//第二種方式獲取 jQuery 對象

jqueryDiv = $('#mydiv');

var dom = jqueryDiv[0];//將以獲取的 jquery 對象轉(zhuǎn)為 dom

通過遍歷 jQuery 對象數(shù)組得到的對象是 Dom 對象轰绵，可以通過$()轉(zhuǎn)為 jQuery 對象

$('#mydiv').each(function() {//遍歷

var jquery = $(this);

})

案例

<div id="mydiv">write less, do more</div>

console.log("-------------獲取 dom 對象------------------")

//dom 對象

var domDiv = document.getElementById("mydiv");

console.log(domDiv);

console.log("-------------獲取 jquery 對象------------------")

//獲取 jquery 對象

//第一種方式

var jqueryDiv = jQuery('#mydiv');

console.log(jqueryDiv);

//第二種方式

jqueryDiv = $('#mydiv');

console.log(jqueryDiv);

console.log("-------------dom 轉(zhuǎn) jquery------------------")

//dom 轉(zhuǎn) jquery 包裝集/對象

var obj = $(domDiv);

console.log(obj);

console.log("-------------jquery 轉(zhuǎn) dom------------------")

//jquery 對象轉(zhuǎn) dom 對象

var dom = $('#mydiv')[0];//獲取 jquery 對象轉(zhuǎn)為 dom

//或

var dom2 = jqueryDiv[0];//將 jquery 對象轉(zhuǎn)為 dom

console.log(dom);

console.log(dom2);

/*this 代表了 dom 對象，不是 jquery 對象*/

console.log("-------------dom 轉(zhuǎn) jquery------------------")

$('#mydiv').each(function() {//通過 id 選擇器選擇了 id 為 mydiv 的所有元素

然后進(jìn)行遍歷尼荆，那么遍歷出的每個元素就是 id 為 mydiv 的標(biāo)簽元素左腔，而 this 就代表了當(dāng)前

的這個元素

var jquery = $(this);

})

console.log("-------------jquery 轉(zhuǎn) dom------------------")

$('#mydiv').each(function() {

var dom3 = this;

})

</script>

四、jQuery 選擇器

和使用 js 操作 Dom 一樣捅儒，獲取文檔中的節(jié)點對象是很頻繁的一個操作液样，在 jQuery 中提

供了簡便的方式供我們查找|定位元素，稱為 jQuery 選擇器野芒，選擇器可以說是最考驗一個人

jQuery 功力的地方蓄愁，通俗的講, Selector 選擇器就是"一個表示特殊語意的字符串"。只

要把選擇器字符串傳入上面的方法中就能夠選擇不同的 Dom 對象并且以 jQuery 包裝集的形

式返回狞悲。

jQuery 選擇器按照功能主要分為"選擇"和"過濾"撮抓。并且是配合使用的，具體分類如下摇锋。

基礎(chǔ)選擇器掌握即可 ,其他用到再查閱丹拯。

1. 基礎(chǔ)選擇器 Basics（掌握即可）

選擇器名稱舉例

id 選擇器 #id $("#testDiv")選擇 id 為 testDiv 的元素

元素名稱選擇器 element $("div")選擇所有 div 元素

類選擇器 .class $(".blue")選擇所有 class=blue 的元素

選擇所有元素 * $("*")選擇頁面所有元素

組合選擇器 selector1,

selector2,

selectorN

$("#testDiv,span,.blue")同時選中這幾個選

擇器匹配的元素

.blue{

background: blue;

}

</style>

<body>

<div id="mydiv2" class="blue">元素選擇器</div>

<span class="blue">樣式選擇器</span>

</body>

charset="utf-8">

</script>

//id 選擇器

console.log("======id====");

var idSelecter = $('#mydiv1');

console.log(idSelecter.html());

console.log(idSelecter.text());

//元素選擇器

console.log("======name====");

var nameSe = $('div');//有多個 div 元素

nameSe.each(function(){

//this 是 dom 對象，$(this)是 jquery 對象

console.log($(this).text());

});

//類選擇器荸恕，class

console.log("======class====");

var classSe = $('.blue');//有多個 class=blue 的元素

classSe.each(function(){

console.log($(this).text());

});

//通用選擇器：*

console.log("======所有元素====");

var all = $("*");

console.log(all.length);

//組合選擇器

console.log("======組合====");

var unionSe = $('span, .blue,div');

unionSe.each(function(){

console.log($(this).text());

});

</script>

dom：innerHTML="...."乖酬，innerText="....."

jquery： .html("...")，.text("......")

2. 層次選擇器 Hierarchy

選擇器名稱舉例

后代選擇器 ancestor descendant $("#parent div")選擇 id 為 parent 的元素的所有 div 元素

子代選擇器 parent > child $("#parent>div")選擇 id 為 parent 的直接 div 子元素

相鄰選擇器 prev + next $(".blue + img")選擇 css 類為 blue 的下一個 img 元素

同輩選擇器 prev ~ sibling $(".blue ~ img")選擇 css 類為 blue 的之后的 img 元素

<!DOCTYPE html>

<html>

<head>

<title>層次選擇器</title>

type="text/javascript">

?</script>

.testColor{

background: green;

}

.gray{

background: gray;

}

</style>

</head>

<body>

<div id="parent">層次擇器

<div id="child" class="testColor">父選擇器

<img src="http://www.baidu.com/img/bd_logo1.png"?

?width="270" height="129" />

<img src="http://www.baidu.com/img/bd_logo1.png"?

?width="270" height="129" />

</div>

<div>

選擇器 2<div>選擇器 2 中的 div</div>

</div>

</body>

console.log("=========后代選擇器-選擇所有后代=====");

var ancestorS = $('#parent div');

ancestorS.each(function(){

console.log($(this).text());

});

console.log("=========子代選擇器-選擇兒子輩=====");

var child = $('#parent>div');

child.each(function(){

console.log($(this).text());

});

console.log("=========相鄰選擇器=====");

var pre_next = $(".gray + img");

console.log(pre_next.length);

console.log("=========同輩選擇器,其后融求，（弟弟）=====");

var pre_siblings = $(".gray ~ img");

console.log(pre_siblings.length);

</script>

</html>

3. 表

單選擇

器

Forms j/x 選擇器

名稱舉例

表單選擇器 :input 查找所有的 input 元素：$(":input")咬像；注意：會匹配所

有的 input、textarea、select 和 button 元素县昂。

文本框選擇器 :text 查找所有文本框：$(":text")

密碼框選擇器 :password 查找所有密碼框：$(":password")

單選按鈕選擇器 :radio 查找所有單選按鈕：$(":radio")

復(fù)選框選擇器 :checkbox 查找所有復(fù)選框：$(":checkbox")

提交按鈕選擇器 :submit 查找所有提交按鈕：$(":submit")

圖像域選擇器 :image 查找所有圖像域：$(":image")

重置按鈕選擇器 :reset 查找所有重置按鈕：$(":reset")

按鈕選擇器 :button 查找所有按鈕：$(":button")

文件域選擇器 :file 查找所有文件域：$(":file")

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

</head>

<body>

<input type="hidden" name="uno" value="9999"?

disabled="disabled"/>

姓名:<input type="text" id="uname" name="uname" /><br />

密碼:<input type="password" id="upwd" name="upwd"?

value="123456" /><br />

年齡:<input type="radio" name="uage" value="0"?

checked="checked"/>小屁孩

<input type="radio" name="uage" value="1"/>你懂

得 <br />?

愛好:<input type="checkbox" name="ufav" value="籃球"/>籃

球

<input type="checkbox" name="ufav" value="爬床

"/>爬床

<input type="checkbox" name="ufav" value="代碼

"/>代碼<br />

來自:<select id="ufrom" name="ufrom">

<option value="-1" selected="selected">請選

擇</option>

</select><br />

簡介:<textarea rows="10" cols="30"?

name="uintro"></textarea><br />

頭像:<input type="file" /><br />

<input type="image"?

src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/>

<button type="submit" onclick="return checkForm();">提交

</button>

</form>

</body>

</html>

function checkForm(){

//獲取所有的表單元素

$(":input").each(function(){

//console.log($(this)[0]);

console.log($(this)[0].tagName);

})

console.log("------+++++++++++++++++++++--------")

//獲取 text

console.log("text-->"+$(":text").length); //1

//獲取 password

console.log("password-->"+$(":password").length);//1

//獲取 radio

console.log("radio-->"+$(":radio").length);//2

//獲取 checkbox

console.log("checkbox-->"+$(":checkbox").length);//3

//獲取 file

console.log("file-->"+$(":file").length);//1

//獲取按鈕

console.log("button-->"+$(":button").length);//2

//獲取 submit 按鈕

console.log("submit-->"+$(":submit").length);//1

//獲取 image 按鈕

console.log("image-->"+$(":image").length);//1

//獲取 reset 按鈕

console.log("reset-->"+$(":reset").length);//1

return false;

}

</script>

五肮柜、jQuery DOM 操作

jQuery 也提供了對 HTML 節(jié)點的操作，而且在原生 js 的基礎(chǔ)之上進(jìn)行了優(yōu)化倒彰，使用起來

更加方便审洞。

常用的從幾個方面來操作，查找元素（選擇器已經(jīng)實現(xiàn)）待讳；創(chuàng)建節(jié)點對象芒澜；訪問和設(shè)置節(jié)

點對象的值，以及屬性创淡；添加節(jié)點痴晦；刪除節(jié)點；刪除辩昆、添加阅酪、修改、設(shè)定節(jié)點的 CSS 樣式汁针；動

畫操作等术辐。注意：以下的操作方式只適用于 jQuery 對象。

1. 操作元素的屬性

獲取屬性

方法說明舉例

attr(屬性名稱) 獲取指定的屬性值施无，操作 checkbox 時選中返回

checked辉词，沒有選中返回 undefined。

attr('checked')

attr('name')

prop(屬性名稱) 獲取具有 true 和 false 兩個屬性的屬性值 prop('checked')

<input type="checkbox" name="ch" checked="checked"/> aa

<input type="checkbox" name="ch" /> bb

</form>

var ch = $("input[type='checkbox']")

console.log(ch)

ch.each(function(idx, em){

?console.log(idx + "-" + $(em) + "=" + this)

?console.log($(em).attr('checked') + "==" + $(em).prop('checked'))

?console.log('--------------')

})

</script>

設(shè)置屬性

方法說明舉例

attr(屬性名稱猾骡，屬性值) 設(shè)置指定的屬性值瑞躺，操作 checkbox?

時選中返回 checked，沒有選中返

回 undefined兴想。

attr('checked',’checked’)

attr('name',’zs’)

prop(屬性名稱幢哨，屬性值) 設(shè)置具有 true 和 false 兩個屬性的

屬性值

prop('checked',’true’)

移除屬性

方法說明舉例

removeAttr(屬性名) 移除指定的屬性 removeAttr('checked')

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

</head>

<body>

<pre>

<h5>1.attr()</h5>:設(shè)置或者返回元素的屬性 ;

<h5>2.prop()</h5>:設(shè)置具有 true 和 false 兩個屬性的屬性，

如 checked, selected 或者 disabled嫂便。

</pre>

<hr />

?<input type="checkbox" name="all" checked="checked"/>全選

</body>

//獲取屬性值：attr

console.log($('#a1').attr('href'));

console.log($(':checkbox').attr('name'));

console.log($(':checkbox').attr('checked'));//若未選中顯示

undefined捞镰，選中顯示 checked

//獲取屬性值：prop

console.log($(":checkbox").prop('checked'));//若未選中顯示

false，選中顯示 true

console.log($('#a2').prop('href'))

//設(shè)置屬性值

$('#a1').attr('href','http://www.shsxt.com');

$(":checkbox").prop("checked",false);

//移除屬性

$('#a2').removeAttr('href');

</script>

</html>

2. 操作元素的樣式

對于元素的樣式毙替，也是一種屬性岸售，由于樣式用得特別多，所以對于樣式除了當(dāng)做屬性處理

外還可以有專門的方法進(jìn)行處理厂画。

方法說明

attr(“class”) 獲取 class 屬性的值凸丸，即樣式名稱

attr(“class”,”樣式名”) 修改 class 屬性的值，修改樣式

addClass(“樣式名”) 添加樣式名稱

css() 添加具體的樣式

removeClass(class) 移除樣式名稱

增加元素的具體樣式袱院，格式：

1）css({‘樣式名’:’樣式值’,’樣式名 2’:’樣式值 2’})

例：css({"background-color":"red","color":"#fff"});

2）css(“樣式名”,”樣式值”)

例：css('color','white')

<!DOCTYPE html>

<html>

<head>

<title>設(shè)置元素樣式</title>

charset="utf-8"></script>

div{

?padding: 8px;

?width: 180px;

}

.blue{

background: blue;

}

.larger{

font-size: 30px;

}

.green {

background : green;

}

</style>

</head>

<body>

<h3>css()方法設(shè)置元素樣式</h3>

?<div id="conRed">大紅色</div>

?<div id="remove" class="blue larger">天藍(lán)色</div>

</body>

//獲取樣式名稱

console.log($("#remove").attr("class"));

//修改樣式屎慢，那么 id 為 remove 的元素樣式 class 只有 green

//$('#remove').attr("class","green")

//添加樣式名稱瞭稼，class 名稱 --疊加

//$('#conBlue').addClass("blue larger");

//添加元素具體樣式

//{ "":"" , "":"" } 名:值對

$('#conRed').css({"background-color":"red","color":"#fff"});

$('#remove').css('color','red');

//移除樣式

//$("#remove").removeClass("blue larger");

</script>

</html>

3. 操作元素的內(nèi)容

對于元素還可以操作其中的內(nèi)容，例如文本腻惠，值弛姜，甚至是 html。

方法說明

html() 獲取元素的 html 內(nèi)容

html("html 內(nèi)容") 設(shè)定元素的 html 內(nèi)容

text() 獲取元素的文本內(nèi)容妖枚，不包含 html

text("text 內(nèi)容") 設(shè)置元素的文本內(nèi)容，不包含 html

val() 獲取元素 value 值

val(‘值’) 設(shè)定元素的 value 值

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

</head>

<body>

?<div id="text"></div>

?<input type="text" name="uname" value="oop" />

</body>

//獲取 HTML 內(nèi)容苍在，包括 HTML 標(biāo)簽

console.log($('h3').html());

//獲取文本內(nèi)容绝页，不包括 HTML 標(biāo)簽

console.log($('h3').text());

//獲取 value 值

console.log($('[name=uname]').val());

//設(shè)置

$('#html').html("<p>使用 html 設(shè)置,看不到標(biāo)簽</p>");

$('#text').text("<p>使用 text 設(shè)置,能看到標(biāo)簽</p>");

$('[name=uname]').val("哈哈哈");

// console.info("abc");

// console.log("abc");

// console.warn("abc")

// console.error("abc");

</script>

</html>

4. 創(chuàng)建元素

在 jQuery 中創(chuàng)建元素很簡單，直接使用核心函數(shù)即可

$(‘元素內(nèi)容’)

$(‘<p>this is a paragraph!!!</p>’)

5. 添加元素

方法說明

prepend(content) 在被選元素內(nèi)部的開頭插入元素或內(nèi)容寂恬，被追加的 content 參數(shù)续誉，可以

是字符、HTML 元素標(biāo)記初肉。

$(content).prependTo(

selector)

把 content 元素或內(nèi)容加入 selector 元素開頭

append(content) 在被選元素內(nèi)部的結(jié)尾插入元素或內(nèi)容酷鸦，被追加的 content 參數(shù)，可以

是字符牙咏、HTML 元素標(biāo)記臼隔。

$(content).appendTo(s

elector)

把 content 元素或內(nèi)容插入 selector 元素內(nèi)，默認(rèn)是在尾部

before() 在元素前插入指定的元素或內(nèi)容:$(selector).before(content)

after() 在元素后插入指定的元素或內(nèi)容:$(selector).after(content)

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

div {

?margin: 10px 0px;

}

span{

?color: white;

?padding: 8px

}

.red{

?background-color: red;

}

.blue{

?background-color: blue;

}

.green{

?background-color: green;

}

</style>

</head>

<body>

<h3>prepend()方法前追加內(nèi)容</h3>

<h3>prependTo()方法前追加內(nèi)容</h3>

<h3>append()方法后追加內(nèi)容</h3>

<h3>appendTo()方法后追加內(nèi)容</h3>

?<span >小鮮肉</span>

?</div>?

</body>

</html>

var str ="<span id='mydiv' style='padding: 8px;width:?

180px;background-color:#ADFF2F;'>動態(tài)創(chuàng)建 span</span>";

//1妄壶、使用 prepend 前加內(nèi)容

$("body").prepend(str);

//2摔握、使用 prependTo 前加內(nèi)容

$("<b>開頭</b>").prependTo('body');

//3、使用 append 后加內(nèi)容

$("body").append(str);

//$("div").append($('.red'));//當(dāng)把已存在的元素添加到另一處的時候相當(dāng)于

移動

//4丁寄、使用 appendTo 后追加內(nèi)容

$(str).appendTo('body');

//$('.blue').appendTo("div");

</script>

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

span{

?color: white;

?padding: 8px

}

.red{

?background-color: red;

}

.blue{

?background-color: blue;

}

.green{

?background-color: green;

}

</style>

</head>

<body>

<h3>before() 和 after()方法在元素之前后插入內(nèi)容</h3>

?<span class="green">財大氣粗</span>

</body>

</html>

var str1 = "<span class='red'>土豪</span>";

var str2 = "<span class='blue'>暴發(fā)戶</span>";

$(".green").before(str1); //前置元素

$(".green").after(str2); //后存元素

</script>

6. 刪除元素

方法說明

remove() 刪除所選元素或指定的子元素氨淌，包括整個標(biāo)簽和內(nèi)容一起刪。

empty() 清空所選元素的內(nèi)容

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

span{

?color: white;

?padding: 8px;

?margin: 5px;

?float: left;

}

.green{

?background-color: green;

}

.blue{

?background-color: blue;

}

</style>

</head>

<body>

<span class="green">jquery<a>刪除</a></span>

?<span class="blue">javase</span>

?<span class="green">http 協(xié)議</span>

?<span class="blue">servlet</span>

</body>

</html>

//刪除所選元素或指定的子元素

//$("span").remove();

//刪除樣式為 blue 的 span

//$("span.blue").remove();

//清空元素

//$("span").empty();

//$(".green").empty();

</script>

7. 遍歷元素

each()

$(selector).each(function(index,element)) :遍歷元素

參數(shù) function 為遍歷時的回調(diào)函數(shù)伊磺，

index 為遍歷元素的序列號盛正，從 0 開始。

element 是當(dāng)前的元素屑埋，此時是 dom 元素豪筝。

<!DOCTYPE html>

<html>

<head>

span{

?color: white;

?padding: 8px;

?margin: 5px;

?float: left;

}

.green{

?background-color: green;

}

.blue{

?background-color: blue;

}

</style>

type="text/javascript" charset="utf-8"></script>

</head>

<body>

<span class="green">jquery</span>

?<span class="green">javase</span>

?<span class="green">http 協(xié)議</span>

?<span class="green">servlet</span>

</body>

$('span').each(function (idx , e) {

console.log(idx + " ---> " + $(e).text());

})

</script>

</html>

六、Jquery 事件

1. ready()加載事件

ready()類似于 onLoad()事件

ready()可以寫多個雀彼，按順序執(zhí)行

$(document).ready(function(){})等價于$(function(){})

<!DOCTYPE html>

<html>

<head>

<title>ready 事件</title>

charset="utf-8"></script>

//文檔載入完便觸發(fā) ready 方法

$(document).ready(function(){

$("div").html("ready go...");

})

//$(document).ready(function(){}) == $(function(){})?

$(function(){

$("p").click( function () {

$(this).hide();?

});

$(function(){

$("#btntest").bind("click",function(){

$("div").html("剁吧...");

});

</script>

</head>

<body>

<h3>頁面載入時觸發(fā) ready()事件</h3>

</body>

</html>

2. bind()綁定元素事件

為被選元素添加一個或多個事件處理程序壤蚜，并規(guī)定事件發(fā)生時運(yùn)行的函數(shù)。

$(selector).bind( eventType [, eventData], handler(eventObject))

eventType ：是一個字符串類型的事件類型徊哑，就是你所需要綁定的事件袜刷。這類類型可

以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click,?

dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,?

mouseleave,change, select, submit, keydown, keypress, keyup, error 。

[, eventData]：傳遞的參數(shù)莺丑，格式：{名:值,名 2:值 2}

handler(eventObject)：該事件觸發(fā)執(zhí)行的函數(shù)

簡單的 bind()事件

$(function(){

/*$("#test").bind("click",function(){

alert("世界會向那些有目標(biāo)和遠(yuǎn)見的人讓路Ｖ贰墩蔓！");

});*/

* js 的事件綁定

ele.onclick=function(){};

* */

//等同于上面的放方法

$("#test").click(function(){

alert("世界會向那些有目標(biāo)和遠(yuǎn)見的人讓路！萧豆！");

});

1.確定為哪些元素綁定事件

獲取元素

2.綁定什么事件（事件類型）

第一個參數(shù)：事件的類型

3.相應(yīng)事件觸發(fā)的奸披，執(zhí)行的操作

第二個參數(shù)：函數(shù)

* */

$("#btntest").bind('click',function(){

//$(this).attr('disabled',true);

$(this).prop("disabled",true);

})

});

</script>

<body>

<h3>bind()方簡單的綁定事件</h3>

<div id="test" style="cursor:pointer">點擊查看名言</div>

</body>

綁定多個事件

$(function(){

//綁定 click 和 mouseout 事件

/*$("h3").bind('click mouseout',function(){

console.log("綁多個事件");

});*/

//鏈?zhǔn)骄幊?/p>

$("h3").bind('click',function(){

alert("鏈?zhǔn)骄幊?1");

}).bind('mouseout',function(){

$("#slowDiv").show("slow");//讓 slowDiv 顯示

});

/*$("#test").click(function(){

console.log("點擊鼠標(biāo)了....");

}).mouseout(function () {

console.log("移出鼠標(biāo)了...");

});*/

$("#test").bind({

click:function(){

alert("鏈?zhǔn)骄幊?1");

mouseout:function(){

$("#slowDiv").show("slow");

}

});

</script>

<body>

<h3>bind()方法綁多個事件</h3>

<div id="test" style="cursor:pointer">點擊查看名言</div>

人之所以能，是相信能

</div>

</body>

自學(xué) jQuery 動畫

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末涮雷，一起剝皮案震驚了整個濱河市阵面，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌洪鸭，老刑警劉巖样刷，帶你破解...
沈念sama閱讀 218,858評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異览爵，居然都是意外死亡置鼻，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,372評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門蜓竹，熙熙樓的掌柜王于貴愁眉苦臉地迎上來箕母，“玉大人，你說我怎么就攤上這事俱济∷皇牵” “怎么了？”我有些...
開封第一講書人閱讀 165,282評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵姨蝴，是天一觀的道長俊啼。經(jīng)常有香客問我，道長左医，這世上最難降的妖魔是什么授帕？我笑而不...
開封第一講書人閱讀 58,842評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮浮梢，結(jié)果婚禮上跛十，老公的妹妹穿的比我還像新娘。我一直安慰自己秕硝，他們只是感情好芥映，可當(dāng)我...
茶點故事閱讀 67,857評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著远豺，像睡著了一般奈偏。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上躯护，一...
開封第一講書人閱讀 51,679評論 1贊 305
城市分裂傳說
那天惊来，我揣著相機(jī)與錄音，去河邊找鬼棺滞。笑死裁蚁，一個胖子當(dāng)著我的面吹牛矢渊，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播枉证，決...
沈念sama閱讀 40,406評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼矮男，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了室谚？” 一聲冷哼從身側(cè)響起毡鉴，我...
開封第一講書人閱讀 39,311評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎秒赤，沒想到半個月后眨补，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,767評論 1贊 315
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡倒脓，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,945評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了含思。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崎弃。...
茶點故事閱讀 40,090評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖含潘，靈堂內(nèi)的尸體忽然破棺而出饲做，到底是詐尸還是另有隱情，我是刑警寧澤遏弱，帶...
沈念sama閱讀 35,785評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布盆均，位于F島的核電站，受9級特大地震影響漱逸，放射性物質(zhì)發(fā)生泄漏泪姨。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,420評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一饰抒、第九天我趴在偏房一處隱蔽的房頂上張望肮砾。院中可真熱鬧，春花似錦袋坑、人聲如沸仗处。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,988評論 0贊 22
一樁弒父案枣宫，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽婆誓。三九已至，卻和暖如春也颤，著一層夾襖步出監(jiān)牢的瞬間洋幻，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,101評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工歇拆，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留鞋屈，地道東北人范咨。一個月前我還...
沈念sama閱讀 48,298評論 3贊 372
代替公主和親
正文我出身青樓，卻偏偏與公主長得像厂庇，于是被迫代替她去往敵國和親渠啊。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,033評論 2贊 355

2019-04-22

推薦閱讀更多精彩內(nèi)容