JQuery小结（转）

Posted 2020-09-18 行者

一、页面加载

• JQ的页面加载比JS要快，当整个dom树结构生成完毕后就会加载
• JQ页面加载不存在覆盖问题，加载的时候是顺序执行
• JQ的页面加载最简写的方式为：

• $(function(){
        alert("显示页面加载内容");
  })
  //对比JS的页面加载为：
  window.onload = function(){
        alert("显示页面加载内容");
  }

   

   

  二、JQ的获取

  <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
          <script>
              $(function(){
                  //1.JS方式获取
                  /*document.getElementById("btn").onclick= function(){
                      location.href="惊喜.html";
                  }*/
  
                  //2.JQ方式获取=====>>>$("#btn")
                  $("#btn").click(function(){
                      location.href="惊喜.html"
                  });
              });
          </script>

  三、DOM对象和HQ对象的转化

  • 注意JQ不能操作JS中的属性和方法，一样的DOM对象也无法操作JQ对象里面的属性和方法！！！
  • JQ的html()方法：取得第一个匹配元素的html内容。
  • JQ的html(val)方法：用于设定HTML内容的值，其中val是String类型

    //1.JS的DOM操作
    function write1(){
          document.getElementById("span1").innerHTML = "js的dom操作";
    }        
    //2.JQ的DOM操作
    $(function(){
          $("btn").click(function){
           //注意JQ不能操作JS中的属性和方法，例如 $("span1").innerHTML=""的写法是错的
                  $("span1").html("jq的dom操作")
          });
    })

     

  • JQ对象向DOM对象转化：使用jQuery 对象访问中的get()方法可以取得所有匹配的DOM元素集合，get(index)可以取得其中一个匹配的元素，即可调用JS中的属性方法。图中使用的是元素选择器，即可以通过角标获取多个

  • 
  • JQ对象向DOM对象转化

  • • 将DOM对象转换成JQ对象：直接把dom对象用$括起来

         var spanEle = document.getElementById("span1");
            //将DOM对象转换成JQ对象
            $(spanEle).html("DOM对象转换成JQ对象");

       

    • JQ效果中的方法可以实现淡入淡出，上下滑入滑出，使用toggle可以实现一个标签的显示和隐藏
      
      
      

      toggle实现标签的显示和隐藏

      四、JQ选择器

      • 基本选择器：
        id选择器：$(“#id名称”);
        元素选择器：$(“元素名称”);
        类选择器：$(“.类名”);
        通配符：*
        多个选择器共用(并集),在同一个括号中使用 空格隔开

      • 层级选择器：
        ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
        parent > child : 在给定的父元素下匹配所有的子元素(儿子)
        prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
        prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

        
        

        层级选择器

      • 基本过滤选择器：
        $(\'li\').first() 等价于：$(“li:first”)

        
        

        基本过滤选择器

      五、案例——使用JQ完成表格的隔行换色

      1. 需求分析
         在页面加载的时候让显示用户的表格进行隔行换色显示，效果如下：使用JQ实现！
      2. 技术分析
         需要使用jquery的选择器(基本选择器、基本过滤选择器)
         还需要使用jquery的CSS的方法(css(name,value))
         如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作
         css类：addClass(class | fn)
      3. 步骤分析
         第一步：引入jquery的类库
         第二步：直接写页面加载函数
         第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
         第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
      4. 代码实现

         <script type = "text/javascript" src = "../js/jquery-1.8.3.js"></script>
         <link rel = "styylesheet" type = "text/css" href = "../css/style.css">
         <script>
              $(function(){
                      //获取tbody标签中的偶数行
                      $("tbody tr:even").addClass("even");
                      //获取tbody标签中的奇数行
                      $("tbody tr:odd").addClass("odd);
              })
         </script>

         六、案例——使用JQ完成全选和全不选

         1. 需求分析
            在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选

            
            

            全选需求分析.png

         2. 技术分析
            需要使用jquery的选择器(id选择器、类选择器)
            需要使用jquery的属性操作方法 attr()或者prop()

         3. 步骤分析
            第一步：引入jquery文件
            第二步：书写页面加载函数
            第三步：为上面的复选框绑定单击事件
            第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

         4. 代码实现

            <script type = "text/javascript" src = "../js/jquery-1.8.3.js"></script>
            <script>
                 $(function(){
                         //找到下面所有的复选框并设置属性checked()
                         $("#select").click(function(){
                                 //attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)
                                 //使用选择框中input标签已有的类 class="selectOne"
                                 $(".selectOne").attr("checked",this.checked);
                                 //使用选择框中input标签，不使用其他类属性
                                 $("tbody input").prop("checked",this.checked);
                                 //使用this.checked使选择框中是否选中状态与表头 id="select" 的选择框选择状态相同，如果
                         });
                 });
            </script>

            七、数组的遍历操作

            • 方式一：
              1. jQuery对象访问方式中的 each(callback)
                 
                 
                 

                 each(callback)
              2. 全选/全不选案例示例代码

                 $(function(){
                    $("#checkallbox").click(function){
                            var isChecked = this.checked;
                            //使用对象访问的方式进行遍历，语法：$().each(function(){})
                            $("input[name = \'hobby\']").each(function(){
                                      this.checked = isChecked;
                            });
                    });
                 });

                  

            • 方式二：
              1. 数组和对象操作中的 $.each(object,[callback])
                 
                 
                 

                 $.each(object,[callback])
              2. object为被遍历的对象或数组，即如下示例代码中的[0,1,2]，其中i为角标，n为被遍历后的内容

                   $.each( [0,1,2] , function(i , n ){
                            alert( "Item #" + i + ": " + n );
                    });

                  

            八、文档处理操作

            • 追加内容
              apend: A.append(B) 将B追加到A的内容的末尾处
              appendTo: A.appendTo(B) 将A加到B内容的末尾处

            • 删除内容
              empty: 删除匹配元素集合中的所有的子节点。
              remove: 从DOM中删除所有匹配的元素

              
              

              remove

            • 案例——省市联动

              <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
                    <script>
                        $(function(){
                            //2.创建二维数组用于存储省份和城市
                            var cities = new Array(3);
                            cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                            cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                            cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                            cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
              
                            $("#province").change(function(){
                                //10.清除第二个下拉列表的内容
                                $("#city").empty();
              
                                //1.获取用户选择的省份
                                var val = this.value;
                                //alert(val);
                                //3.遍历二维数组中的省份
                                $.each(cities,function(i,n){
                                    //alert(i+":"+n);
                                    //4.判断用户选择的省份和遍历的省份
                                    if(val==i){
                                        //5.遍历该省份下的所有城市
                                        $.each(cities[i], function(j,m) {
                                            //alert(m);
                                            //6.创建城市文本节点
                                            var textNode = document.createTextNode(m);
                                            //7.创建option元素节点
                                            var opEle = document.createElement("option");
                                            //8.将城市文本节点添加到option元素节点中去
                                            $(opEle).append(textNode);
                                            //9.将option元素节点追加到第二个下拉列表中去
                                            $(opEle).appendTo($("#city"));
                                        });
                                    }
                                });
              
                            });
                        });
                    </script>

               

            九、jQuery事件(常用)

            • 事件绑定

              1. 案例——单击显示/关闭新内容：使用绑定事件 bind(type,[data],fn)，如下代码中
                 bind 绑定单击事件 "click"，绑定的事件内容是 function(){}。（注意代码中的方法可以等效为JQ事件切换中的toggle()）

                 
                 

                 绑定事件 bind(type,[data],fn)

              2. 案例——鼠标滑过内容变换:（注意代码中的方法可以等效为JQ事件切换中的hover()）

                 
                 

                 Paste_Image.png

            十、JQ的validation插件完成对表单数据的校验优化

            • 特点：
              内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
              自定义验证规则：可以很方便的自定义验证规则
            • 调用语法：$("表单id").validate({});
            • rules 规则语法：

                    rules:{
                            字段名:校验器，
                            字段名:校验器
                    }

            • 校验器语法：

                   语法：{校验器:值，校验器:值}

            • message 提示语法：

                    message:{
                            字段名:{校验器:"提示", 校验器:"提示",....}
                    }

              
              

              validation插件的使用示例代码