<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{ 100px; height:100px; background-color:#39F} </style> <title>无标题文档</title> </head> <body> <div id="a1" style="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>