5月13日 Jquery基础
Jquery的基础知识
<head> </head> <script src="../jquery-2.2.3.min.js"></script> <body> <div id="aa" style="">hello</div> <div class="bb">22</div> <div class="bb">33</div> <div class="bb">44</div> <input type="text" name="cc" bs="dd"/> </body> <script type="text/javascript"> $(document).ready(function(e){ //根据ID找元素，找到的是具体的JQUERY对象，如果要取DOM对象，则取索引0的对象 var jd = $("#aa");//根据ID var jc = $(".bb");//根据CLASS var jdiv = $("div");//根据标签名 var ip = $("input[name=cc]");//方括号里面用属性筛选 for(var i=o;i<jc.length;i++) { jc.ep(i);//ep是取数组里面的第几个JQUERY对象 } //操作内容 //1.非表单元素 jd.text();//取值方法,取内容 jd.text("aa");//赋值方法 jd.html();//取值方法,取代码 jd.html("vv");//赋值方法 //2.表单元素 jd.val();//取值 jd.val("")//赋值 //操作属性 jd.attr("bs","aa");//设置属性 jd.attr("bs");//获取属性 jd.removeAttr("bs");//移除属性 //操作样式 jd.css("background-color","green") //给一个元素加事件 $("#aa").click(function(){ alert("aa"); }); //给多个元素加事件 $(".bb").click(function(){ alert($(this).text()); }); //给多个元素设置相同的样式 $(".bb").css("color","brown"); }); </script>
Jquery的全选应用
<head> <script src="../jquery-2.2.3.min.js"> </script> </head> <body> <input type="checkbox" id="all"/>全选 <input class="t" type="checkbox" value="aa" />aa <input class="t" type="checkbox" value="bb" />bb <input class="t" type="checkbox" value="cc" />cc <input class="t" type="checkbox" value="dd" />dd <input class="t" type="checkbox" value="ee" />ee <input type="button" value="测试" id="btn" /> <input type="text" id="tex" /> <input type="button" value="设置选中" id="sel" /> </body> <script type="text/javascript"> $(document).ready(function(e) { //全选 $("#all").click(function(){ var ck = $(".t"); var xz = $(this)[0].checked; ck.prop("checked",xz); }); //取选中的值 $("btn").click(function(){ var ck = $(".t"); for(var i=0;i<ck.length;i++) { if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked { alert(ck.eq(i).val()); } } }); //设置某项选中 $("#sel").click(function(){ var v = $("#tex").val(); var ck = $(".t"); ck.prop("checked",false); for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==v) { ck.eq(i).prop("checked",true) } } }) });
