Jquery のそれぞれの 3 つのトラバースメソッド-jsチュートリアル-php.cn

Jquery のそれぞれの 3 つのトラバースメソッド

韦小宝

リリース： 2017-11-27 10:05:21

オリジナル

1951 人が閲覧しました

Jqueryのそれぞれの3つのトラバースメソッドは、jqueryの便利な各メソッドを示します。jqueryに興味がある場合は、ブックマークしてチェックしてください。

1. セレクター + トラバーサル

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

i はインデックス値です

これは、各 DOM オブジェクトを取得して走査することを意味します

});

2.セレクター + トラバーサル

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

indexはインデックス値です

domEleは各domオブジェクトをトラバースするという意味です

});

3 、より応用可能な走査方法

1) まずコレクションオブジェクトを取得します

2) コレクションオブジェクトの各要素を走査します

var d=$("div");

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

d は走査するコレクションです

index はインデックス値です

domEle は各 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>

ログイン後にコピー

上記は、それぞれの 3 つの走査メソッドの簡単な説明です。 JQuery とコードのデモ。

jQuery を効率的に使用する方法

jQuery はタイトルプロンプト効果をシミュレートします

以上がJquery のそれぞれの 3 つのトラバースメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。