jquery一些方法總結(jié)(持續(xù)更新中)

slideToggle():

語法:
$(selector).slideToggle(speed,callback)

speed

可選。規(guī)定元素從隱藏到可見的速度(或者相反)。默認(rèn)為 "normal"。
可能的值:
毫秒 (比如 1500)
"slow"
"normal"
"fast"
在設(shè)置速度的情況下晕鹊,元素在切換的過程中岛请,會逐漸地改變其高度(這樣會創(chuàng)造滑動效果)旭寿。

callback

可選。toggle 函數(shù)執(zhí)行完之后崇败,要執(zhí)行的函數(shù)盅称。
除非設(shè)置了 speed 參數(shù),否則不能設(shè)置該參數(shù)后室。

提示:如果元素已經(jīng)隱藏缩膝,則該效果不產(chǎn)生任何變化,除非規(guī)定了 callback 函數(shù)岸霹。


ready():

語法 1
$(document).ready(function)
語法 2
$().ready(function)
語法 3
$(function)

當(dāng) DOM(文檔對象模型) 已經(jīng)加載疾层,并且頁面(包括圖像)已經(jīng)完全呈現(xiàn)時,會發(fā)生 ready 事件贡避。
由于該事件在文檔就緒后發(fā)生云芦,因此把所有其他的 jQuery 事件和函數(shù)置于該事件中是非常好的做法。
ready() 函數(shù)規(guī)定當(dāng) ready 事件發(fā)生時執(zhí)行的代碼贸桶。
ready() 函數(shù)僅能用于當(dāng)前文檔舅逸,因此無需選擇器。

提示:ready() 函數(shù)不應(yīng)與 <body onload=""> 一起使用皇筛。


detach()

語法
$(selector).detach()

detach() 方法移除被選元素琉历,包括所有文本和子節(jié)點。
這個方法會保留 jQuery 對象中的匹配的元素水醋,因而可以在將來再使用這些匹配的元素旗笔。
detach() 會保留所有綁定的事件、附加的數(shù)據(jù)拄踪,這一點與 remove() 不同蝇恶。

實例:

//移動元素
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>移動 p 元素</button>
</body>

//使用 detach() 方法來刪除并恢復(fù)一個元素。
<script type="text/javascript">
$(document).ready(function(){
  var x;
  $("#btn1").click(function(){
    x=$("p").detach();
  });
  $("#btn2").click(function(){
    $("body").prepend(x);
  });
});
</script>
</head>
<body>
<p>這是一個段落惶桐。</p>
<button id="btn1">刪除 p 元素</button>
<button id="btn2">恢復(fù) p 元素</button>
</body>

//使用 detach() 方法來移動元素撮弧,并保留元素的 jQuery 數(shù)據(jù)。
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>
</head>
<body>
<p>在本段落移動之后姚糊,試著點擊該段落贿衍,請注意它保留了 click 事件。</p>
<button>移動 p 元素</button>
</body>

animate()

語法:
$(selector).animate({params},speed,callback);
  • 必需的 params 參數(shù)定義形成動畫的 CSS 屬性救恨。
  • 可選的 speed 參數(shù)規(guī)定效果的時長贸辈。它可以取以下值:"slow"、"fast" 或毫秒肠槽。
  • 可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱擎淤。

實例:

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 
animate() - 操作多個屬性

實例:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

stop()

stop() 方法停止當(dāng)前正在運行的動畫奢啥。

語法
$(selector).stop(stopAll,goToEnd)
參數(shù) 描述
stopAll 可選。規(guī)定是否停止被選元素的所有加入隊列的動畫嘴拢。
goToEnd 可選桩盲。規(guī)定是否允許完成當(dāng)前的動畫。該參數(shù)只能在設(shè)置了 stopAll 參數(shù)時使用炊汤。

實例:

$(document).ready(function(){
  $("#start").click(function(){
    $("#box").animate({height:300},"slow");
    $("#box").animate({width:300},"slow");
    $("#box").animate({height:100},"slow");
    $("#box").animate({width:100},"slow");
  });
  $("#stop").click(function(){
    $("#box").stop(true);
  });
});

finish()

語法:
$(*selector*).finish(*queueName*)

停止當(dāng)前運行的動畫,移除所有排隊的動畫弊攘,并為被選元素完成所有動畫抢腐。該方法與 .stop(true,true) 方法類似,不同的是襟交,finish() 也會引起所有排隊動畫的 CSS 屬性停止迈倍。
queueName可選。規(guī)定要停止動畫的隊列名稱捣域。


slideToggle()

slideDown()

slideUp()

  • slideToggle()方法通過使用滑動效果(高度變化)來切換元素的可見狀態(tài)啼染。
    如果被選元素是可見的,則隱藏這些元素焕梅,如果被選元素是隱藏的迹鹅,則顯示這些元素。
  • slideUp() 方法在已經(jīng)顯示的情況下,隱藏選中的元素
  • slideDown() 方法在已經(jīng)隱藏的情況下,顯示選中的元素
語法
$(selector).slideToggle(speed,callback)  //在顯示與隱藏之間來回切換
$(selector).slideUp(speed,callback)   //在已經(jīng)顯示的情況下,隱藏選中的元素
$(selector).slideDown(speed,callback)   //在已經(jīng)隱藏的情況下,顯示選中的元素
參數(shù) 描述
speed 可選贞言。規(guī)定元素從隱藏到可見的速度(或者相反)斜棚。默認(rèn)為 "normal"「么埃可能的值:毫秒 (比如1500)"slow""normal""fast"在設(shè)置速度的情況下弟蚀,元素在切換的過程中,會逐漸地改變其高度(這樣會創(chuàng)造滑動效果)酗失。
callback 可選义钉。toggle 函數(shù)執(zhí)行完之后,要執(zhí)行的函數(shù)规肴。除非設(shè)置了 speed 參數(shù)捶闸,否則不能設(shè)置該參數(shù)。

