jQuery
語法
1、參考宣告：
<script src="https://www.cnblogs.com/05xy/p/jQuery檔案URL" type="text/javascript" charset="UTF-8"></script>
2、基礎語法結構：
- jQuery的美元符號$是jQuery的簡寫
- 檔案就緒函式寫法
//寫法一
$(document).ready(function(){
//jQuery函式
})
//寫法二
$(function(){
//jQuery函式
})
選擇器
基礎選擇器
// 全域選擇器：選擇檔案中所有元素，包括<head>及<script>,運行速度較慢
$("*")
//元素選擇器：選擇指定元素標簽
$("p") //選擇所有p標簽
//id選擇器：選擇指定id的元素
$("#test") //選擇id=test的元素
//類選擇器：選擇所有具有同一個指定class的元素
$(".a") //選擇class=“a”的元素
//多重選擇器：選擇符合條件的所有結果
$("p,hl,div") //選擇檔案中所有段落元素<p>、標題元素<hl>和塊元素<div>
屬性選擇器
//帶有指定屬性的元素
$("[alt]") //所有帶alt屬性的元素
//屬性等于指定值得元素
$("[href='https://www.cnblogs.com/05xy/p/#']") //所有href屬性值等于#的元素
//屬性不等于指定值的元素
$("[href!='#']") //所有href屬性值不等于#的元素
//屬性以指定值結尾的元素
$("[src$='.png']") //所有src屬性以.png結尾的元素
//屬性以指定值為開頭的元素
$("input[name^='nation']") //所有name屬性以nation為開頭的元素
//屬性包含指定值的元素
$("input[name*='nation']") //所有name屬性包含nation的元素
表單選擇器
//所有<input>元素
$(":input")
//所有type=“text”的<input>元素
$(":text")
//所有type=“password”的<input>元素
$(":password")
//所有type=“radio”的<input>元素
$(":radio")
//所有type=“checkbox”的<input>元素
$(":checkbox")
//所有type=“submit”的<input>元素
$("input:submit")
//所有type=“reset”的<input>元素
$(":reset")
//所有type=“button”的<input>元素
$(":button")
//所有type=“image”的<input>元素
$(":image")
//所有type=“file”的<input>元素
$(":file")
指定狀態的表單元素選擇器
//所有啟用的<input>和<button>元素
$(":enabled")
//所有被禁用的<input>和<button>元素
$(":disabled")
//下拉串列中處于被選中狀態的<option>元素
$(":selected")
//所有被選中的單選按鈕或者復選框
$(":checked")
層次選擇器
//子元素選擇器:只能選擇指定元素的第一層子元素
//語法：$("parent>child")
$("p>span") //p標簽下面的span標簽
//后代選擇器:指定元素內包含的所有后代元素(可以是第n層子元素)
//語法：$(ancestor descendant)
$("p span") //p標簽下面的span標簽
//后相鄰選擇器:與指定元素相鄰的后一個元素
//語法： $("prev+next")
//后兄弟選擇器：指定元素后面跟隨的所有符合條件的元素(可以是多個)
//語法：$("prev~siblings")
//jQuery css選擇器
//語法： $(selector).css(propertyName,value);
$("p").css("background-color","gray"); //將所有<p>標簽背景改為灰色
過濾器
基礎過濾器
//:first 選擇第一個符合條件的元素
$("div:first") //選定第一個div
//:last 選擇最后一個符合條件的元素
$("p:last") //選定最后一個段落
//:even 選擇偶數的元素（元素從0開始計數）
$("tr:even")
//:odd 選擇奇數的元素
$("tr:odd")
//:eq() 選擇指定序號的元素
$("li:eq(0)")
//:gt() 選擇大于指定序號的元素
$("li:gt(2)")
//:lt() 選擇小于指定序號的元素
$("li:lt(2)")
//:not() 選擇所有不符合指定要求的元素
$(":not(p#test)") //選擇除id=test之外的所有段落
//:header 選擇所有的標題元素，即<h1>~<h6>
$(":header") //選中網頁中所有標題
子元素過濾器
//:first-child 所有父元素中的第一個子元素
$("p:first-child")
//:last-child 所有父元素中的最后一個子元素
$("p:last-child")
//nth-child() 所有父元素中的第n個子元素
$("ul#test li:nth-child(odd)") //在id=test的串列中選擇所有奇數項<li>元素
$("li:nth-child(2)") //選擇第2個<li>元素
//nth-last-child() 所有父元素中倒數第n個元素
$("li:nth-last-child(2)") //選擇倒數第2個<li>元素
//only-child 所有父元素中唯一的子元素
$("ul:only-child") //選擇只有一個<li>元素的串列
內容過濾器
//:contains() 選擇div中包含北京的
$("div:contains('北京')")
//:empty
$("td:empty") //選擇沒有內容的<td>元素
//:parent
$("td:parent") //選擇有內容的<td>元素
//:has() 選擇包含有strong標簽的div元素
$("div:has(strong)")
可見性過濾器
//:hidden 選擇所有隱藏的元素
$("p:hidden") //網頁中不占用任何位置空間就被認定為是隱藏的
//:visible 選擇所有可見狀態的元素
$("p:visible")
事件
檔案/視窗事件
ready() //檔案準備就緒時觸發
$(document).ready()
load() //檔案加載時觸發
$("img").load(function(){
alert("影像已加載");
})
unload() //當用戶的瀏覽器視窗從當前視窗跳到提起視窗時觸發
$(window).unload()
鍵盤事件（鍵盤事件順序為 keydown -> keypress ->keyup）
-
所有的鍵盤事件物件，都有keyCode屬性，這個keyCode屬性可以獲取鍵值，keyCode是鍵盤事件物件的屬性，記住：鍵盤上回車鍵的鍵值是13；ESC鍵的鍵值是27，
-
keypress事件與keydown和keyup的主要區別：
1）對中文輸入法支持不好，無法回應中文輸入
2）無法回應系統功能鍵（如delete，backspace）
keydown() //鍵盤被按下觸發
keypress() //鍵盤被按下并快速釋放觸發
keyup() //鍵盤被釋放觸發
$("input:text").keydown(function(){
console.log("keydown");
$("#tip").text("鍵盤被按下");
});
滑鼠事件
click() //單擊
dblclick() //雙擊
hover() //懸浮
mousedown() //按下
mouseup() //釋放
mousemove() //移動
mouseenter() //進入
mouseleave() //離開
mouseover() //穿過
mouseout() //離開
toggle() //在jQuery1.8版之后已過期，慎用
表單事件
blur() //當表單元素失去焦點時發生
focus() //當表單元素獲得焦點時發生
change() //當表單元素的值發生改變時發生
select() //textarea 或文本型別的 input 元素中的文本被選擇時發生
submit() //提交表單時發生
事件的系結與解除
bind() //為被選元素添加一個或多個事件
delegate() //為被選元素的子元素添加一個或多個事件
on() //在被選元素及子元素上添加一個或多個事件
off() //用于移除添加的事件處理程式
one() //添加只運行一次的事件
語法：
$(selector).on(event,[data,] function)
eg:
$("button").on/bind/delegate({
"click":function(){
$("body").css("background-color","red")
},
"dblclick":function(){
$("body").css("background-color","yellow")
},
"mouseover":function(){
$("body").css("background-color","blue")
}
})
特效
隱藏顯示
hide() //隱藏
show() //顯示
toggle() //隱藏和顯示切換
$(selector).hide([duration] [, callback]);
duration引數設定隱藏動作執行持續時間，默認單位毫秒，可以填寫“fast”默認持續時間是200毫秒，而“slow”默認是600毫秒或者具體數值
callback引數為隱藏動作執行完成之后下一步執行的函式名，沒有可以不寫
eg：
$("#hidebtn2").click(function(){
$("#test2").hide(3000) //三秒隱藏完成
})
$("#showbtn2").click(function(){
$("#test2").show("fast")
})
淡入淡出
fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入淡出切換
$(selector).fadeIn([duration] [, callback])
fadeTo() //元素變為指定的透明度（0~1）
$(selector).fadeTo (duration, opacity [, callback])
opacity：該引數為必填內容，用于設定元素的透明度，透明度的數值必須在0~1之間，數值越小透明度越高，0為完全透明，1為非透明，
滑動
slideDown() //向下滑動元素
slideUp() //向上滑動元素
slideToggle() //切換向上和向下滑動元素
$(selector).slideDown([duration] [, callback])
影片
animate()
$(selector).animate({params} [, duration] [, callback])
params:（必選項）表示形成影片的CSS屬性，允許多個屬性同時改變
duration和callback（可選項）
eg：
$("#btn").click(function(){
$("div").animate({
width:"400",
fontSize:"25",
//當CSS屬性名稱中包含的連字符 " - “ 時，需要使用Camel標記法
backgroundColor: "#aaffaa",
opacity:"0.35" //透明度
},2000)
})
//使用CSS屬性中的方位值left、right、top以及bottom改變元素位置實作移動的效果，在HTML中所有元素的position屬性值默認為靜態（static）無法移動，若想移動需事先設定指定元素的position屬性為relative、absolute或者fixed，
$("#btn1").click(function(){
$("div").animate({
left:"+200px",
top:"+100px"
},3000)
})
//影片佇列 多個連續的animate()，在同一個animate()方法中描述的多個影片效果會同時發生，不同animate()方法中描述的會按順序先后發生
方法鏈接
$(selector).action1().action2().action3()......actionN();
eg：
$("#btn").click(function(){
$("p").slideUp(3000)
.slideDown("slow")
.css("background-color","green")
.fadeTo(2000,0)
.fadeTo(2000,1)
})
停止影片
$(selector).stop([stopAll] [, goToEnd]);
stopAll和goToEnd均為可選項；
stopAll：是否清除后續所有影片，填入布林值，默認為false；
goToEnd：是否立即完成當前的影片，填入布林值，默認值為false；
HTML DOM
獲取和設定
//text() //獲取元素的純文本內容，不識別html標簽（非表單元素）
//text("內容") //設定元素的純文本內容，不識別html標簽（非表單元素）
console.log( "id為test1的元素的內容是:" + $("#text1").text() );
$("#text2").text("信科院");
//html() //獲取元素的內容，包含html標簽（非表單元素）
//html("內容") //設定元素的內容，包含html標簽（非表單元素）
console.log( "id為html1的內容是:" + $("#html1").html() );
$("#html1").html("<h2>湖南</h2>");
//val() //獲取元素的值（表單元素）
//val("值") //設定元素的值（表單元素）
console.log( "id為op的元素的內容是:" + $("#op").val() );
$("#op").val("today!");
//attr() //獲取或設定選定元素的屬性值
console.log( "id為aa的name屬性值是:" + $("#aa").attr("name") );
$("a").attr("href","http://www.baidu.com");
//css() //獲取或設定選定元素的css屬性值 addClass()為某個元素添加樣式,removeClass()洗掉樣式,toggleClass()洗掉添加輪流
console.log("段落的背景顏色是：" + $("p").css("background-color") );
$("p").css("background-color","red");
$("p").css("background-color":"red" , "font-size":"25px");
$("button").click(function(){
$("div#remove").toggleClass("bule");
})
添加
append() //選定元素內部結尾處插入內容
prepend() //選定元素內部開頭插入內容
after() //選定元素之后出入內容
before() //選定元素之前插入內容
//用法一樣
$("p#test").append("這是一段測驗內容");
appendTo() //將內容插入到選定元素之前
$("<span>Hello World!</span>").appendTo("p"); //將Hello World!插入到p標簽之前
洗掉
remove() //洗掉選定元素及其子元素
$("p#test").remove(); //洗掉id為test的段落
empty() //清空元素，文本內容
$("h1").empty();
removeAttr() //洗掉元素的指定屬性
$("div").removeAttr("id");
尺寸
width() //獲取或設定寬度（不包括內外邊距和邊框寬度）
height() //獲取或設定高度（不包括內外邊距和邊框寬度）
innerWidth() //獲取或設定寬度（包括內邊距）
innerHeight() //獲取或設定高度（包括內邊距）
outerWidth() //獲取或設定寬度（包括內邊距和邊框寬度）
outerHeight() //獲取或設定高度（包括內邊距和邊框寬度）
遍歷
后代遍歷
children() //只能查找指定元素的第一層子元素
$("#dc").children().css({border:"3px solid red",backgroundColor:"pink"});
find() //方法可用于查找指定元素的所有后代元素
//查找id=df下面所有后代元素
$("#df").find("*").css({border:"3px solid red",backgroundColor:"pink"});
//查找id=df下面所有<span>后代元素
$("#df").find("span").css({border:"3px solid red",backgroundColor:"pink"});
? 這里加上選擇器：
? 子元素選擇器：只能選擇指定元素的第一層子元素
? 格式：父元素>指定元素 （>隔開）
? $("parent>chlid") $("父元素>指定元素")
?
? 后代選擇器：指定元素內包含的所有后代元素(可以是第n層子元素)
? 格式：父元素 指定元素 （空格隔開）
? $("ancestor descendant") $("父元素 指定元素")
?
同胞遍歷
siblings()：查找指定元素的所有同胞元素
next()：查找指定元素的下一個同胞元素
nextAll()：查找指定元素后面的所有同胞元素
nextUntil()：查找指定元素后面指定范圍內的所有同胞元素
.nextUntil()([selector][, filter])
filter:進一步篩查
prev()：查找指定元素的前一個同胞元素
prevAll()：查找指定元素前面的所有同胞元素
prevUntil()：查找指定元素前面指定范圍內的所有同胞元素
.prevUntil()([selector][, filter])
filter:進一步篩查
? 這里加上選擇器：
? 后兄弟選擇器：指定元素后面跟隨的所有符合條件的元素(可以是多個)
? 格式：元素~指定元素 （~隔開）
? $("prev~siblings") $("元素~指定元素")
?
? 后相鄰選擇器：與指定元素相鄰的后一個元素
? 格式：元素+指定元素 （+隔開）
? $("prev+next") $("元素+指定元素")
祖先遍歷
parent()：查找指定元素的直接父元素
parents()：查找指定元素的所有祖先元素
parentsUntil()：查找指定元素向上指定范圍的所有祖先元素
/*
.parentsUntil()([selector][, filter])
filter:進一步篩查
*/
eg：
$("li").parentsUntil("div#d1","#d2"); //向上查找id=d1的祖先元素，不超過id=d2的范圍
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547397.html
標籤：jQuery
上一篇：webpack性能優化(1):分隔/分包/異步加載+組件與路由懶加載
下一篇：前端設計模式——原型模式