事件切换
兼容性不好,jQuery1.8能用,jQuery1.11不能用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery_hover</title>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#divId").hover(
function(){
$("#divId").html("鼠标进入");
},
function(){
$("#divId").html("鼠标离开");
}
)
})
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" /><br>
<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery_toggle</title>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bId").toggle(
function(){
alert("1");
},
function(){
alert("2");
}
)
})
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" /><br>
<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
</body>
</html>省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
</script>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
//确定事件
$("[name='pro']").change(function(){
//通过省份下拉选中对应的选中的value值
var flag = $(this).val();
//通过省份的alue值,获取到对应的市
var cityArr = arr[flag];
//清空市的下拉选内容
$("[name='city']").html("<option>-请选择-</option>");
//遍历
$(cityArr).each(function(){
//把遍历后的城市,插入到城市的下拉选中
$("[name='city']").append("<option>"+this+"</option>");
})
})
});
</script>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007" /> 姓名:
<input name="username" value="xuduoduo" /><br> 密码:
<input type="password" name="password" value="123" disabled="disabled"><br> 性别:
<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br> 爱好:
<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br> 头像:
<input type="file" name="photo"><br> 籍贯:
<select name="pro">
<option>-请选择-</option>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">河南</option>
</select>
<select name="city">
<option>-请选择-</option>
</select>
<br> 自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存" />
<input type="reset" />
<input type="button" value="普通按钮" />
</form>
</body>
</html>左右选中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>左右选中</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<style>
input[type='button'] {
width: 50px;
}
</style>
<script type="text/javascript">
$(function(){
$("#toRight1").click(function(){
//获取左侧选中的第一个对象
$("#left option:selected:first").appendTo($("#right"));
});
$("#toRight2").click(function(){
//获取左侧选中的对象
$("#left option:selected").appendTo($("#right"));
});
$("#toRight3").click(function(){
//获取左侧所有的对象
$("#left option").appendTo($("#right"));
});
$("#toLeft1").click(function(){
//获取右侧选中的第一个对象
$("#right option:selected:first").appendTo($("#left"));
});
$("#toLeft2").click(function(){
//获取右侧选中的对象
$("#right option:selected").appendTo($("#left"));
});
$("#toLeft3").click(function(){
//获取右侧所有的对象
$("#right option").appendTo($("#left"));
});
})
</script>
</head>
<body>
<table>
<tr>
<td>
<!--
multiple:可以多选
size:显示下拉选的个数
-->
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
扫一扫
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
