1.JQ主要功能
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數(shù)
JavaScript 特效和動(dòng)畫
HTML DOM 遍歷和修改
AJAX
2.安裝
百度 CDN:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
3.語(yǔ)法
$(selector).action()
文檔就緒事件防止文檔在在完全加載之前運(yùn)行jq代碼
JQ 入口函數(shù):
第一種：
$(document).ready(function(){
// 開始寫 jQuery 代碼...
});
第二種：
$(function(){
// 開始寫 jQuery 代碼...
})
JavaScript 入口函數(shù):
window.onload = function () {
// 執(zhí)行代碼
}
3.選擇器
$("#id", ".class") 復(fù)合選擇器
$(div p span) 層級(jí)選擇器 //div下的p元素中的span元素
$(div>p) 父子選擇器 //div下的所有p元素
$(div+p) 相鄰元素選擇器 //div后面的p元素(僅一個(gè)p)
$(div~p) 兄弟選擇器 //div后面的所有p元素(同級(jí)別)
$(.p:last) 類選擇器 加 過(guò)濾選擇器 第一個(gè)和最后一個(gè)（first 或者 last）
$("#mytable td:odd") 層級(jí)選擇 加 過(guò)濾選擇器 奇偶（odd 或者 even）
$("div p:eq(2)") 索引選擇器 div下的第三個(gè)p元素（索引是從0開始）
$("a[href='www.baidu.com']") 屬性選擇器
$("p:contains(test)") // 內(nèi)容過(guò)濾選擇器，包含text內(nèi)容的p元素
$(":emtyp") //內(nèi)容過(guò)濾選擇器叉抡，所有空標(biāo)簽（不包含子標(biāo)簽和內(nèi)容的標(biāo)簽）parent 相反
$(":hidden") //所有隱藏元素 visible
$("input:enabled") //選取所有啟用的表單元素
$(":disabled") //所有不可用的元素
$("input:checked") //獲取所有選中的復(fù)選框單選按鈕等
$("select option:selected") //獲取選中的選項(xiàng)元素
4.事件
4.1語(yǔ)法
$(selector).click(function(){
// 動(dòng)作觸發(fā)后執(zhí)行的代碼!!
});
4.2鼠標(biāo)事件
- click() 方法是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù)
- dblclick() 當(dāng)雙擊元素時(shí)灶壶，會(huì)發(fā)生 dblclick 事件卖丸。
- mouseenter() 當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)你稚，會(huì)發(fā)生 mouseenter 事件扭粱。
- mousedown() 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方扶歪，并按下鼠標(biāo)按鍵時(shí)匠楚，會(huì)發(fā)生 mousedown 事件捷沸。
- mouseup() 當(dāng)在元素上松開鼠標(biāo)按鈕時(shí)摊沉，會(huì)發(fā)生 mouseup 事件。
- hover() 方法用于模擬光標(biāo)懸停事件痒给。當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)说墨，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)苍柏。
4.3輸入框焦點(diǎn)事件
- focus() 當(dāng)元素獲得焦點(diǎn)時(shí)尼斧，發(fā)生 focus 事件。當(dāng)通過(guò)鼠標(biāo)點(diǎn)擊選中元素或通過(guò) tab 鍵定位到元素時(shí)试吁，該元素就會(huì)獲得焦點(diǎn)
- blur() 當(dāng)元素失去焦點(diǎn)時(shí)棺棵，發(fā)生 blur 事件多用于input
4.4鍵盤事件
keypress 事件相關(guān)的事件順序
- keydown- 鍵按下的過(guò)程
- keypress - 鍵被按下
- keyup- 鍵被松開
- keydown-當(dāng)鍵盤鍵被按下時(shí)
- keyup- 鍵被松開
4.5其他事件
- submit當(dāng)提交表單時(shí)
- change當(dāng) <input> 字段改變時(shí)警報(bào)文本：
5.jQuery HTML
5.1獲取屬性
$(selector).attr(屬性)
返回文檔中所有圖像的src屬性值。
$("img").attr("src");
5.2獲取內(nèi)容
- text() 文本內(nèi)容
- val() 表單字段值例如input框輸入的值\select的option的value值
- html() 元素的內(nèi)容（包括 HTML 標(biāo)記）
5.3設(shè)置內(nèi)容和屬性
- text(內(nèi)容)
返回p元素的文本內(nèi)容熄捍。
$('p').text();
- html(內(nèi)容)
內(nèi)容設(shè)置為空（清除）
$('p').html("");
- val(內(nèi)容)
<select id="single">
<option>Single</option>
<option selected="selected">Single2</option>
</select>
<input type="checkbox" value="橘子" name="check">橘子1</input>
<input type="checkbox" value="香蕉" name="check">香蕉1</input>
<input type="checkbox" value="西瓜" name="check">西瓜1</input>
<input type="checkbox" value="芒果" name="check">芒果1</input>
<input type="checkbox" value="葡萄" name="check">葡萄1</input>
<input type="radio" value="radio1" name="radio"/> radio1
<input type="radio" value="radio2" name="radio"/> radio2
<button id="btn1">獲取checkbox值</button>
<button id="btn2">獲取radio值</button>
//獲取select值
$("#single").change(function(){
var selectValue=$(this).val();
console.log(selectValue);
})
//獲取checkbox值
$("#btn1").click(function(){
var checkboxValue =[];
$('input[name="check"]:checked').each(function(){
checkboxValue.push($(this).val());
});
console.log(checkboxValue);
})
//獲取radio值
$("#btn1").click(function(){
var radioValue=$('input[name="radio"]:checked').val();
console.log(radioValue);
}
- attr(屬性烛恤，屬性值)
設(shè)置單個(gè)屬性：
attr("class","one");
設(shè)置多個(gè)屬性：
attr({
"data-id":1213,
"class":"pone"
});
5.4添加元素
- 在元素的內(nèi)部插入
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容 - 在元素的旁邊插入
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容 - 插入多個(gè)
var text1=$("<p></p>").text("lala");
var text2=$("<p></p>").text("lala");
var text3=$("<p></p>").text("lala");
$("p:first").prepend(text1,text2,text3);
5.5兩種創(chuàng)建元素的方法
js
var text1=document.createElement("p");
text1.innerHTML="hahha";
jq
var text1=$("<p></p>").html(內(nèi)容).appendTo($(selector))
5.6刪除元素
- remove() - 刪除被選元素（及其子元素）
<div>
<div id="one">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
$("#one").remove();
變成
<div>
</div>
empty() - 從被選元素中刪除子元素
<div id="one">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
$("#one").empty() ;或者
$("#one").html("") ;
變成
<div id="one">
</div>
- 過(guò)濾被刪除的元素
<div id="three">
<p class="=no">1</p>
<p class="=no">2</p>
<p>3</p>
</div>
$("#three").remove(".no");
變成
<div id="three">
<p class="=no">1</p>
<p class="=no">2</p>
</div>
5.7獲取并設(shè)置 CSS 類(放入style屬性）
- addClass() - 向被選元素添加一個(gè)或多個(gè)類
- removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
- toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
- css() - 設(shè)置或返回樣式屬性
-- 返回css屬性
> console.log($("#three").css("color"))
-- 設(shè)置css屬性
> $("#three").css("background-color","red");
--設(shè)置多個(gè)css屬性
> $("#four").css({
"background-color":"red",
"font-weight":"bold"
})
-
尺寸
image.png
image.png
image.png
//獲取
$(selector).width();
//設(shè)置
$(selector).width("120px");
6.JQ的Ajax
6.1 load
- 創(chuàng)建一個(gè)test.html文件，用于被load()方法加載并追加到頁(yè)面中
><h1>Ajax</h1>
<div id="ben_one"></div>
<button id="ben_firstbtn">點(diǎn)擊</button>
<script>
$(function(){
$("#ben_firstbtn").click(function(){
$("#ben_one").load("index14.html ",function(responseTxt,statusTxt,xhr){
console.log(responseTxt);
//console.log(statusTxt);
//console.log(xhr);
})
})
})
</script>
- 文件中 class="ben" 的元素的內(nèi)容余耽，加載到指定的 <div> 元素中：
$("#ben_one").load("index14.html .ben ",function(responseTxt,statusTxt,xhr){
}
- 回調(diào)函數(shù)
$("#ben_one").load("index14.html .ben ",function(responseTxt,statusTxt,xhr){}
responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對(duì)象
6.2 get
語(yǔ)法：$.get(url, [data], [callback], [type])
url:待載入頁(yè)面的URL地址
data:待發(fā)送 Key/value 參數(shù)缚柏。
callback:載入成功時(shí)回調(diào)函數(shù)。
type:返回內(nèi)容格式碟贾，xml, html, script, json, text, _default币喧。
> $.get("/doget",{"name":"ben","age":23},function(result,status){
})
6.3用Jquery實(shí)現(xiàn)ajax提交form表單
6.4 Post
語(yǔ)法：$.post(url, [data], [callback], [type])
url:發(fā)送請(qǐng)求地址轨域。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時(shí)回調(diào)函數(shù)杀餐。
type:返回內(nèi)容格式干发，xml, html, script, json, text, _default。
7.jQuery 遍歷
7.1向上遍歷 DOM 樹
- parent() 返回被選元素的
直接父元素史翘。 - parents() 返回被選元素的所有
祖先元素枉长，它一路向上直到文檔的根元素 (<html>) - parentsUntil() 返回
介于兩個(gè)給定元素之間的所有祖先元素
<div id="ben_one">
<p id="ben_two">p
<p id="ben_three">
p
</p>
</p>
<span>span</span>
<p>p</p>
<span>span</span>
<p>p</p>
</div>
<button id="ben_firstbtn">點(diǎn)擊</button>
$("#ben_firstbtn").click(function(){
$("#ben_two").parent().css("border","1px solid red");
$("#ben_two").parents().css("border","1px solid blue");
$("#ben_two").parents("#ben_one").css("border","1px solid blue");
$("#ben_three").parentsUntil("div").css("border","1px solid blue");
})
7.2后代
- children() 返回被選元素的所有
直接子元素 - find() 返回被選元素的后代元素，一路向下直到最后一個(gè)后代恶座。
$("div").find("span"); //返回后代所有的span
$("div").find("*"); //返回所有后代
7.3 同胞
- siblings() 返回被選元素的所有同胞元素搀暑。
- next() 返回被選元素的下一個(gè)同胞元素
- nextAll() 返回被選元素的所有跟隨的同胞元素
- nextUntil() 返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素
- prev()
- prevAll()
- prevUntil()
> <h1>同胞</h1>
<div id="ben_one">DIV</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<button id="ben_firstbtn">點(diǎn)擊</button>
// $("#ben_one").siblings().css("border","1px solid blue"); //h1 p1 p2 p3
//$("#ben_one").next().css("border","1px solid blue"); //p1
$("#ben_one").nextAll().css("border","1px solid blue"); //p1 p2 p3
7.4過(guò)濾（選擇內(nèi)容有很多組）
- first() 方法返回被選元素的首個(gè)元素。
- last() 方法返回被選元素的最后一個(gè)元素跨琳。
- eq() 方法返回被選元素中帶有指定索引號(hào)的元素自点。
- not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素。（與filter相反）
- filter() 方法允許您規(guī)定一個(gè)標(biāo)準(zhǔn)脉让。不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除桂敛，匹配的元素會(huì)被返回
> <p class="not">p1</p>
<p>p2</p>
<p>p3</p>
// $("p").first().css("border","1px solid blue"); //p1
//$("p").last().css("border","1px solid blue"); //p3
//$("p").not(".not").css("border","1px solid blue"); //p2 p3
//$("p").eq(1).css("border","1px solid blue"); //p2
image.png
8.jQuery 效果
8.1隱藏和顯示
- hide()
- show()
- toggle()
8.2淡入淡出
fadeIn() 淡入（慢慢顯示）已隱藏的元素 即css設(shè)置了display:none;
語(yǔ)法：$(selector).fadeIn(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"溅潜、"fast" 或毫秒术唬。.
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。fadeOut() 淡出（慢慢隱藏）可見元素
語(yǔ)法：$(selector).fadeOut(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)滚澜。它可以取以下值："slow"粗仓、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱设捐。fadeToggle() 可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換
語(yǔ)法：$(selector).fadeToggle(speed,callback);
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)借浊。它可以取以下值："slow"、"fast" 或毫秒萝招。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱fadeTo() 允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）
語(yǔ)法：fadeTo(speed,opacity,callback);
必需的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)蚂斤。它可以取以下值："slow"、"fast" 或毫秒槐沼。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）曙蒸。可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱岗钩。
$("p").fadeTo("slow",0.15);
8.3滑動(dòng)
- slideDown()
- slideUp()
- slideToggle()
// $("p").slideToggle("slow");
// $("p").slideDown("slow");
// $("p").slideUp("slow");
9.鏈(Chaining)
允許我們?cè)谙嗤脑厣线\(yùn)行多條 jQuery 命令纽窟，一條接著另一條
把 css()、slideUp() 和 slideDown() 鏈接在一起兼吓。"p1" 元素首先會(huì)變?yōu)榧t色臂港，然后向上滑動(dòng)，再然后向下滑動(dòng)：
10.獲取直接的父代元素
parent()\next()\previous()
方法可以獲得一個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)next方法可以獲得一個(gè)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)，對(duì)應(yīng)的previous方法可以獲得一個(gè)節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)
<div id="cartype">
<select></select>
<span>汽車類型</span>
</div>
var cartype=$("#cartype").children("select");
cartype.parent().show(); //即 <div id="carname">顯示
cartype.next().show(); //即 <span>汽車類型</span>顯示
