jQuery筆記
jQuery
什么是jQuery？
jQuery是一個(gè)實(shí)用的JavaScript函數(shù)庫，jQuery極大地簡化了JS對DOM的操作，封裝并實(shí)現(xiàn)的一系列常用的方法。
10年積累的網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有揭陽免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
jQuery庫封裝了JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。
其實(shí)除了jQuery，還有許許多多的開源好用的JavaScript庫，只不過jQuery較為流行，使用廣泛所以要著重了解和學(xué)習(xí)
jQuery能夠做什么？
快速獲取文檔元素
jQuery的選擇機(jī)制構(gòu)建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁面元素的方式。
提供漂亮的頁面動(dòng)態(tài)效果
jQuery中內(nèi)置了一系列的動(dòng)畫效果，可以開發(fā)出非常漂亮的網(wǎng)頁，許多網(wǎng)站都使用jQuery的內(nèi)置的效果，比如淡入淡出、元素移除等動(dòng)態(tài)特效。
創(chuàng)建AJAX無刷新網(wǎng)頁
AJAX是異步的JavaScript和XML的簡稱，可以開發(fā)出非常靈敏無刷新的網(wǎng)頁，特別是開發(fā)服務(wù)器端網(wǎng)頁時(shí)，比如PHP網(wǎng)站，需要往返地與服務(wù)器通信，如果不使用AJAX，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁，而使用AJAX特效后，可以對頁面進(jìn)行局部刷新，提供動(dòng)態(tài)的效果。
提供對JavaScript語言的增強(qiáng)
jQuery提供了對基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。
增強(qiáng)的事件處理
jQuery提供了各種頁面事件，它可以避免程序員在HTML中添加太多事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問題。
更改網(wǎng)頁內(nèi)容
jQuery可以修改網(wǎng)頁中的內(nèi)容，比如更改網(wǎng)頁的文本、插入或者翻轉(zhuǎn)網(wǎng)頁圖像，jQuery簡化了原本使用JavaScript代碼需要處理的方式。
jQuery如何使用？
上文提到j(luò)Query是一個(gè)實(shí)用的JavaScript函數(shù)庫，那么引入jQuery就和引入一個(gè)JavaScript文件的方式相同，通常是外部引入
jQuery文件可以從jQuery的官網(wǎng)下載或者其他第三方網(wǎng)站下載到不同的版本，引入到HTML頁面后即可使用
jQuery的基本設(shè)計(jì)和主要用法，就是"選擇某個(gè)網(wǎng)頁元素，然后對其進(jìn)行某種操作"
jQuery語法
jQuery 語法是通過選取 HTML 元素，并對選取的元素執(zhí)行某些操作
基礎(chǔ)語法： $(selector).action()
jQuery詳解
jQuery入口函數(shù)
等著DOM結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部
資源加載完成，jQuery幫我們完成了封裝。
-
第一種方法
$(document).ready(function(){ ...//此處是頁面DOM加載完成的入口 }); -
第二種方法
$(function(){ ...//此處是頁面DOM加載完成的入口 });
jQuery的頂級對象
-
$是jQuery的另外一個(gè)名稱
$(function(){ alert(111) })//alert(111) jQuery(function(){ alert(111) }) -
$是jQuery中的頂級對象（可以把元素包裝成我們的jQuery對象）
$('div').hide();
jQuery對象和DOM對象
-
DOM對象：用原生js獲取過來的對象就是DOM對象
var myDiv=document.querySelector('div'); -
jQuery對象：用jquery方式獲取過來的對象是jQuery對象。本質(zhì)：通過$符把元素進(jìn)行了封裝
$('div'); -
jQuery對象只能使用jQuery方法，DOM對象則使用原生的JavaScript方法和屬性
兩者之間可以相互轉(zhuǎn)換
-
DOM對象轉(zhuǎn)換為jQuery對象
-
直接獲取div，得到的就是jQuery對象
$('div'); -
已經(jīng)使用原生的js獲取過來DOM
var myDiv=document.querySelector('div'); $(myDiv);
-
-
jQuery對象轉(zhuǎn)換為DOM對象
$('div')[0].function(); $('div').get(0).function();
-
jQuery選擇器
$("選擇器") //里面選擇器直接寫CSS選擇器即可，要加引號
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $("#id") | 獲取指定id的元素 |
| 全選選擇器 | $("*") | 匹配所有的元素 |
| 類選擇器 | $(".class") | 獲取同一類class的元素 |
| 標(biāo)簽選擇器 | $("div") | 獲取同一標(biāo)簽的所有元素 |
| 并集選擇器 | $("div,p,li") | 獲取多個(gè)元素 |
| 交集選擇器 | $("li,current") | 交集元素 |
| 子代選擇器 | $("ul>li") | 使用>號，獲取親兒子層級的元素；注意，并不會(huì)獲取孫子層級的元素 |
| 后代選擇器 | $(“ul li”) | 使用空格，選擇后代選擇器，獲取ul下的所有l(wèi)i元素，包括孫子等。 |
jQuery隱式迭代
隱式迭代就是把匹配的所有元素內(nèi)部進(jìn)行遍歷循環(huán)，給每一個(gè)元素添加css這個(gè)方法
給匹配到的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不是我們再進(jìn)行循環(huán)，簡化我們的操作，方便我們調(diào)用。
<head>
<style>
div{
width: 300px;
height: 300px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$("div").css("background","pink");
</script>
</body>
jQuery篩選選擇器
| 語法 | 用法 | 描述 |
|---|---|---|
| :first | $("li:first") | 獲取第一個(gè)li元素 |
| :last | $("li:last") | 獲取最后一個(gè)選擇器 |
| :eq(index) | $(li:eq(2)) | 獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始 |
| :odd | $("li:odd") | 獲取到的li元素中，選擇索引號為奇數(shù)的元素 |
| :even | $("li:even") | 獲取到的li元素中，選擇索引號為偶數(shù)的元素 |
jQuery篩選方法
| 語法 | 用法 | 說明 |
|---|---|---|
| parent() | $("li").parent(); | 查找父級，最近一級 |
| parents() | $("li").parents("選擇器"); | 查找指定祖先父級 |
| children(selector) | $("ul").children("li") | 相當(dāng)于$("ul>li"),最近一級（親兒子） |
| find(selector) | $("ul").find("li") | 相當(dāng)于$("ul li"),后代選擇器 |
| siblings(selector) | $(".first").siblings("li") | 查找兄弟節(jié)點(diǎn)，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll() | 查找當(dāng)前元素之后所有的同輩元素 |
| prevAll([expr]) | $(".last").prevAll() | 查找當(dāng)前元素之前的所有同輩元素 |
| hasClass(class) | $('div').hasClass("protected") | 檢查當(dāng)前的元素是否含有某個(gè)特定的類 |
| eq(index) | $("li").eq(2) | 相當(dāng)于$("li:eq(2)"),index從0開始 |
$(".son").parent();
$('.nav').children("p").css("color","red");
$('.nav').find("p").css("color","red");
$(".content div").eq(index).siblings().hide();
$(".content div").eq(index).show();
jQuery樣式操作
-
操作css方法
jQuery可以使用css方法來修改簡單元素樣式；也可以操作類，修改多個(gè)樣式
-
參數(shù)只寫屬性名，則返回屬性值
$("div").css("width") -
參數(shù)是屬性名，屬性值，逗號分離，是設(shè)置一組樣式，屬性必須加引號，值如果是數(shù)字可以不用跟單位和引號
$("div").css("width","500px") -
參數(shù)可以是對象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號
$("div").css({ "width":"500", "height":"1000" })
-
-
設(shè)置類樣式方法
-
添加類
$("div").click(function(){ $(this).addClass("current"); }) -
刪除類
$("div").click(function(){ $(this).removeClass("current"); }) -
切換類
$("div").click(function(){ $(this).toggleClass("current"); })
-
-
類操作與className操作
原生JS中className會(huì)覆蓋元素原先里面的類名。
jQuery里面類操作只是對指定類進(jìn)行操作，不影響原先的類名
jQuery效果
-
顯示隱藏
-
show()
show([speed,[easing],[fn]])顯示參數(shù)
(1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("button").eq(0).click(function(){ $("div").show(1000,function(){ alert(12) }) }); -
hide()
hide([speed,[easing],[fn]])隱藏參數(shù)
(1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("button").eq(1).click(function(){ $("div").hide(1000,function(){ alert(1) }) }); -
toggle()
toggle([speed,[easing],[fn]])切換參數(shù)
(1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("button").eq(2).click(function(){ $("div").toggle(1000,function(){ alert(1) });
-
-
滑動(dòng)
-
slideDown()
slideDown([speed,[easing],[fn]])(1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").slideDown(1000); -
slideUp()
slideUp([speed,[easing],[fn]])(1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").slideUp(1000); -
slideToggle()
slideToggle([speed,[easing],[fn]])1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").slideToggle(1000); -
事件切換（就是鼠標(biāo)經(jīng)過和離開的復(fù)合寫法）
hover([over],out)(1)over：鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
(2)out：鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
$("button").eq(2).hover(function(){ $("div").slideUp(1000); },function(){ $("div").slideDown(1000); }); //相當(dāng)于 $("button").eq(2).hover(function(){ $("div").slideToggle(1000); });
-
-
動(dòng)畫隊(duì)列及其停止排隊(duì)方法
-
動(dòng)畫或效果隊(duì)列
動(dòng)畫或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就會(huì)造成多個(gè)動(dòng)畫或者效果隊(duì)列
-
停止排隊(duì)
stop()(1)stop()方法用于停止動(dòng)畫或效果
(2)注意：stop()寫到動(dòng)畫或者效果前面，相當(dāng)于停止結(jié)束上一次的動(dòng)畫
$("div").stop().slideToggle(1000);
-
-
淡入淡出
-
fadeIn()
fadeIn([speed,[easing],[fn]])1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").stop().fadeIn(1000); -
fadeOut()
fadeOut([speed,[easing],[fn]])1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").stop().fadeOut(1000); -
fadeToggle()
fadeToggle([speed,[easing],[fn]])1)參數(shù)可以省略，無動(dòng)畫直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").stop().fadeToggle(1000); -
fadeTo()
fadeTo([[speed],opacity,[easing],[fn]])(1)opacity透明度必須寫，取值0-1之間
(2)speed:三種預(yù)定速度之一的字符串（“show”，“normal”，or “fast”）或表示動(dòng)畫時(shí)長的毫秒數(shù)值（如：1000）。必須寫
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。
$("div").stop().fadeTo(1000,0.5);
-
-
自定義動(dòng)畫
-
animate()
animate(params,[speed],[easing],[fn])參數(shù)
(1)params:想要更改的樣式屬性，以對像形式傳遞，必須寫。屬性名可以不帶引號，如果是復(fù)合屬性采用駝峰命名法borderLeft。其余參數(shù)都可以省略
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值
(3)easing:(Optional)用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
//手風(fēng)琴效果 $(function(){ $(".king li").mouseenter(function(){ $(this).stop().animate({ width:200 }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); $(this).siblings("li").stop().animate({ width:100 }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut(); }) })
-
jQuery屬性操作
-
設(shè)置或獲取元素固有屬性值
元素固有屬性就是元素自帶的屬性，比如a元素里面的href，比如input元素里面的type
-
獲取屬性方法
prop("屬性") -
設(shè)置屬性語法
prop("屬性","屬性值")$("input").prop("checked") $("a").prop("title","wwww");
-
-
元素的自定義屬性
用戶自己給元素添加的屬性，我們稱之為自定義屬性。比如給div添加index=“1”
-
獲取屬性語法
attr("屬性") //類似原生getAttribute() -
設(shè)置屬性語法
attr("屬性","屬性值") //類似原生setAttribute()該方法也可以獲取H5自定義屬性
$("div").attr("index") $("div").attr("index","34")
-
-
數(shù)據(jù)緩存data()
data()方法可以在指定的元素上存取數(shù)據(jù)，并不會(huì)修改DOM元素結(jié)構(gòu)。一旦頁面刷新，之氣那存放的數(shù)據(jù)都將會(huì)被刪除
-
附加數(shù)據(jù)語法
data("name","value") //向被選元素附加數(shù)據(jù) -
獲取數(shù)據(jù)語法
data("name") //向被選元素獲取數(shù)據(jù)同時(shí)，還可以讀取HTML5自定義屬性data-index，得到的是數(shù)字型
$("span").data("uname","andy"); $("span").data("uname")
-
jQuery內(nèi)容文本值
-
普通元素內(nèi)容html()(相當(dāng)于原生innerHTML)
html() //獲取元素內(nèi)容 html("內(nèi)容") //設(shè)置元素內(nèi)容 $("div").html();//獲取元素內(nèi)容 $("div").html("123");//設(shè)置元素內(nèi)容 -
普通元素文本內(nèi)容text()（相當(dāng)于原生innerText）
text() //獲取元素內(nèi)容 text("內(nèi)容") //設(shè)置元素內(nèi)容 $("div").text(); //獲取元素內(nèi)容 $("div").text("123"); //設(shè)置元素內(nèi)容 -
設(shè)置表單值 val()
val() //獲取表單值 val("內(nèi)容") //設(shè)置表單內(nèi)容 $("input").val(); //獲取表單值 $("input").val("123"); //設(shè)置表單內(nèi)容tofixed(index)(保留幾位小數(shù)方法)
(p*n).toFixed(2)//保留兩位小數(shù)
jQuery尺寸、位置操作
-
jQuery尺寸
語法 用法 width()/height() 取得匹配元素寬度和高度值 只算width/height innerWidth()/innerHeight() 取得匹配元素寬度和高度值 包含padding outerWidth()/outerHeight() 取得匹配元素寬度和高度值 包含padding、border outerWidth(true)/outerHeight(true) 取得匹配元素寬度和高度值包含padding、borde、margin div{ width: 200px; height: 200px; background-color: aqua; padding: 10px; border: 15px solid red; margin: 20px; } $("div").width(500) console.log($("div").width()); //500 console.log($("div").innerWidth());//520 console.log($("div").outerWidth());//550 console.log($("div").outerWidth(true));//590- 以上參數(shù)為空，則是獲取相應(yīng)值，返回的是數(shù)字型
- 如果參數(shù)為數(shù)字，則是修改相應(yīng)值。
- 參數(shù)可以不必寫單位
-
jQuery位置
位置主要有三個(gè)：offset()、position、scrollTop()/scrollLeft()
-
offset()
offset()設(shè)置或返回被選元素相對于文檔的偏移坐標(biāo)，跟父級沒有關(guān)系
該方法有2個(gè)屬性left、top。offset().top用于獲取距離文檔頂部的距離，offset().left用于獲取距離文檔左側(cè)的距離。
可以設(shè)置元素的偏移：offset({top:10,left:30})
-
position()
position方法用于返回被選元素相對于帶有定位的父級偏移坐標(biāo)，如果父級都沒有定位，則以文檔為準(zhǔn)。
-
scrollTop()/scrollLeft()
scrollTop()方法設(shè)置或返回被選元素被卷去的頭部或左側(cè)。
-
jQuery元素操作
-
遍歷元素
JQuery隱式迭代對同一類元素做出了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷
語法1
$("div").each(function(index,domEle){xxx;})-
each()方法遍歷匹配的每一個(gè)元素。主要用DOM處理。each每一個(gè)
-
里面的回調(diào)函數(shù)有2個(gè)參數(shù)：index是每個(gè)元素的索引號，demEle是每個(gè)DOM元素對象，不是jQuery對象
-
想用jQuery方法，需要給這個(gè)dom元素轉(zhuǎn)換為jquery對象
var arr=["red","blue","pink"] $(function(){ $("div").each(function(index,domEle){ $(domEle).css("color",arr[index]) }) })語法2
$.each(object,function(index,element){xxx;})- $each()方法可用于遍歷任何對象。主要用于數(shù)據(jù)處理，比如數(shù)組，對象
- 里面的函數(shù)有兩個(gè)參數(shù)：index是每個(gè)元素的索引號，element遍歷內(nèi)容
-
-
創(chuàng)建元素
$("<li></li>") $("<li>我是后來創(chuàng)建的li</li>")動(dòng)態(tài)的創(chuàng)建了一個(gè)
-
添加元素
-
內(nèi)部添加
element.append("內(nèi)容") $("ul").append(li)//放到內(nèi)容的最后面 $("ul").prepend(li)//放到內(nèi)容的最前面把內(nèi)容放入匹配元素內(nèi)部的后面，類似于原生appendChild
-
外部添加
element.after("內(nèi)容") //把內(nèi)容放入目標(biāo)元素后面 $(".test").after(div) //把內(nèi)容放入目標(biāo)元素后面 element.before("內(nèi)容") //把內(nèi)容放入目標(biāo)元素前面 $(".test").before(div) //把內(nèi)容放入目標(biāo)元素前面
-
-
刪除元素
element.remove() //刪除匹配的元素（本身） $("ul").remove() element.empty() //可以刪除匹配的元素里面的子節(jié)點(diǎn) 孩子 $("ul").empty(); element.html() //可以刪除匹配元素里面的子節(jié)點(diǎn) 孩子 $("ul").html(); $(".p-action a").click(function(){ $(this).parents(".cart").remove(); })
jQuery事件
-
事件注冊
-
單個(gè)事件注冊
element.事件(function(){}) $("div").click(function(){事件處理程序})其他事件和原生基本一致
比如，mouseover、mouseout、blur、focus等
-
-
事件處理
on()綁定事件
- on()方法在匹配元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)
element.on(events,[selector],fn)1.events:一個(gè)或多個(gè)用空格分隔的事件類型，如"click"或“keydown”、
2.selector：元素的子元素選擇器
3.fn:回調(diào)函數(shù) 即綁定在元素身上的偵聽函數(shù)
//事件處理不同的 $("div").on({ click:function(){ $("div").css("background","black") }, mouseover:function(){ $("div").css("background","pink") } }) //事件處理相同的 $("div").on("mouseover mouseout",function(){ $(this).toggleClass("togg"); })- on()方法還可以進(jìn)行委派操作，事件委派的操作的定義是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素
$('ul').on('click','li',function(){ alert('hello world!'); })-
動(dòng)態(tài)創(chuàng)建的元素，click()沒有辦法綁定事件，on()可以給動(dòng)態(tài)生成的元素綁定事件
$("ul").on("click","li",function(){ alert(11) }) var li=$("<li>我是后來的</li>") $("ul").append(li);如果有的事件只想觸發(fā)一次，可以使用one()來綁定事件
$('ul').one('click','li',function(){ alert('hello world!'); })自動(dòng)觸發(fā)事件
有些事件希望自動(dòng)觸發(fā)，比如輪播圖自動(dòng)播放功能跟點(diǎn)擊右側(cè)按鈕一致?？梢岳枚〞r(shí)器自動(dòng)觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)
- 第一種
$("div").click();//第一種簡寫形式 元素.事件() 會(huì)觸發(fā)元素的默認(rèn)行為- 第二種
$("div").trigger("click");//第二種自動(dòng)觸發(fā)方式 會(huì)觸發(fā)元素的默認(rèn)行為- 第三種
$("div").triggerHandler("click");//第三種自動(dòng)觸發(fā)方式 不會(huì)觸發(fā)元素的默認(rèn)行為事件處理解綁
-
事件解綁off()
$("div").off() //解除了div身上的所有事件 $("div").off("click"); //解除了div身上的點(diǎn)擊事件 $("ul").off("click","li") //解除事件委托
-
事件對象
事件被觸發(fā)，就會(huì)有事件對象的產(chǎn)生
element.on(events,[selector],function(event){})阻止默認(rèn)行為：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()
jQuery拷貝對象
如果想要把某個(gè)對象拷貝(合并)給另外一個(gè)對象使用，此時(shí)可以用$.extend()方法
語法：
$.extend([deep],target,object1,[objectN])
-
deep:如果設(shè)true為深拷貝，默認(rèn)為false淺拷貝
-
target:要拷貝的對象
-
object1:待拷貝到第一個(gè)對象的對象
-
objectN:待拷貝到第N個(gè)對象的對象
-
淺拷貝是把被拷貝的對象復(fù)雜數(shù)據(jù)類型中的地址拷貝給目標(biāo)對象，修改目標(biāo)對象會(huì)影響被拷貝對象
-
深拷貝，前面加true，完全克?。截惖膶ο?，而不是地址），修改目標(biāo)對象不會(huì)影響被拷貝對象。
var targetObj={
id:1
};
var obj={
id:1,
name:"andy"
};
$.extend(targetObj,obj);//淺拷貝
$.extend(true,targetObj,obj);//深拷貝
jQuery多庫共存
jQuery使用$作為表示符，隨著jQuery的流行，其他js庫也會(huì)用這$作為標(biāo)識(shí)符，這樣一起使用會(huì)引起沖突
需要一個(gè)解決方案，讓jQuery和其他的js庫不存在沖突，可以同時(shí)存在，這就叫多庫共存
解決方案：
-
把里面的$符號統(tǒng)一改為jQuery。比如jQuery("div")
-
jQuery變量規(guī)定新的名稱：$noConflict() var xx=$.noConflict()
<div></div> <script> $(function(){ function $(ele){ return document.querySelector(ele); } console.log(div);//error jQuery.each();//right var suibian=jQuery.noConflict(); console.log(suibian("span"));//right }) </script>
jQuery插件
jQuery功能比較有限，想要更復(fù)雜的特效效果，可以借助jQuery插件完成
- jQuery插件庫 https://www.jq22.com/
- jQuery之家 http://www.htmleaf.com/
jQuery插件使用步驟
- 引入相關(guān)文件。（jQuery文件和插件文件）
- 復(fù)制相關(guān)html、css、js（調(diào)用插件）
常用插件：
-
瀑布流
-
圖片懶加載（圖片使用延遲加載在可提高網(wǎng)頁下載速度。也能幫助減輕服務(wù)器負(fù)載，當(dāng)我們頁面滑動(dòng)到可視區(qū)域，再顯示圖片）
-
全屏滾動(dòng)
中文翻譯網(wǎng)站：http://www.dowebok.com/demo/2014/77/
Bootstrap JS 插件：
bootstrap框架也是依賴于jQuery開發(fā)的，因此里面的js插件使用，也必須引入jQuery文件
分享文章：jQuery筆記
URL鏈接：http://chinadenli.net/article40/dsoghho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、商城網(wǎng)站、外貿(mào)建站、微信公眾號、網(wǎng)站排名、網(wǎng)站策劃
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 怎樣利用chatGPT快速賺錢？ 2023-05-05
- ChatGPT的發(fā)展歷程 2023-02-20
- ChatGPT的應(yīng)用ChatGPT對社會(huì)的利弊影響 2023-02-20
- ChatGPT是什么?ChatGPT是聊天機(jī)器人嗎? 2023-05-05
- 馬云回國，首談ChatGPT。又是新一個(gè)風(fēng)口？ 2023-05-28
- 火爆的ChatGPT，來聊聊它的熱門話題 2023-02-20
- 爆紅的ChatGPT，誰會(huì)丟掉飯碗？ 2023-02-20
- ChatGPT是什么 2023-02-20