Jquery의 세 가지 순회 방법
- 韦小宝원래의
- 2017-11-27 10:05:211954검색
Jquery의 세 가지 순회 방법은 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对象实现 修改表单中可修改的文本域的值 $('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>위는 각 DOM 쌍의 세 가지 탐색 방법에 대한 간략한 설명입니다. Jquery 및 코드 데모.
관련 권장 사항:
JQuery는 클릭 이벤트를 시뮬레이션하고 이벤트를 자동으로 트리거합니다.
위 내용은 Jquery의 세 가지 순회 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.