Heim > Artikel > Web-Frontend > Jeweils drei Durchlaufmethoden in Jquery
Jeweils drei Durchlaufmethoden in Jquery
- 韦小宝Original
- 2017-11-27 10:05:211884Durchsuche
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对象实现 修改表单中可修改的文本域的值 $('input[type=text]:enabled')" /><br>
<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $('input[type=text]:disabled')" /><br>
<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" /><br>
<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $('select option:selected')" /><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!