1.什么是JQuery
jQuery就是javascript的一個(gè)庫(kù)，把我們常用的一些功能進(jìn)行了封裝祠丝，方便我們來(lái)調(diào)用年碘，提高我們的開(kāi)發(fā)效率。
2.jQuery 庫(kù)中的 $符號(hào)是什么？
$符號(hào)是一個(gè)對(duì)象姨丈，代表JQuery對(duì)象畅卓。
3.JQuery有幾種選擇器
-
基本選擇器。
$(“.intro”) 選取所有 class=“intro” 的<p> 元素蟋恬。$(“#dem”) 選取所有 id="demo" 的 <p> 元素翁潘。
-
屬性選擇器。
$("[href]") 選取所有帶有 href 屬性的元素歼争。$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素拜马。
層級(jí)選擇器。
$(" div >input")選擇div下的所有input沐绒。過(guò)濾選擇器俩莽。
$(".main li:odd")匹配所有索引值為奇數(shù)的元素。表單選擇器乔遮。
$(" #main :input")匹配#main下的所有input扮超。
4.$(document).ready() 是個(gè)什么函數(shù)？
ready() 函數(shù)用于在文檔進(jìn)入ready狀態(tài)時(shí)執(zhí)行代碼蹋肮。當(dāng)DOM 完全加載出刷，開(kāi)始執(zhí)行JS，好處是使用所有瀏覽器坯辩。
5.window.onload 事件和 jQuery ready 函數(shù)有何不同馁龟？
window.onload事件需要等待DOM完全加載以及靜態(tài)資源圖片css樣式完全加載才會(huì)執(zhí)行js。
jQuery ready() 函數(shù)當(dāng)DOM加載完成就開(kāi)始執(zhí)行漆魔，不等待靜態(tài)資源的加載屁柏。
$(document).ready(function(){
.......
})
window.onload=function(){
.......
}
6.JQuery對(duì)象和原生js互轉(zhuǎn)。
原生js轉(zhuǎn)換JQuery將DOM包含在$()里面就可以有送。
JQuery轉(zhuǎn)換原生js對(duì)象$(''"').get(0).
$(dom)
$(".name").get(0)
7.JQuery中attr和prop的區(qū)別
對(duì)于HTML元素本身就帶有的固有屬性淌喻，在處理時(shí)，使用prop方法雀摘。
對(duì)于HTML元素我們自己自定義的DOM屬性裸删，在處理時(shí)，使用attr方法阵赠。
8.JQuery基本選擇器
$('.list li:first').css('color','red');//選擇li的第一個(gè)元素涯塔。
$('.list li:last').css('color','blue');//選擇li元素組合最后一個(gè)。
$('.list li:even').css('fontSize','28px');//選擇li的奇數(shù)元素清蚀。
$('.list li:odd').css('fontSize','12px');//選擇li的偶數(shù)元素匕荸。
$('.list li').eq(1).css('color','pink');//選擇li中索引為1的元素，索引從0開(kāi)始枷邪。
$('.list li:gt(1)').css('fontWeight','700');//選擇li元素組合中索引值大于1的元素榛搔。
$('.list li:lt(1)').css('fontWeight','700');//匹配所有小于給定索引值的元素。
$(":header").css("backgroundColor",'green')//選擇所有的標(biāo)題元素h1-h6。
$(":root").css("background-color","#ccc");//選擇該文檔的根元素（永遠(yuǎn)都是html標(biāo)簽）践惑。
9.jQuery內(nèi)容選擇器
- ：contains（“給定文字內(nèi)容”）腹泌，匹配標(biāo)簽內(nèi)包含給定文本的元素。
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
$(".list li:contains('3')")//選擇li標(biāo)簽內(nèi)容是3的元素尔觉。
- ：empty匹配所有不包含子元素或者文本的空元素
<li></li>
$("li:empty")
10.屬性選擇器
屬性選擇器有等于=,不等于凉袱！=，^=以給定字符串開(kāi)始的侦铜，$=以給定字符串結(jié)尾的专甩，*=包含給定字符串的，
$(".list li[class='der']").css("color",'yellow')//選擇class等于der的li钉稍。
$(".list li[class!='der']").css("color",'yellow')
$(".list li[class^='der']").css("color",'yellow')
$(".list li[class$='der']").css("color",'yellow')
$(".list li[class*='der']").css("color",'yellow')
11.表單選擇器
表單選擇器選擇所有的input和type值為text ,password,file,button,checkbox,radio等涤躲。
$(".list :text").css("border",'none')//選擇type等于text元素。
$(".list :input").css("border",'none')//選擇list下所有的input嫁盲。
表單常用屬性:enabled篓叶，：disabled烈掠，：checked羞秤，：selecked
$(':disabled').css("border","none")//選擇所有被禁用的元素。
$(':checked').css("border","none")//選擇所有選中的元素（單選框左敌，復(fù)選框瘾蛋，下拉框）。
$(':selecked').css("border","none")//選擇select下拉框中所有選中的option元素矫限。
$(':enabled').css("border","none")//選擇所有沒(méi)有沒(méi)禁用的元素哺哼。
12.JQuery節(jié)點(diǎn)操作
1. 創(chuàng)建標(biāo)簽
$("<a href=''></a>")//括號(hào)里是標(biāo)簽，可以填寫(xiě)標(biāo)簽屬性叼风。
2.內(nèi)部插入父子級(jí)別插入
- 末尾插入標(biāo)簽
append()
var res=$("<a href=''></a>")
res.html('ddd')
$('.main').append(res)//末尾插入
- 插入到
appendTo
$('.main').appendTo($('.list'))//將main插入到list里面取董。list不能為main的子元素。同級(jí)可以插入无宿，
- 開(kāi)頭插入標(biāo)簽
prepend
var res=$("<a href=''></a>")
res.html('ddd')
$('.main').prepend(res)
- 把所有匹配的元素前置到另一個(gè)茵汰、指定的元素元素集合中
prependTo。
$("p").prependTo("#foo");
3.外部插入是同級(jí)元素的插入
-
after后面插入和insertBefore效果一樣孽鸡，before前面插入和insertArter效果一樣蹂午。
var res=$("<a>123</a>")
$("p").after(res)
4.節(jié)點(diǎn)的替換
- replaceWith（content/fun）參數(shù)可以是字符內(nèi)容，也可以是函數(shù)(函數(shù)返回值必須是字符串彬碱。)豆胸。將匹配的節(jié)點(diǎn)替換成指定的元素。前面的替換成后面的巷疼。
$('input:disabled').replaceWith('4444');
$('input:disabled').replaceWith("<a>ggggg</a>")
$('.main').replaceWith(function(){
return "<i>ffff</i>"
})
- replaceAll（param）只有一個(gè)參數(shù)被替換的元素晚胡，后面的替換成前面的。
$('<a>ggggg</a>').replaceAll($('.main'))
5.節(jié)點(diǎn)刪除
- empty（）刪除匹配的元素集合中所有的子節(jié)點(diǎn)。
$('.main').empty();//刪除main中所有的子節(jié)點(diǎn)搬泥。
- remove（param）桑寨，detach（param）只有一個(gè)參數(shù)是需要匹配帶有指定類(lèi)名和id名的字符串，可以不傳忿檩，刪除所有匹配到的元素尉尾。remove和detach功能一樣，區(qū)別是remove會(huì)移除綁定的事件燥透，detach不會(huì)沙咏。
$('input').remove();//刪除所有的input。
$('input').remove('#ddd');//刪除所有id為ddd的input
$('input').detach();//刪除所有的input班套。
$('input').detach('#ddd');//刪除所有id為ddd的input
6.節(jié)點(diǎn)克隆
- clone（param）一個(gè)參數(shù)為布爾值肢藐，true綁定的事件也會(huì)克隆，false不會(huì)吱韭，默認(rèn)false吆豹。
var res=$("div").clone(true);
$('.main').after(res)
13.事件的綁定和解綁
- 綁定事件通過(guò)on綁定事件，有兩個(gè)參數(shù)理盆，第一個(gè)參數(shù)是事件名痘煤，第二個(gè)參數(shù)是回調(diào)函數(shù)。
$(".main").on('click',function(){
})
- 移除事件off() 方法移除用on()綁定的事件處理程序猿规。還可以使用unbind（JQuery3.0移除）衷快；
不加事件名，默認(rèn)移除所有綁定的事件姨俩。
$("p").off()
$("p").unbind()
14.JQuery網(wǎng)絡(luò)請(qǐng)求
jQuery發(fā)請(qǐng)求可以使用$.get(),$.post(), $.ajax()(功能最齊全完善)蘸拔。一般使用的都是$.ajax()。
$.ajax({
timeout：3000环葵，//請(qǐng)求延遲時(shí)間调窍。
async：true，//默認(rèn)為true異步請(qǐng)求true為同步张遭。
type: "POST", //規(guī)定哪種請(qǐng)求方式
url: "/login", //請(qǐng)求路徑
contentType: 'application/x-www-form-urlencoded;charset=utf-8', //請(qǐng)求頭
data: {username:$("#username").val(), password:$("#password").val()}, //參數(shù)
dataType: "json", //傳輸?shù)臄?shù)據(jù)類(lèi)型
success: function(data){ //請(qǐng)求成功的回調(diào)
console.log(data);
}邓萨，
error:function(e){ //請(qǐng)求失敗的回調(diào)
console.log(e);
},
statusCode: {404: function() {//響應(yīng)的狀態(tài)碼回調(diào)
alert('page not found');
}
});
15.查找元素
- 查找父元素parent（）取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合。返回的數(shù)據(jù)包含子元素帝璧。
$("p").parent()
- 查找所有的父元素parents（）先誉，取得一個(gè)包含著所有匹配元素的祖先元素的元素集合（不包含子元素）
$("span").parents("p")//查找父元素集合中所有p的元素集合
- 查找子元素children（）
$("div").children()
- 查找當(dāng)前元素相鄰的后面同級(jí)元素集合next（）一個(gè)
$("p").next()
- 查找當(dāng)前元素相鄰的后面同級(jí)元素集合nextAll（）后面所有同級(jí)元素
$("p").nextAll()
- 查找當(dāng)前元素相鄰的前面同級(jí)元素集合prev（）前面一個(gè)同級(jí)元素
$("p").prev()
- 查找當(dāng)前元素相鄰的前面同級(jí)元素集合prevAll（）前面所有同級(jí)元素
$("p").prevAll()
- 查找指定元素find（）搜索所有與指定表達(dá)式匹配的元素.
$("p").find("span")
