jQuery的常規(guī)使用:
1梯啤、提供強(qiáng)大的選擇器
2、提供大量好用的方法存哲,方便于我們進(jìn)行DOM操作
3因宇、對于處理的處理
4、提供豐富的動畫效果
5祟偷、對應(yīng)ajax進(jìn)行封裝
1察滑、封裝重復(fù)調(diào)用代碼
2、解決一些IE 瀏覽器的兼容性
jQuery JavaScript的庫(函數(shù)庫)封裝代碼
框架一般是擴(kuò)展代碼 (angularJS reactJS vueJS)
jQuery的官方:http://jquery.com/
目前jQuery的版本主要分為三個分支:
1.x:
2.x:
3.x:
jQuery選擇器:
1修肠、基本選擇器:
id選擇器 #
class類選擇器 .
element
逗號選擇器
通配符 *
tag 標(biāo)簽選擇器
+下一個選擇器
2贺辰、包含選擇器:
子代選擇器 >
后代選擇器 空格
3、屬性選擇器:
[title]
[title='xxxxxxxxxx']
[title*='xxxx']
[title^='xxxxxx'
[title$='xxxxx']
4氛赐、表單選擇器:
:input
:text
:radio
:enabled
:disabled
:checked
:selected
5魂爪、過濾選擇器:
eq() eq()
gt()
lt()
last() last()
first() first()
even()
odd()
parent
parents
next
nextaAll
siblings
chaindren
find
filter
動畫方法是可以傳遞參數(shù)的,當(dāng)參數(shù)是字符串時(slow normal fast)艰管。
但參數(shù)是數(shù)字的時候滓侍,此時,該參數(shù)就是動畫需要執(zhí)行的毫秒數(shù)牲芋。
jQuery代碼一般要求出現(xiàn)在ready函數(shù)中
在DOM加載完成后撩笆,會自動觸發(fā)
面試題:jQuery ready和js 的window onload事件的區(qū)別捺球。【
1.執(zhí)行時間
window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行夕冲。
(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行氮兵,不必等到加載完畢。 2.編寫個數(shù)不同 window.onload不能同時編寫多個歹鱼,如果有多個window.onload方法泣栈,只會執(zhí)行一個(document).ready()可以同時編寫多個,并且都可以得到執(zhí)行
3.簡化寫法
window.onload沒有簡化寫法
(document).ready(function(){})可以簡寫成(function(){});
(document).ready(function(){ // 執(zhí)行代碼 }); 或者(function(){
// 執(zhí)行代碼
});
在我以前的開發(fā)中弥姻,一般用到j(luò)avascript南片,我都是采用jquery的模式,也就是大多數(shù)時候庭敦,第一行寫的是:
(document).ready(function(){ ... }); 這個時候疼进,不一定要等所有的js和圖片加載完畢,就可以執(zhí)行一些方法秧廉,不過有些時候伞广,必須要等所有的 元素都加載完畢,才可以執(zhí)行一些方法的時候疼电,比如說嚼锄,部分圖片或者什么其他方面還沒有加載好,這個時候澜沟,點擊某些按鈕灾票,會導(dǎo)致出現(xiàn)意外的情況,這個時候茫虽,就 需要用到:(window).load(function ()
{
$("#btn-upload").click(function ()
{
//比如說:
uploadPhotos();
});
});
】
面試題:find函數(shù)和filter函數(shù)的區(qū)別刊苍?
find向內(nèi)部查找
filter只會過濾
動畫
三類九種動畫
show
hide
toggle
fadeIn
fadeOut
fadeToggle
slideDown
slideUp
slideToggle
animate
stop
jQuery事件
1、DOM
寫在標(biāo)簽內(nèi)的
如:<button onclick='test()'>點擊</button>
首先獲取DOM對象濒析,之后調(diào)用DOM對象.事件屬性
document.getElementById('show').onclick=fn(e)
2正什、DOM2
事件監(jiān)聽
document.getElementById('show').addEventListener('click',fn(e),ture);
jQuery上實現(xiàn)兩種:
偽代碼
('#show').click(fn(e))('#show').on('click',function(e){
})
jQuery方法:
each(funcyion(index,item){})
length
attr() / prop() / removeAttr() / removeProp()