index()

語法
$(selector).index()  //獲得第一個匹配元素相對于其同胞元素的 index 位置拖刃。
$(selector).index(element)  //獲得元素相對于選擇器的 index 位置鉴嗤。該元素可以通過 DOM 元素或 jQuery 選擇器來指定。

index() 方法返回指定元素相對于其他指定元素的 index 位置序调。
這些元素可通過 jQuery 選擇器或 DOM 元素來指定醉锅。
注釋:如果未找到元素,index() 將返回 -1发绢。

實例:

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($(".hot").index($("#favorite")));
  });
});
</script>
</head>
<body>
<p>請點擊下面的按鈕硬耍,以獲得 id="favorite" 的元素相對于 jQuery 選擇器 (class="hot") 的 index:</p>
<button>獲得 index</button>
<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot" id="favorite">Coffee</li>
</ul>
</body>

展示元素$node, 隱藏元素$node

$(ele).show()
$(ele).hide()

獲取元素$node 的 屬性: id垄琐、src、title经柴, 修改以上屬性

$node.attr('id');//獲取
$node.attr('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改

給$node 添加自定義屬性data-src

$node.data("src",str)

在$ct 內(nèi)部最開頭添加元素$node

$(".ct").prepend(node);

在$ct 內(nèi)部最末尾添加元素$node

$(".ct").append(node);

刪除$node

$node.remove()

把$ct里內(nèi)容清空

$ct.empty()

在$ct 里設(shè)置 html <div class="btn"></div>

$ct.html('<div class="btn"></div>')

獲取狸窘、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距坯认、包括內(nèi)邊距翻擒、包括邊框、包括外邊距)

$node.width();//不包括內(nèi)邊距寬度,僅包括內(nèi)容
$node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容
$node.innerWidth();//包括內(nèi)容和內(nèi)邊距寬度
$node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度
$node.outerWidth();//包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?$node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度

獲取窗口滾動條垂直滾動距離

$(window).scrollTop()

獲取$node 到根節(jié)點水平牛哺、垂直偏移距離

$node.offset().left
$node.offset().top

修改$node 的樣式陋气,字體顏色設(shè)置紅色,字體大小設(shè)置14px

$node.css({"color":"red","font-size":"14px"})

遍歷節(jié)點引润,把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍

$node.each(function(){
console.log($(this).text())
})

從$ct 里查找 class 為 .item的子元素

$ct.find('.item')

獲取$ct 里面的所有孩子

$ct.children()

對于$node巩趁,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子

$node.parents('.ct').children('.panel')

獲取選擇元素的數(shù)量

$(ele).length
$(ele).size()

獲取當(dāng)前元素在兄弟中的排行

$(ele).index();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末淳附,一起剝皮案震驚了整個濱河市议慰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌奴曙,老刑警劉巖别凹,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異洽糟,居然都是意外死亡番川,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進(jìn)店門脊框,熙熙樓的掌柜王于貴愁眉苦臉地迎上來颁督,“玉大人,你說我怎么就攤上這事浇雹〕劣” “怎么了?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵昭灵,是天一觀的道長吠裆。 經(jīng)常有香客問我,道長烂完,這世上最難降的妖魔是什么试疙? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮抠蚣,結(jié)果婚禮上祝旷,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好怀跛,可當(dāng)我...
    茶點故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布距贷。 她就那樣靜靜地躺著,像睡著了一般吻谋。 火紅的嫁衣襯著肌膚如雪忠蝗。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天漓拾,我揣著相機與錄音阁最,去河邊找鬼。 笑死骇两,一個胖子當(dāng)著我的面吹牛速种,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播脯颜,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼被碗,長吁一口氣:“原來是場噩夢啊……” “哼驳阎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起渗柿,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤饱亮,失蹤者是張志新(化名)和其女友劉穎矾芙,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體近上,經(jīng)...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡剔宪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了壹无。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片葱绒。...
    茶點故事閱讀 40,615評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖斗锭,靈堂內(nèi)的尸體忽然破棺而出地淀,到底是詐尸還是另有隱情,我是刑警寧澤岖是,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布帮毁,位于F島的核電站,受9級特大地震影響豺撑,放射性物質(zhì)發(fā)生泄漏烈疚。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一聪轿、第九天 我趴在偏房一處隱蔽的房頂上張望爷肝。 院中可真熱鬧,春花似錦、人聲如沸阶剑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽牧愁。三九已至素邪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間猪半,已是汗流浹背兔朦。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留磨确,地道東北人沽甥。 一個月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像乏奥,于是被迫代替她去往敵國和親摆舟。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,630評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 通過jQuery邓了,您可以選群抻铡(查詢,query)HTML元素骗炉,并對它們執(zhí)行“操作”(actions)照宝。 jQuer...
    枇杷樹8824閱讀 659評論 0 3
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,649評論 18 503
  • jQuery中隱藏元素的hide方法 讓頁面上的元素不可見,一般可以通過設(shè)置css的display為none屬性句葵。...
    阿r阿r閱讀 1,153評論 0 4
  • 注視著花瓣 是你的笑臉 注視著你的笑臉 又是花瓣 同樣的容顏 肥了思戀 瘦了留連 綠葉敞開了一片 水蓮初露一點 才...
    長河冬陽閱讀 210評論 4 6
  • /** 控制器轉(zhuǎn)場動畫 */ + (void)transitionsPushfromRight:(float)tr...
    木_風(fēng)閱讀 342評論 0 1