12.jquery遍歷
阿新 • • 發佈：2022-04-18
<head>
<meta charset="UTF-8">
<title>6jquery遍歷</title>
</head>
<body>
<form id="form1">
<input type="button" value="修改">
<input type="button" value="取消">
<input type="button" value="返回">
</form>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="btn">
<input type="button" value="修改所有li的樣式">
<input type="button" value="修改所有li的樣式和內容">
</div>
<div id="show"></div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
/*修改所有li的樣式*/
$(".btn :button:eq(0)").on("click",function () {
$("ul li").css("color","red");
})
$(".btn :button:eq(1)").on("click",function () {
$("ul li").css("color","red").html("apple");
})
/*不迴圈繫結整個陣列*/
var $inputs = $("#form1 input");
$inputs.on("click",function () {
/*alert("想不到吧整個陣列");*/
$("#show").html("想不到吧，這樣也行:"+this.value);
})
/*each迴圈*/
/*var $inputs = $("input");
$inputs.each(function () {
/!*寫法1*!/
/!*this.onclick=function () {
}*!/
/!*寫法2*!/
/!*$(this).on("click",function () {
})*!/
var fn;
switch (this.value) {
case "修改":
fn = function () {
$("#show").html("修改");
}
break;
case "取消":
fn = function () {
$("#show").html("取消");
}
break;
case "返回":
fn = function () {
$("#show").html("返回");
}
break;
}
$(this).on("click",fn);
})*/
</script>