<input type="checkbox" id="qx" /> 全选
<input type="checkbox" value="01" class="ck" />
<input type="checkbox" value="02" class="ck" />
<input type="checkbox" value="03" class="ck" />
<input type="checkbox" value="04" class="ck" />
<input type="checkbox" value="05" class="ck" />
<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" />
<select id="sel">
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
</select>
<input type="button" value="取选中" id="btn" />
<input type="button" value="取下拉" id="b1" />
<input type="button" value="取单选" id="b2" />
<script type="text/javascript">
//取复选框的选中值
$("#btn").click(function(){
var ck = $(".ck");
for(var i=0;i<ck.length;i++)
{
//判断选中
if(ck.eq(i).prop("checked"))
{
alert(ck.eq(i).val());
}
}
})
$("#b1").click(function(){
alert($("#sel").val());
})
$("#b2").click(function(){
alert($(".rd").val());
})
//全选
$("#qx").click(function(){
var xz = $(this).prop("checked");
$(".ck").prop("checked",xz)
})
//js或jquery里面有数据存储的方式
//名字叫JSON
/* var json = {
code:"n001",
name:"张三",
js:{c:"p001",n:"回族"}
};
//取值
alert(json["code"]);
*/
//去空格
/*var str = " hello ";
str = str.trim(); //重要
alert(str.length);
*/
</script>
<!--引入JQUERY包-->
<script src="../jquery-1.11.2.min.js"></script>
<style type="text/css">
#a1{
color:red;
}
.aa{ width:100px; height:100px; background-color:#39F}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="a1" style="width:100px; height:200px;">11</div>
<div class="aa" bs="1">aaaa</div>
<div class="aa" bs="2">bbbbb</div>
<div class="aa" bs="3">ccccc</div>
<div name="cc"></div>
<div bs="1"></div>
<input type="text" id="p1" />
<input type="button" id="b1" value="挂事件" />
<input type="button" id="b2" value="移除事件" />
<script type="text/javascript">
//JS
//根据ID取元素,取到的是具体的元素
//var a = document.getElementById("p1");
//根据CLASS取
//var a = document.getElementsByClassName("aa");
//根据标签名取
//var a = document.getElementsByTagName("div");
//根据name取
//var a = document.getElementsByName("cc");
//alert(a);
//操作元素
//操作内容
//非表单元素
//a.innerText = "hello";
//a.innerHTML = "<span style='color:red'>world</span>";
//表单元素
//a.value = "hello";
//操作属性
//a.setAttribute("bs","1");
//a.getAttribute("bs");
//a.removeAttribute("bs");
//操作样式
//a.style.color = red;
//三个DIV隐藏
/*var a = document.getElementsByClassName("aa");
for(var i=0;i<a.length;i++)
{
a[i].style.display = "none";
}*/
//事件
/**************************************************/
//Jquery
//根据ID找元素,取到的是JQUERY对象
//var b = $("#a1");
//根据CLASS取
//var b = $(".aa");
//根据标签名取
//var b = $("div");
//根据属性筛选
//var b = $("[name=aa]");
//操作元素
//操作内容
//非表单元素
//b.text();
//b.html();
//表单元素
//b.val();
//操作属性
//b.attr("bs","1");
//b.attr("bs");
//b.removeAttr("bs");
//操作样式
//alert(b.css("color"));
//b.css("font-size","50px");
//alert(b[0]); //取jquery对象用eq()取元素本身用[]
//隐藏三个元素
//$(".aa").css("display","none");
//Jquery【加】事件
//页面加载完成
$(document).ready(function(e) {
/*//给a1加点击
$("#a1").click(function(){
alert('aa');
})
//给class为aa的所有元素加事件
$(".aa").click(function(){
//alert($(this).attr("bs"));
$(".aa").css("background-color","#39F");
$(this).css("background-color","red");
})*/
//第二种方式【挂】事件
$("#b1").click(function(){
$("#a1").bind("click",function(){
alert("我是挂上的事件");
});
})
$("#b2").click(function(){
$("#a1").unbind("click");
})
});
</script>
浙公网安备 33010602011771号