詳解jQuery-each()方法
更新時(shí)間：2019年03月13日 16:15:53 作者：笑蒼茫
這篇文章主要介紹了jQuery-each()方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
jquery中有隱式迭代，不需要我們?cè)俅螌?duì)某些元素進(jìn)行操作。但是如果涉及到不同元素有不同操作，需要進(jìn)行each遍歷。本文利用10個(gè)li設(shè)置不同的透明度的案例，對(duì)each方法進(jìn)行說(shuō)明。
語(yǔ)法：
$(元素).each(function(index,element){ });
參數(shù)index：表示元素索引，在本例中是0-9
參數(shù)element：表示對(duì)象，在本例中是每個(gè)li
案例效果：
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
width: 100px;
height: 100px;
background-color: green;
list-style: none;
float: left;
margin-left: 10px;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script type="text/javascript">
$(function(){
//頁(yè)面加載后,讓每個(gè)li的透明度發(fā)生改變
$("li").each(function(index,element){
//第一個(gè)參數(shù)是索引,第二個(gè)參數(shù)是對(duì)象
$(element).css("opacity",(index+1)/10);
})
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
以上所述是小編給大家介紹的jQuery-each()方法詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框代碼實(shí)例
- jQuery ajax仿Google自動(dòng)提示SearchSuggess功能示例
- JQueryDOM之樣式操作
- 淺談JS和jQuery的區(qū)別
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
- jQuery添加新內(nèi)容的四個(gè)常用方法分析【append，prepend，after，before】
- 簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)程序
- 使用jquery的cookie實(shí)現(xiàn)登錄頁(yè)記住用戶名和密碼的方法
- Jquery的autocomplete插件用法及參數(shù)講解
- jQuery事件blur()方法的使用實(shí)例講解
相關(guān)文章
jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)功能實(shí)現(xiàn)
這篇文章主要介紹了jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)功能實(shí)現(xiàn)，實(shí)現(xiàn)的效果是九宮格大轉(zhuǎn)盤(pán)抽獎(jiǎng)，應(yīng)用特別廣泛的轉(zhuǎn)盤(pán)抽獎(jiǎng)方式，感興趣的小伙伴們可以參考一下2015-11-11
制作標(biāo)簽頁(yè)（通常說(shuō)成滑動(dòng)門(mén)）的實(shí)現(xiàn)思路是當(dāng)鼠標(biāo)在標(biāo)簽上時(shí)下面div會(huì)顯示和標(biāo)簽相對(duì)應(yīng)的內(nèi)容，隨著標(biāo)簽的改變，下面的div也會(huì)對(duì)應(yīng)改變內(nèi)容2010-05-05
Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法
下面小編就為大家?guī)?lái)一篇Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery頭像裁剪工具jcrop用法實(shí)例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實(shí)例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的動(dòng)態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題分析
這篇文章主要介紹了jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題,結(jié)合實(shí)例對(duì)比分析了jQuery的ajax調(diào)用中出現(xiàn)的時(shí)間差賦值問(wèn)題原因與解決方法,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了Jquery easyUI 更新行、更新指定的行,需要的朋友可以參考下2014-03-03
本篇文章給大家總結(jié)了關(guān)于jQuery代碼優(yōu)化方法，如果你這方面有需求，跟著小編一起學(xué)習(xí)下吧。2018-01-01
jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery使用hide方法隱藏指定元素class樣式用法實(shí)例
這篇文章主要介紹了jQuery使用hide方法隱藏指定元素class樣式,實(shí)例分析了jQuery中hide隱藏class樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03