-
jQuery中DOM元素的獲取index方法
?get方法是通過已知的索引在合集中找到對(duì)應(yīng)的元素。
.index()方法從已知元素在合集中找到對(duì)應(yīng)的索引
.index()方法,從匹配的元素中搜索給定元素的索引值,從0開始計(jì)數(shù)。
?參數(shù)接受一個(gè)jQuery或者dom對(duì)象作為查找的條件
eg:
<ul> ????<a></a>
????<li?id="test1">1</li> ????<li?id="test2">2</li> ????<li?id="test3">3</li> </ul>
$("li").index() 沒有傳遞參數(shù),反正的結(jié)果是1
?返回值就是jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置,因?yàn)閘i前面還有a(a--0)所以是1
$("li").index(document.getElementById("test2"))?//結(jié)果:1 ??返回值就是傳入的元素相對(duì)于原先集合的位置 也就是li在所有l(wèi)i中的位置,不包括a了
查看全部 -
jQuery中DOM元素的獲取get方法
用處:
jQuery是一個(gè)合集對(duì)象,如果需要單獨(dú)操作合集中的的某一個(gè)元素,可以通過.get()方法獲取到
?語法:
.get(?[index?]?)?(從0開始索引)
- get方法是獲取的dom對(duì)象,也就是通過document.getElementById獲取的對(duì)象
負(fù)索引值參數(shù)
get方法還可以從后往前索引,傳遞一個(gè)負(fù)索引值,注意的負(fù)值的索引起始值是-1-----(-1也就是最后一個(gè))
查看全部 -
jQuery中去空格神器trim方法
用處:
例如常見的登錄信息的提交處理。用戶的輸入不一定是標(biāo)準(zhǔn)的,輸入一段密碼:' ?1123456 ?",注意了: 密碼的前后會(huì)留空,這可能是用戶的無心的行為,但是密碼確實(shí)又沒錯(cuò),針對(duì)這樣的行為,開發(fā)者應(yīng)該要判斷輸入值的前后是否有空白符、換行符、制表符這樣明顯的無意義的輸入值。
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
沒有多余的參數(shù)用法
?注意:
- 移除字符串開始和結(jié)尾處的所有換行符,空格(包括連續(xù)的空格)和制表符(tab)
- 如果這些空白字符在字符串中間時(shí),它們將被保留,不會(huì)被移除
查看全部 -
jQuery中查找數(shù)組中的索引inArray
?jQuery封裝了inArray()函數(shù)判斷元素是否存在數(shù)組中
類似indexOf方法
jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值,并返回其索引值。如果數(shù)組中不存在該值,則返回 -1。
語法:
jQuery.inArray(?value,?array?,[?fromIndex?]?)
傳遞一個(gè)檢測的目標(biāo)值----> value
然后傳遞原始的數(shù)組------>array
通過fromIndex規(guī)定查找的起始值,默認(rèn)數(shù)組是0開始
eg:
在數(shù)組中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7])?//返回對(duì)應(yīng)的索引:4
如果要判斷數(shù)組中是否存在指定值,你需要通過該函數(shù)的返回值不等于(或大于)-1來進(jìn)行判斷
查看全部 -
jQuery中each方法的應(yīng)用
?語法
jQuery.each(array,?callback?) jQuery.each(?object,?callback?)
第一個(gè)參數(shù)傳遞的就是一個(gè)對(duì)象或者數(shù)組,第二個(gè)是回調(diào)函數(shù)
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ???//index是索引,也就是數(shù)組的索引(從0) ???//value就是數(shù)組中的值了,});
jQuery.each()函數(shù)還會(huì)根據(jù)每次調(diào)用函數(shù)callback的返回值來決定后續(xù)動(dòng)作。如果返回值為false,則停止循環(huán)(相當(dāng)于普通循環(huán)中的break);如果返回其他任何值,均表示繼續(xù)執(zhí)行下一個(gè)循環(huán)。
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ????return?false;?//停止迭代 });
查看全部 -
jQuery中停止動(dòng)畫stop
- .stop(); 停止當(dāng)前動(dòng)畫,點(diǎn)擊在暫停處繼續(xù)開始
- .stop(true); 如果同一元素調(diào)用多個(gè)動(dòng)畫方法,尚未被執(zhí)行的動(dòng)畫被放置在元素的效果隊(duì)列中。這些動(dòng)畫不會(huì)開始,直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候,隊(duì)列中的下一個(gè)動(dòng)畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行
- .stop(true,true); 當(dāng)前動(dòng)畫將停止,但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫的目標(biāo)值
$("#aaron").animate({ ????height:?300 },?5000) $("#aaron").animate({ ????width:?300 },?5000) $("#aaron").animate({ ????opacity:?0.6 },?2000)
- stop():只會(huì)停止第一個(gè)動(dòng)畫,第二個(gè)第三個(gè)繼續(xù)
- stop(true):停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫
- stop(true ture):停止動(dòng)畫,直接跳到第一個(gè)動(dòng)畫的最終狀態(tài)?
查看全部 -
jQuery中動(dòng)畫animate(下)
.animate(?properties,?options?)
options參數(shù)
- duration?- 設(shè)置動(dòng)畫執(zhí)行的時(shí)間
- easing - 規(guī)定要使用的 easing 函數(shù),過渡使用哪種緩動(dòng)函數(shù)
- step:規(guī)定每個(gè)動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)
- progress:每一次動(dòng)畫調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào),就是一個(gè)進(jìn)度的概念
- complete:動(dòng)畫完成回調(diào)
其中最關(guān)鍵的一點(diǎn)就是:
如果多個(gè)元素執(zhí)行動(dòng)畫,回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次,不是作為整個(gè)動(dòng)畫執(zhí)行一次
查看全部 -
jQuery中動(dòng)畫animate (上)
?對(duì)比一下2組動(dòng)畫設(shè)置的區(qū)別
$(elem).fadeOut(3000)?? $(elem).animate({??? ????opacity:0 },3000)
語法:
.animate(?properties?,[?duration?],?[?easing?],?[?complete?]?)
duration時(shí)間動(dòng)畫執(zhí)行的時(shí)間,持續(xù)時(shí)間是以毫秒為單位的;值越大表示動(dòng)畫執(zhí)行的越慢,不是越快。還可以提供'fast'?和?'slow'字符串,分別表示持續(xù)時(shí)間為200?和?600毫秒。easing動(dòng)畫運(yùn)動(dòng)的算法jQuery庫中默認(rèn)調(diào)用?swing。如果需要其他的動(dòng)畫算法,請(qǐng)查找相關(guān)的插件complete回調(diào)動(dòng)畫完成時(shí)執(zhí)行的函數(shù),這個(gè)可以保證當(dāng)前動(dòng)畫確定完成后發(fā)會(huì)觸發(fā)
所有用于動(dòng)畫的屬性這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能 ?background-color很明顯不可以
除了定義數(shù)值,每個(gè)屬性。這些快捷方式允許定制隱藏和顯示動(dòng)畫用來控制元素的顯示或隱藏 注意,CSS?樣式使用?DOM?名稱(比如?"")來設(shè)置而非?CSS?名稱(比如?"font-size")。 特別注意單位,屬性值的單位像素(px),除非另有說明。 如果提供一個(gè),那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來計(jì)算的 eg:??$aaron.animate({ ?????????????????width??:?"+=100px", ?????????????????height?:?"+=100px" ????????????});
.animate()方法允許我們在任意的數(shù)值的CSS屬性上創(chuàng)建動(dòng)畫。
.animate({ }),要寫{}里
查看全部 -
jQuery中淡入效果fadeTo
fadeTo能實(shí)現(xiàn)由顯示到任意opacity值的的隱藏
查看全部 -
jQuery中上卷動(dòng)畫slideUp
不帶參數(shù)
這個(gè)使用的含義就是:找到元素的高度,然后采用一個(gè)下滑動(dòng)畫讓元素一直滑到隱藏,當(dāng)高度為0的時(shí)候,也就是不可見的時(shí),修改元素display?樣式屬性被設(shè)置為none。這樣就能確保這個(gè)元素不會(huì)影響頁面布局了
查看全部 -
jQuery中下拉動(dòng)畫slideDown
.slideDown( [duration ] [, complete ] )
持續(xù)時(shí)間(duration)是以毫秒為單位的,數(shù)值越大,動(dòng)畫越慢,不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串,或者這個(gè)duration參數(shù)被省略,那么默認(rèn)使用400 毫秒的延時(shí)。
- 如 果提供回調(diào)函數(shù)參數(shù),callback會(huì)在動(dòng)畫完成的時(shí)候調(diào)用。將不同的動(dòng)畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù),但是 this會(huì)設(shè)成將要執(zhí)行動(dòng)畫的那個(gè)DOM元素,如果多個(gè)元素一起做動(dòng)畫效果,那么要非常注意,回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫后都執(zhí)行一次,而不是這組 動(dòng)畫整體才執(zhí)行一次
查看全部 -
- 如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式
- 如果讓show與hide成為一個(gè)動(dòng)畫,那么默認(rèn)執(zhí)行動(dòng)畫會(huì)改變元素的高度,高度,透明度
?
查看全部 -
jQuery中隱藏元素的hide方法
?當(dāng)提供hide方法一個(gè)參數(shù)時(shí),.hide()就會(huì)成為一個(gè)動(dòng)畫方法。.hide()方法將會(huì)匹配元素的寬度,高度,以及不透明度,同時(shí)進(jìn)行動(dòng)畫操作
查看全部 -
<script type="text/javascript">
? ? $("#exec").click(function() {
? ? ? ??
? ? ? ? var v=$("#animation").val();
? ? ? ? $("#aaron").empty();
? ? ? ? if(v=="1"){
? ? ? ? ? ? $.each(['jhon','慕課'],function(i,item){
? ? ? ? ? ? ? ? $("#aaron").append("屬性名=" + i +";屬性值=" + item);
? ? ? ? ? ? })
? ? ? ? }
? ? ? ??
? ? ? ? else if(v == "2"){
? ? ? ? ? ? $.each({
? ? ? ? ? ? ? ? name:"李星辰",
? ? ? ? ? ? ? ? age:"24"
? ? ? ? ? ? },function(propert,value){
? ? ? ? ? ? ? ? $("#aaron").append("屬性名" + propert + ",屬性值" + value);
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? }
? ? });
? ? </script>
查看全部 -
.index()
.index(selector)
.index(element)
如果不傳遞任何參數(shù)給 .index() 方法,則返回值就是jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置
如果在一組元素上調(diào)用 .index() ,并且參數(shù)是一個(gè)DOM元素或jQuery對(duì)象, .index() 返回值就是傳入的元素相對(duì)于原先集合的位置
如果參數(shù)是一個(gè)選擇器, .index() 返回值就是原先元素相對(duì)于選擇器匹配元素的位置。如果找不到匹配的元素,則 .index() 返回 -1
查看全部 -
DOM元素的獲?。篻et
注意:
get方法是獲取的dom對(duì)象,也就是通過document.getElementById獲取的對(duì)象;
get方法是從0開始索引的。
get方法還可以從后往前索引,傳遞一個(gè)負(fù)索引值,注意的負(fù)值的索引起始值是-1,同樣是找到第二元素,可以傳遞$(a).get(-2)。
查看全部 -
去空格神器:trim()
注意:
移除字符串開始和結(jié)尾的所有換行符,空格(包括連續(xù)的空格)和制表符(tab);
如果這些空白字符在字符串中間時(shí),它們將被保留,不會(huì)被移除。
查看全部 -
.stop():停止動(dòng)畫,點(diǎn)擊在暫停處繼續(xù)開始。
.stop(true):如果同一元素調(diào)用多個(gè)動(dòng)畫方法,尚未被執(zhí)行的動(dòng)畫被放置在元素的效果隊(duì)列中。這些動(dòng)畫不會(huì)開始,直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候,隊(duì)列中的下一個(gè)動(dòng)畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行。
.stop(true,true):當(dāng)前動(dòng)畫將停止,但該元素上的CSS屬性會(huì)被立刻修改成動(dòng)畫的目標(biāo)值。
查看全部
舉報(bào)