suchen

Heim >Web-Frontend >js-Tutorial >Jeweils drei Durchlaufmethoden in Jquery

Jeweils drei Durchlaufmethoden in Jquery

韦小宝
韦小宝Original
2017-11-27 10:05:211984Durchsuche


Die drei Durchlaufmethoden von jedem in Jquery zeigen Ihnen die nützlichen Methoden von jquery, die für sehr nützlich sind jqueryWenn Sie interessiert sind, können Sie es speichern und einen Blick darauf werfen!

1. Selektor + Traversal

$('div').each(function (i){

i ist der Indexwert

das bedeutet, jedes DOM-Objekt abzurufen und zu durchlaufen

});

2. Selektor + Traversal

$('div' ) .each(function (index,domEle){

index ist der Indexwert

domEle bedeutet, jedes Dom-Objekt abzurufen und zu durchlaufen

});

3. Eine anwendbarere Traversierungsmethode

1) Erhalten Sie zuerst ein Sammlungsobjekt

2) Durchlaufen Sie jedes Element des Sammlungsobjekts

var d = $("div");

$.each(d,function (index,domEle){

d ist die zu durchlaufende Sammlung

index ist der Indexwert

domEle bedeutet, jedes Dom-Paar zu durchlaufen

});

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>属性选择器学习</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
$("#btn0").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});

$("#btn1").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});

$("#btn2").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
});

$("#btn3").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("select option:selected").each(function(index,domEle){
//domEle.value="xxxxx";
alert($(domEle).text());
});
});
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" value="可见元素1" />
<input type="text" value="不可见元素1" disabled="disabled" />
<input type="text" value="可见元素2" />
<input type="text" value="不可见元素2" disabled="disabled" /><br>
<input type="checkbox" value="美女" />美女
<input type="checkbox" value="美男" />美男
<input type="checkbox" value="大爷" />大爷
<input type="checkbox" value="大妈" />大妈
<br>
<input type="radio" value="男" />男
<input type="radio" value="女" />女
<br>
<select id="zhiwei" size="5" multiple="multiple">
<option>php开发工程师</option>
<option>数据库管理员</option>
<option>系统分析师</option>
<option>保安</option>
</select>
<select id="xueli">
<option>大专</option>
<option>中专</option>
<option>小学</option>
</select>
</form>
<div style="clear:both;">
<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可修改的文本域的值 $(&#39;input[type=text]:enabled&#39;)" /><br>
<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $(&#39;input[type=text]:disabled&#39;)" /><br>
<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $(&#39;input[type=checkbox]:checked&#39;)" /><br>
<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $(&#39;select option:selected&#39;)" /><br>
</div>
</body>
</html>

Das Obige ist eine kurze Beschreibung und Codedemonstration der drei Traversierungsmethoden jedes einzelnen in Jquery.

Verwandte Empfehlungen:

JQuery simuliert Klickereignisse und löst automatisch Ereignisse aus

So nutzen Sie jquery effizient

jquery zur Simulation des Titel-Prompt-Effekts

Das obige ist der detaillierte Inhalt vonJeweils drei Durchlaufmethoden in Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der Unterschied zwischen attr() und prop() von jQueryNächster Artikel：Der Unterschied zwischen attr() und prop() von jQuery

In Verbindung stehende Artikel

Mehr sehen