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> 正反选HTML部分

 

//页面加载完成 $(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部分

　　　　计算器（Jq input的使用）

$(function(){ $("#jsq").click(function(){ $("#input4").val(eval($("#input1").val()+$("#input3").val()+$("#input2").val())); }); }); View Code

 

 

 

转载于:https://www.cnblogs.com/cp123/p/8870703.html