Js Jquery用法
jq需要引入一个sj文件,并且这个js文件是在所有的JS代码之前
<link rel="stylesheet" href="../CSS/css.css"> //先引CSS文件
<script type="text/javascript" src="../jq/jquery-3.2.1.min.js"></script> //在引JQ文件
<script type="text/javascript" src="../js/js.js"></script> //在引JS文件
找标签
js : document.getelement (); dom对象;
jq : $(选择器) jq对象;
操作内容
js : dom代表js对象
表单 :dom.value
非表单 dom.innerhtml
jq : $代表Jq对象
表单:$.val(); $.val( '修改后的值');
非表单:$.html; $.html('修改后的值');
操作属性
js:
dom,setAttribute(属性名,属性值)
dom.getAttribute(属性名)
jq:
$.attr(属性名,属性值)
$.attr(属性名)
事件
Jq页面加载完成:
$.onclick(function(){
});
Jq循环:
$(要循环的ID或者Class).each(function(){ each 是循环
$(this).
});
事例:
表格的正反选
<!--创建表单--> <table> <tr> <td><input type="checkbox" id="all" >全选</td> <td>单选</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td><input type="checkbox" class="more" ></td> <td>张三</td> <td>男</td> <td>23</td> </tr> <tr> <td><input type="checkbox" class="more" ></td> <td>李四</td> <td>男</td> <td>25</td> </tr> <tr> <td><input type="checkbox" class="more"></td> <td>王五</td> <td>女</td> <td>23</td> </tr> </table>
//页面加载完成 $(function(){ // 正反选 $('#all').click(function(){ //当全选框选中时 if($("#all").prop('checked')){ //if($('#all:checked')){ 不能得到选中,只得到 1 //循环给多选框选中 $('.more').each(function(){ $(this).prop('checked',true); }) }else{ //循环给多选框不选中 $('.more').each(function (){ $(this).prop('checked',false); }) } }); // 多选 $('.more').click(function(){ //定义标志 var $flag = true; //遍历多选框,找到未选中的元素,标志设为false $('.more').each(function (){ // 判断,当.more本身的checked值是false if($(this).prop('checked') == false){ // 则$flag是false $flag = false; // 返回值也是false(改变上面定义的$flag值) return false; } }); //如果more的值没有false,全选的值就是true $('#all').prop('checked',$flag); }) });
计算器(Jq input的使用)
$(function(){ $("#jsq").click(function(){ $("#input4").val(eval($("#input1").val()+$("#input3").val()+$("#input2").val())); }); });