recherche

Maison  >  Article  >  interface Web  >  Trois méthodes de parcours de chacun dans Jquery

Trois méthodes de parcours de chacun dans Jquery

韦小宝
韦小宝original
2017-11-27 10:05:211948parcourir


Les trois méthodes de parcours de chacune dans Jquery vous montreront l'utilité de chaque méthode de jquery, ce qui est très utile pour jquerySi vous êtes intéressé, vous pouvez l'enregistrer et y jeter un œil !

1. Sélecteur + parcours

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

i est la valeur de l'index

cela signifie obtenir et parcourir chaque objet DOM

});

2 Sélecteur + traversée

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

index est la valeur de l'index

domEle signifie obtenir et parcourir chaque objet dom

});

3. Une méthode de parcours plus applicable

1) Obtenez d'abord un objet de collection

2) Parcourez chaque élément de l'objet de collection

var d = $("div");

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

d est la collection à parcourir

index est la valeur de l'index

domEle signifie parcourir chaque paire de dom

});

<!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>

Ce qui précède est une brève description et une démonstration de code des trois méthodes de traversée de chacune dans Jquery.

Recommandations associées :

JQuery simule les événements de clic et déclenche automatiquement les événements

Comment utiliser jquery efficacement

jquery pour simuler l'effet d'invite de titre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：La différence entre attr() et prop() de jQueryArticle suivant：La différence entre attr() et prop() de jQuery

Articles Liés

Voir plus