一、通過js實現(xiàn)頁面加載完畢執(zhí)行代碼的方式與jquery的區(qū)別
1、通過jquery的方式可以 讓多個方法被執(zhí)行,而通過window.onload的方式只能執(zhí)行最后一個,
因為最后一次注冊的方法會把前面的方法覆蓋掉
1、 window.onload需要等待頁面的所有元素資源比如說img里的圖片一些連接等等都下載完畢后才會觸發(fā);
2、 而jquery只要頁面的標(biāo)簽元素都下載完畢就會觸發(fā)了
二、$.map(數(shù)組,function(ele,index){})函數(shù)對數(shù)組進行遍歷,遍歷之后會返回一個新的數(shù)組
function()里的兩個元素
--》第一個是原來數(shù)組的每一個元素,
--》元素的索引
$.each(數(shù)組/對象,function(key,val){});也是對一個數(shù)組遍歷,但是不會返回新的數(shù)組,
針對鍵值對的數(shù)組,普通數(shù)組也可以
function()里的兩個參數(shù)
--》第一個是鍵(索引)
--》第二個是值
在each里也可以用this,表示當(dāng)前元素的值,就是val
一個小技巧:
var arryInt=[]; //現(xiàn)在數(shù)組的長度為0
arryInt[arryInt.length]=10; //那么現(xiàn)在這句話的意思就是:給arryInt這個數(shù)組的索引為0元素賦值,
因為一開始arryInt的長度是0,所以現(xiàn)在這個話里的[arryInt.length]就是0
arryInt[arryInt.length]=20; //這里是給arryint數(shù)組的索引為1的元素賦值
,因為前面已經(jīng)往數(shù)組插了一個元素了,到這一句話的時候arryInt的長度就是1了,
所以依次下去就一直都是給數(shù)組的下一個元素賦值
3)tirm()函數(shù) 去空格
方法原型:var str='12253653dfdfds';
str.replace(/^[/s/xA0]+/,'').replace(/[/s/xA0]+$/,''); //用正則表達(dá)式替換/xA0也表示空格,
全角的空格去不掉,要去掉的話要找正則表達(dá)式里表示全角空格的符號加上去
三、jquery對象轉(zhuǎn)換為dom對象
-->第一種方式var domObj=jqueryObj.get[0];
---》第二種方式:var domObj=jqueryObj[0];
把DOM對象轉(zhuǎn)換為
var jqueryObj=$(domObj);
DOM的方法屬性只能用DOM對象使用
JQuery的方法只能用JQuery對象調(diào)用
兩者不能混用,要用的話必須要轉(zhuǎn)換
2)jquery里的選擇器
jquery中的id選擇器,表示直接獲取頁面上ID為dv1的DOM對象,并且返回值就是一個jquery對象
--》id選擇器
$('#dv1');
--->標(biāo)簽選擇器
$('div');
$('div').text('hahahah'); //這里是獲取頁面上的所有div標(biāo)簽,給這些標(biāo)簽賦值,
jquery的內(nèi)部已經(jīng)幫我們循環(huán)了每一個標(biāo)簽,所以一句話就可以搞定了,這就是隱式迭代
--》類選擇器
$('.cla'); //選擇頁面上所有應(yīng)用了cla類樣式的元素
-->多條件選擇器:表示應(yīng)用了myid 樣式的元素,頁面上所有的p元素,
所有的應(yīng)用了cla類樣式的元素的CSS樣式的前景色設(shè)置為紅色
$('#myid,p,.cla').css('color','red');
-->層次選擇器:要注意空格
表示選中div下的所有p元素,無論是直接子元素還是后代元素
$('div p').css('color','red');
$('div > p') div下的直接子元素,不包含后代元素
$('div + p') 選中div后面緊跟著的p元素 注意:div后緊跟著的一個元素,并且這個元素必須是p元素,
否則就不能選中了
$('div + p') 等價于 $('div').next('p') 獲得div后面
$('div ~ p') 選中當(dāng)前元素的緊跟著的所有的兄弟P元素
$('div ~ p') 等價于 $('div').nextAll('p')
$('div').PRev(); 獲得div的前一個兄弟
$('div').prevAll(); 獲得div前面的所有兄弟元素
$('div').siblings() 獲得到除了當(dāng)前div元素之后的所有前面和后面的元素
3)鏈?zhǔn)骄幊?/font>
$('p').text('你們都是p').css('color','red').css('border','1px solid pink').click(function(){
alert('哈哈,我又變帥了');
});
他是怎么實現(xiàn)的呢?
其實它每一個方法調(diào)用最后都返回了這個對象它自己 return this
--》注意:
由于prev()、nextAll()這些方法返回值已經(jīng)不是當(dāng)初調(diào)用該函數(shù)的的對象了,所以已經(jīng)破壞了這個鏈了,
所以再繼續(xù)鏈?zhǔn)秸{(diào)用的時候就不行了
要想繼續(xù)鏈?zhǔn)骄驮阪湐嗟暮竺婕?end()方法
--》jquery方法的一般規(guī)律,如果傳遞參數(shù)白哦是設(shè)置一個值,如果不傳遞參數(shù)表示獲取一個值
--》設(shè)置元素的值是通過val()方法來設(shè)置的,當(dāng)傳遞參數(shù)的時候,表示為元素的value賦值
--》.html()方法相當(dāng)于innerText html是設(shè)置該元素的html內(nèi)容 ,
注意html返回的我是字符串而不是對象本身,所以破壞了鏈?zhǔn)骄幊讨械逆湥?/font>
html后面要是鏈一些字符串沒有的方法就不能不能鏈?zhǔn)搅耍?/font>
.text()相當(dāng)于innerText text是該元素顯示的文字
html()、text()這兩個方法當(dāng)不傳遞參數(shù)的時候是取值,當(dāng)時隱式迭代的時候
(就是返回標(biāo)簽元素集合的時候)html()取的是第一個元素的值,text()取的是所有元素的值
、
四、JQuery的迭代(包裝集)
通過$(選擇器)獲取到的對象,其實是個集合
var val=$('txt').val();
alert(val); //這里即便頁面上沒有id為txt的元素,也不會報錯,
因為jquery選擇器返回的是一個集合,如果有元素則放在集合中,
如果沒有元素則這個集合的長度為0,即:集合是一個空集合
當(dāng)要設(shè)置多個css樣式的時候,可以通過調(diào)用一次css()方法,
傳遞一個鍵值對對象進去就可以了,通過這種方式設(shè)置的是元素的“行內(nèi)樣式“->”在style屬性中顯示的樣式
<stylr type='text/css'>
.c1{
border:1px solid pink;
color:red;
}
</style>
<div></div>
通過類樣式來設(shè)置div的顯示樣式
$('div').addClass('c1');
移除一個類樣式
$('div').removeClass('c1');
把一個元素的所有類樣式移除
$('div').removeAttr('class')
判斷是否引用了一個類樣式
$('div').hasClass('c1');
五、過濾選擇器
在選中的所有元素中,選中第一個p元素
$('p:first').css()
等價于
$('p').first().css()
在選中的所有元素中,選中第一個p元素
$('p:last').css()
等價于
$('p').last().css()
在選中的所有元素中,選中索引為2的元素,如果所有超出界限沒有任何效果
$('p:eq(2)').css()
選中所有索引大于2的元素,不包含當(dāng)前元素
$('p:gt(2)').css()
選中所有索引小于2的元素,不包含當(dāng)前元素
$('p:lt(2)').css()
選中除了應(yīng)用了某個(cls)類樣式的所有元素
$('p:not(.cls)').css()
選中頁面上所有的h標(biāo)簽,無論是h幾
$(':header').css();
選中頁面上所有的偶數(shù)的p元素
$('p:even');
選中頁面上所有的位置排在奇數(shù)的p元素
$('p:odd');
新聞熱點
疑難解答