使 用 Jquery 全选+下拉+单选+事件+挂事件
先引用Jquery代码包
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引入JQUERY包--> <script src="../jquery-1.11.2.min.js"></script> <style type="text/css"> </style> <title>无标题文档</title> </head> <body>
1.全选
<select id="sel">
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
</select>
<input type="button" value="取下拉" id="b1" />
<script type="text/javascript">
$("#b1").click(function(){
alert($("#sel").val());
})
</script>
2.下拉菜单
<select id="sel">
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
</select>
<input type="button" value="取下拉" id="b1" />
<script type="text/javascript">
$("#b1").click(function(){
alert($("#sel").val());
})
</script>
3.单选
<input type="radio" value="01" class="rd" name="a"/>
<input type="radio" value="02" class="rd" name="a" />
<input type="radio" value="03" class="rd" name="a" />
<input type="radio" value="04" class="rd" name="a" />
<input type="radio" value="05" class="rd" name="a" />
<input type="button" value="取单选" id="b2" />
<script type="text/javascript">
$("#b2").click(function(){
var rd = $(".rd");
for(var i=0;i<rd.length;i++)
{
if(rd[i].checked)
{
alert(rd[i].value);
}
}
})
</script>
4.加事件
<style type="text/css">
.aaa{ width:150px; height:150px; background-color:#06F}
</style>
<body>
<div class="aaa">111111</div>
<div class="aaa">222222</div>
<div class="aaa">333333</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
$(".aaa").click(function(){
$(".aaa").css("background-color","#06f");
$(this).css("background-color","red");
})
});
</script>
5.挂事件
<input type="button" value="挂事件" id="btn" />
<input type="button" value="移除事件" id="btn1" />
<div id="a" style="width:100px; height:100px">cccc</div>
<script type="text/javascript">
$(document).ready(function(e) {
$("#btn").click(function(){
$("#a").bind("click",function(){
$("#a").css("background-color","red");
alert("事件");
})
})
$("#btn1").click(function(){
$("#a").unbind("click");
})
});
</script>
