JQuery能做什么？
Jquery是一個高效、精簡并且功能豐富的JavaScript工具庫，簡化大量的DOM操作，方便快捷，如選擇網(wǎng)頁元素、改變結(jié)果集、元素的操作、工具方法、事件處理、動畫和Ajax操作等，并且對于瀏覽器有良好的兼容性。與時俱進
JQuery對象和DOM原生對象有什么區(qū)別？如何相互轉(zhuǎn)換？
-
JQuery對象是一個類數(shù)組對象（封裝DOM對象后產(chǎn)生的對象），可以使用jQuery的API
JQuery對象.png -
DOM原生對象，只能使用原生對象的方法
DOM對象.png 轉(zhuǎn)換的方法
$(".ct")[0] === document.querySelector(".ct")
$(document.querySelector(".ct")) === document.querySelector(".ct")
選擇器
- 基本選擇器
基本選擇器.png
- 組合/層次選擇器
組合/層次選擇器
- 基本過濾選擇器
基本過濾選擇器
- 內(nèi)容過濾選擇器
- 可視化選擇器
- 屬性過濾選擇器
- 子元素過濾器
- 表單元素選擇器
對于一個特定結(jié)果集，獲取指定index的jQuery對象，可以使用eq方法
$(".ct").eq(2) //獲取結(jié)果集中第二個jQuery對象
- 兄弟元素的獲取
$("div").next() // 取得結(jié)果集中每個元素后面緊鄰?fù)呍氐募?$("div").prev(".box2") //取得結(jié)果集中每個元素之前的同輩元素
- 父子元素的獲取
$().parent() //取得匹配元素中每個元素的父元素
$().parents(“div”) //取得集合中每個匹配元素的祖先元素
$().children() // 取得匹配元素集合中每個元素的子元素
$().find("div") //查找符合選擇器的后代元素
- 篩選當(dāng)前結(jié)果集
$().first() //獲取當(dāng)前結(jié)果集中的第一個對象
$().last() //獲取當(dāng)前結(jié)果集中的最后一個對象
補充
jQuery DOM操作
創(chuàng)建元素
將DOM字符串傳入$()即返回一個jQuery對象
var obj = $('<div>newnewnewnewnew</div>');
添加元素
- append()
一次可以添加多個內(nèi)容（DOM對象、HTML string、jQuery對象）；
若參數(shù)是function，function則可返回DOM對象、HTML string、jQuery對象
$('.ct').append(obj);
- appendTo(target)
- before()
- insertBefore(target)
- after()
- insertAfter(target)
- prepend()
- prependTo(target)
與上類似
刪除元素
- remove()
- empty()
- detach()
包裹元素
- wrap() 在每個匹配的元素外層包裹一個HTML元素
$(".inner").wrap("<div></div>")
- wrapAll() 在所有匹配到的元素外層包裹一個公共的HTML元素
$('.inner').wrapAll('<div class="new" />')
- unwrap() 將匹配到的元素的父級元素刪除，保留自身
- wrapInner() 在匹配到的元素的內(nèi)容包裹一個HTML元素
將對象插入到目標(biāo)元素的尾部，目標(biāo)元素可以是選擇器、DOM對象、HTML string、元素集合、jQuery對象
$('<div>addaddadd</div>').appendTo(".ct");
html()
當(dāng)沒有傳遞參數(shù)的時候，返回元素的innerHTML
當(dāng)傳遞了一個string參數(shù)的時候，修改元素的innerHTML為參數(shù)值
text()
和html方法類似，操作的是DOM的innerText值
jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
- 綁定事件
.on(events，[selector],[data],handler(eventObject))
$(".ct2>ul>li").on("click",function(e){
var str = $(this).text();
$("#wrap").text(str);
})
$("#btn").on("click",function(e){
var newLi = $("#ipt").val()
$(".ct2>ul").append("<li>"+newLi+"</li>");
})
- bind 為一個元素綁定一個事件處理程序
- unbind 為一個元素解綁一個事件處理程序
- delegate 為所有匹配選擇器（selector參數(shù)）的元素綁定一個或多個事件處理函數(shù)，基于一個指定的根元素的子集，匹配的元素包括那些目前已經(jīng)匹配到的元素，也包括那些今后可能匹配到的元素
- live 附加一個事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來已廢棄
- on 在選定的元素上綁定一個或多個事件處理函數(shù)
-off 移除一個事件處理函數(shù)
其中吧，bind、unbind、delegate為1.7版本之前的，后期版本多使用on 、off進行事件綁定與刪除 - 事件代理寫法
//添加事件代理
$(".ct2>ul").on("click","li",function(e){
var str = $(this).text();
$("#wrap").text(str);
})
$("#btn").on("click",function(e){
var newLi = $("#ipt").val()
$(".ct2>ul").append("<li>"+newLi+"</li>");
})
jQuery 如何展示/隱藏元素？
$(".ct").css("display","none");
$(".ct").hide();
$('.box1').hide(3000,function(){ //隱藏元素
$('.box1').show(3000); //展示元素
});
jQuery 動畫如何使用？
.animate(properties [duration],[easing],[complete])
其中properties表示一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。complete表示動畫完成后執(zhí)行的函數(shù)
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？
- 獲取元素內(nèi)部HTML內(nèi)容
$(".ct").html()
- 設(shè)置元素內(nèi)部HTML內(nèi)容
$(".ct").html("<h1></h1>")
- 獲取元素內(nèi)部文本
$(".ct").text()
- 設(shè)置元素內(nèi)部文本
$(".ct").text("00000")
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？
- 獲取用戶輸入內(nèi)容或選擇內(nèi)容
// 設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容&設(shè)置和獲取元素屬性
$(".btn").on("click",function(){
var content = $(".ipt").val(); //獲取內(nèi)容
$(".show").append("<p>"+content+"</p>");
})
// 設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容&設(shè)置和獲取元素屬性
$(".btn").on("click",function(){
var content = $(".ipt").val();
$(".show").append("<p>"+content+"</p>");
})
$(".btn2").on("click",function(){
$(".ipt").val("addaddadd"); //設(shè)置內(nèi)容
})
- 設(shè)置和獲取元素的屬性
$(".box1").attr("name") //獲取元素的屬性
$(".box1").attr("id","content1") //設(shè)置元素的屬性
