Jquery初步了解

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