1. jQuery 能做什么数初?
首先jQuery是一個簡單叹括、精簡枯芬、功能豐富的JavaScrip工具庫,他提供了易于使用且兼容性好的API碰辅,使用jQuery可以更加簡單的操作例如HTML文檔遍歷和操作懂昂、事件處理、Ajax没宾、動畫等凌彬。
2. jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化榕吼?
區(qū)別:
直接利用“===”進行判斷饿序,結(jié)果為false
選擇的不同,jQuery對象要用jQuery方法選擇羹蚣,DOM對象要用原生JS方法選擇
操作方法不同,jQuery對象要用jQuery方法操作乱凿,DOM對象要用原生JS方法操作
轉(zhuǎn)化:
對jQuery對象使用下標(biāo)選擇可得到DOM原生對象顽素,
例:$('xxx')[0] === document.querySelector('xxx'),結(jié)果為true對DOM原生對象使用$()可得到j(luò)Query對象徒蟆,雖然都是指向同一個對象胁出,但是得到的jQuery對象和直接用jQuery方法選擇的對象不同
例:$(document.querySelector('xxx')) === $('xxx'),結(jié)果為false
3. jQuery中如何綁定事件段审?bind全蝶、unbind、delegate寺枉、live抑淫、on、off都有什么作用姥闪?推薦使用哪種始苇?使用on綁定事件使用事件代理的寫法?
jQuery可以使用bind,live,delegate,on這四種方式進行事件監(jiān)聽,還可以直接綁定例如a.click(function(){}); a.change(function(){})
對應(yīng)的筐喳,移除一個事件的處理函數(shù)的方法:unbind,die,undelegate,off
用法:
$(selector).bind(events,[data],fn); 對單個目標(biāo)元素進行監(jiān)聽
$(selector).live(events,[data],fn); 效果和bind相同催式,但是運用到事件委托機制
$(selector).delegate(childSelector,events,[data],fn); 實現(xiàn)事件代理
$(selector).on(events,[childSelector],[data],fn); 可以實現(xiàn)以上所有功能函喉,如單個目標(biāo)元素的監(jiān)聽,監(jiān)聽多個目標(biāo)
所以荣月,推薦使用on
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
<script>
$('ul').on('click','li',function(){
console.log(this)
})
</script> //對ul進行監(jiān)聽管呵,使用childSelector這個參數(shù),對子元素進行事件綁定
</body>
</html>
4. jQuery 如何展示/隱藏元素哺窄?
可以使用添加刪除元素實現(xiàn)撇寞,可用的函數(shù)有append,appendTo,prepend,prependTo,before,insertBefor,after,insertAfter, 例:在div添加
$('div').append('<h1>title</h1>')
; 刪除div$('div').remove()
使用jQuery動畫相關(guān)的函數(shù)堂氯,hide,show,toggel,fadeIn,fadeOut,fadeToggle,slideDown,slideUp,slideToggle, 例:隱藏div蔑担,$('div').hide(), 展示div,$('div').show(); 或者直接使用$('div').toggle()即可實現(xiàn)展示和隱藏的切換
寫CSS咽白,然后給目標(biāo)元素添加相應(yīng)的class達到展示/隱藏效果啤握,$('div').addClass()
5. jQuery 動畫如何使用?
寫一個demo展示jQuery動畫用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.cnt {
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="cnt"></div>
<button class="hide">hide</button>
<button class="show">show</button>
<button class="toggle">toggle</button>
<button class="animate">自定義動畫</button>
<script>
var $cnt = $('.cnt')
$('.hide').click(function(){
$cnt.hide(4000,function(){
elart('已隱藏')
})
})
$('.show').click(function(){
$cnt.show(4000,fucntion(){
elart('已展示')
})
})
$('.toggle').click(function(){
$cnt.toggle(4000,function(){
elart('切換隱藏或展示')
})
})
$('.animate').click(function(){
$cnt.animate(
{
width: '+=100px',
height: '+=100px',
opacity: 0.25
})
.animate({
left: '+=200px'
})
.animate({
top: '+=200px'
})
.animate({
width: '-=100px',
height: '-=100px',
opacity: 1,
left: '-=200px',
top: '-=200px'
},4000)
})
$('.finish').click(function(){
$cnt.finish()
})
$('.stop').click(function(){
$cnt.stop(true,true)
})
</script>
</body>
</html>
6. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容晶框?如何設(shè)置和獲取元素內(nèi)部文本排抬?
$('xxx').html(),不傳遞參數(shù)時獲取所選元素的HTML,當(dāng)傳遞參數(shù)時授段,$('xxx').html(string), 則會替換原HTML內(nèi)容蹲蒲。
$('xxx').text(),不傳遞參數(shù)時獲取所選元素的innerText,當(dāng)傳遞參數(shù)時,$('xxx').text(string), 則會替換原元素下的innerText侵贵。
7. 如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容届搁?如何設(shè)置和獲取元素屬性?
$('input').val(),不傳遞參數(shù)時窍育,獲取表單用戶輸入或選擇的內(nèi)容卡睦,當(dāng)傳遞參數(shù)時,$('input').val(string), 會修改input的value值為參數(shù)值漱抓。
獲取元素特定屬性的值 .attr(attributeName)
為元素屬性賦值 .attr(attributeName,value) / .attr(attributesJson) / .attr(attributeName,function(index,attr))