<1>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
//将全部div下的全部li的html值设为"哈哈"，当点击的时候设为"我被点击了",其余没有点击的依旧设为“哈哈”
$(function () {
var ss = $("div li"); //获取div下的全部li元素
$.each(ss, function () { //遍历获取到的这些li元素
$(this).html("哈哈"); //将当前遍历到li元素的html()设为"哈哈"
$(this).click(function () { //给当前遍历到的li元素加入click事件
$("div li").html("哈哈"); //将div下是全部li的html()设为"哈哈"
$(this).html("我被点击了"); //将当前点击的li的html()设为"我被点击了";
})
});
})
</script>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<2>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//将input标签的button控件的value值设为"哈哈"。当点击这个button按钮的时候就将当前点击的按钮值设为"我被点击了",其它没被点击的仍然为"哈哈"
//Jquery写法
$(function () {
$.each($("input"), function () {
$(this).val("哈哈");
$(this).click(function () {
$("input").val("哈哈");
$(this).val("我被点击了");
})
})
})
//DOM写法
function fn() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value="哈哈";
inputs[i].onclick = btnClick;
}
}
function btnClick(e) {
var inputs=document.getElementsByTagName("input");
for(var i=0;i <inputs.length;i ++){
var obj = e.srcElement || e.target;
var name = inputs[i];
if(name==obj)
{
name.value = "我被点击了";
}
else
{
name.value = "哈哈";
}
}
}
</script>
</head>
<body onload="fn()">
<input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
</body>
</html>
<3>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var inputs = $("input"); //获得或有的input表单
$.each(inputs, function () { //遍历这些表单
$(this).val("广州").css("background", "red"); //将当前遍历到的input表单的val设为广州。颜色设为红色
$(this).click(function () { //给当前遍历到的input表单加入click事件
//给当前点击的input表单的val设为深圳，颜色设为黄色，给当前点击的input表单的兄弟的val设为广州。颜色设为红色
$(this).val("深圳").css("background", "yellow").siblings().val("广州").css("background", "red");
})
})
})
</script>
</head>
<body>
<input type="button"/>
<input type="button"/>
<input type="button"/>
<input type="button"/>
</body>
</html>
版权声明：本文博主原创文章，博客，未经同意不得转载。