jQuery
$()
1.選擇器，傳入字符串的時(shí)候是選擇器
2.document.ready簡寫，傳入的是函數(shù)那么就是事件的簡寫
特性
jQuery喜歡一個(gè)函數(shù)n種用法
jQuery中選DOM永遠(yuǎn)是數(shù)組
jQuery的選擇器
初級選擇器
id class tag ； css選擇器寫法 = string 完全等同于JQuery的寫法
jQuery事件
賦值
css(key,value)=>設(shè)置css屬性 （key=value）
css(options)=> 設(shè)置一組css屬性 對象之中的key和value一一對應(yīng)
$("#box").css("backgroundColor","yellowgreen");取值
css("string")
css(arr)原生DOM的屬性jQuery實(shí)例DOM不支持
box.style.backgroundColor = "#111";jQuery DOM 和原生DOM對象使用方法不通用
box.css("background","#111")jQuery DOM轉(zhuǎn)換成原生DOM的方法就是加上下標(biāo)
$box[0] === box; box.style.backgroundColor = "#111";jQuery 一組元素
選擇多個(gè)jQuery元素 =>
//選擇第n個(gè)元素（eq里的數(shù)值） $(".box:eq(2)").css({ background:"yellowgreen"; }) //選擇第一個(gè)元素 $(".box:first").css({ background:"yellowgreen"; }) //選擇最后一個(gè)元素 $(".box:last").css({ background:"yellowgreen"; }) //給.box下所有的元素添加事件 $(".box").click(function(){ alert($(this).index()); })中級選擇器
通配選擇器：*（選擇全部）
后代選擇器：a b c
群組選擇器：a,b,c
直接子選擇器：a>b
//后代選擇器（ul下的所有l(wèi)i) $("ul li").css({ color : "yellowgreen" }) //直接子選擇器（只對第一層子元素有作用) $("ul>li").css({ color : "#f99" }) //群組選擇器（群組選擇，同后代選擇器） $("ul li , ul span").css({ color : "#f12" }) //通配選擇器（ul下所有元素） $("ul>*").css({ color : "#f12" })高級選擇器
直接子選擇器：ul>li
后代選擇器：ul li
ul下一個(gè)（同級）li：ul+li
ul下所有l(wèi)i：ul~li
//對于id為mark的所有l(wèi)i元素字體顏色進(jìn)行修改 $("#mark+li").css({ color : "red" }) //對id為mark的所有元素字體顏色進(jìn)行修改 $("#mark~*").css({ color : "red" })直接子選擇器（2）：children()
后代選擇器（2）：find()
//對ul下的span元素進(jìn)行字體顏色修改（只對單層元素有效走敌，同直接子選擇器） $("ul").children("span").css({ color : "skyblue" }) //對ul下所有元素進(jìn)行字體顏色修改（同后代選擇器） $("ul").find("span").css({ color : "skyblue" })注：所有的選擇方法（除了find）如果不傳遞參數(shù)的話匀借，默認(rèn)是*颜阐。
屬性選擇器
//對所有帶id的div進(jìn)行背景顏色更改（只有div） $("div[id]").css({ backgroundColor : "red" }) //對id為box1，并且data-id為123的div進(jìn)行顏色更改 $("div[id=box1][data-id=123]").css({ backgroundColor : "red" }) //對所有id不是box1的div進(jìn)行顏色更改 $("div[id!=box1]").css({ backgroundColor : "red" })偽類選擇器
位置選擇器
過濾選擇器
可見性選擇器
包含選擇器
//修改第一個(gè)div的顏色 $("div:first").css({ background : "yellowgreen" }) //同上 $("div").first().css({ background : "yellowgreen" }) //修改最后一個(gè)div的顏色 $("div").last().css({ background : "yellowgreen" }) //匹配一個(gè)給定索引值的元素 $("div").eq(5).css({ background : "yellowgreen" }) //匹配所有索引值為奇數(shù)的元素吓肋，從 0 開始計(jì)數(shù) $("div:odd").css({ background : "yellowgreen" }) //匹配所有索引值為偶數(shù)的元素凳怨，從 0 開始計(jì)數(shù) $("div:even").css({ background : "yellowgreen" }) //匹配所有大于給定索引值的元素 $("div:gt(1)").css({ background : "yellowgreen" }) //匹配所有小于給定索引值的元素 $("div:lt(5)").css({ background : "yellowgreen" })文字選擇器
//匹配帶有hello字樣的所有p標(biāo)簽（全局匹配 hello后要有空格，否則無法匹配到） $("p:contains(hello)").css({ color : "red" }) //匹配帶有span標(biāo)簽的li（全局匹配） $("li:has(span)").css({ color : "red" })
篩選
end()
end作用：
回到最近的一個(gè)"破壞性"操作之前是鬼。即肤舞，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。
如果之前沒有破壞性操作均蜜，則返回一個(gè)空集李剖。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個(gè)jQuery對象的函數(shù)--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'囤耳。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: #ddd; } #box.active{ background: orange; } </style> </head> <body> <div id="box"> <div class="title"> title <p> p <span>選中</span> </p> </div> </div> <script> $("#box") .children() //div class = title .children() //p .children() //span .css({ color : "red" }) .end() //選擇過程之中往回回退了一步篙顺，因此將整個(gè)p標(biāo)簽的樣式都改變了，本來是只改變span標(biāo)簽中的樣式 .css({ background : "#6cf" }) </script> </body> </html>is()
is作用：
根據(jù)選擇器充择、DOM元素或 jQuery 對象來檢測匹配元素集合德玫，如果其中至少有一個(gè)元素符合這個(gè)給定的表達(dá)式就返回true。
如果沒有元素符合椎麦，或者表達(dá)式無效宰僧，都返回'false'。 '''注意：'''在jQuery 1.3中才對所有表達(dá)式提供了支持观挎。在先前版本中琴儿，如果提供了復(fù)雜的表達(dá)式，比如層級選擇器（比如 + , ~ 和 > ）嘁捷，始終會返回true造成。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: #ddd; } #box.active{ background: orange; } </style> </head> <body> <div id="box"> <div class="title"> title <p> p <span>選中</span> </p> </div> </div> <script> $("box").click(function(){ //is起到判斷作用,匹配box中有無class=active console.log($(this).is(".active")); //初始為true，點(diǎn)擊變?yōu)閒alse if(!$(this).is(".active")){ //addClass()為每個(gè)匹配的元素添加指定的類名普气。 $(this).addClass("active"); }else{ $(this).removeClass("active"); } // is => 簡化版 if(!$(this).hasClass("active")){ $(this).addClass("active"); }else{ $(this).removeClass("active"); } //無is版 $(this).toggleClass("active") }) </script> </body> </html>
動(dòng)畫
簡單動(dòng)畫：show谜疤、hide、fadeIn、fadeOut夷磕、slideDown履肃、slideUp
自定義動(dòng)畫：animate
動(dòng)畫隊(duì)列：queue
終止動(dòng)畫：stop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box,#box2 { width: 100px; height: 100px; background: #000; margin: 10px; opacity: 1; float: left; position: absolute; left: 20px; top: 50px; } #box2 { background: yellowgreen; left: 150px; display: none; } #start_animate { position: absolute; z-index: 999; } #stop_animate { position: absolute; left:100px; z-index: 999; } </style> </head> <body> <button id="start_animate">開始動(dòng)畫</button> <button id="stop_animate">停止動(dòng)畫</button> <div id="box"></div> <div id="box2"></div> <script src="../libs/jquery-3.4.0.js"></script> <script> $("#start_animate").click(animate1); function animate1(){ //$("#box").hide(1000); //$("#box2").show(1000); //用于綁定兩個(gè)或多個(gè)事件處理器函數(shù)，以響應(yīng)被選元素的輪流調(diào)用的click事件坐桩。toggle將元素設(shè)置為隱藏或可見 //$("#box").toggle(1000); //$("#box2").toggle(1000); //fadeOut/fadeIn通過不透明度的變化來實(shí)現(xiàn)所有匹配元素的淡出/淡入效果尺棋，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 //$("#box").fadeOut(1000); //$("#box2").fadeIn(1000); //$("#box").fadeToggle(1000); //$("#box2").fadeToggle(1000); //fadeTo將匹配元素設(shè)置透明度為XXX //$("box").fadeTo(1000,0.3); //slideToggle通過高度變化來切換所有匹配元素的可見性(上下卷動(dòng))绵跷，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)膘螟。 //$("#box").slideToggle(1000); //$("#box2").slideToggle(1000); } $("#start_animate").click(animate2); function animate2(){ $("#box").css({ backgroundColor : "yellowgreen" }); $("#box").animate({ left : "+=100" }) .animate({ top : "+=100" }) //同步隊(duì)列工具queue;想要繼續(xù)執(zhí)行后方異步隊(duì)列必須要調(diào)用next方法 .queue(function(next){ $(this).css({ backgroundColor : "skyblue" }) next(); }) .animate({ left : "-=100" }) .animate({ top : "-=100" }) } $("#stop_animate").click(function(){ //stop([clearQueue],[jumpToEnd]) //clearQueue:如果設(shè)置成true，則清空隊(duì)列碾局【２校可以立即結(jié)束動(dòng)畫。 //gotoEnd:讓當(dāng)前正在執(zhí)行的動(dòng)畫立即完成净当，并且重設(shè)show和hide的原始樣式内斯，調(diào)用回調(diào)函數(shù)等。 $("#box").stop(true,true);//(是否清空動(dòng)畫隊(duì)列像啼，是否立即完成動(dòng)畫) }) </script> </body> </html>
事件
在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)：on()
在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)：off()
在每一個(gè)匹配的元素上觸發(fā)某類事件：trigger()
一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對象上面及移出這個(gè)對象）的方法俘闯。這是一個(gè)自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)：hover(fn1,fn2)鼠標(biāo)移上時(shí)觸發(fā)第一個(gè)函數(shù)忽冻，移出時(shí)觸發(fā)第二個(gè)函數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> <li>hello world</li> </ul> <script src="../libs/jquery-3.4.0.js"></script> <script> // $("li").click(function(){ // alert(1); // }) // $("li").click(function(){ // alert(2); // }) // $("li").on("click.a",function(){ // alert(1) // }) // $("li").on("click.b",function(){ // alert(2) // }) // $(document).on("click",function(){ // alert("i'm document") // }) // $("li").off("click.a"); // trigger 觸發(fā)事件; // $("li").eq(0).trigger("click"); // 會發(fā)生事件冒泡; // $("li").eq(0).triggerHandler("click"); // 不會觸發(fā)事件冒泡; // $("li").on("mouseenter",function(){ // $(this).css({ // backgroundColor : "red" // }) // }) // $("li").on("mouseleave",function(){ // $(this).css({ // backgroundColor : "#fff" // }) // }) // 復(fù)合事件 ; hover $("li").hover(function(){ $(this).css({ backgroundColor : "red" }) },function(){ $(this).css({ backgroundColor : "#fff" }) }) //.on簡易寫法 // $("li").on({ // "mouseenter" : function(){ // $(this).css({ // backgroundColor : "red" // }) // }, // "mouseleave" : function(){ // $(this).css({ // backgroundColor : "#fff" // }) // }, // }) //事件委托; //給每個(gè)li添加click事件 $("ul").on("click","li",function(){ // console.log(this); $li = $("<li>hello world</li>"); $("ul").append($li); }) $("li").one("click",function(){ alert(); }) </script> </body> </html>
