jQuery

该文档是:jQuery简单学习

博客连接:https://www.loveuluo.cn

日期:2020-12-02

1. jQuery介绍

什么是 jQuery ?
​ jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库。

jQuery 核心思想!!!
​ 它的核心思想是 write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。

jQuery 流行程度
​ jQuery 现在已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55%在使用
jQuery。

jQuery 好处 !!!
​ jQuery 是免费、开源的,jQuery 的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、
制作动画效果、事件处理、使用 Ajax 以及其他功能

2. jQuery和JS代码对比

需求:使用 jQuery 给一个按钮绑定单击事件

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> //引入jquery文件
    <script type="text/javascript">
        // window.onload = function () {
        // var btnObj = document.getElementById("btnId");
        // // alert(btnObj);//[object HTMLButtonElement] ====>>> dom 对象
        // btnObj.onclick = function () {
        // alert("js 原生的单击事件 ");
        // }
        // }
        $(function () { // 表示页面加载完成 之后,相当 window.onload = function () {}
            var $btnObj = $("#btnId"); // 表示按 id 查询标签对象
            $btnObj.click(function () { // 绑定单击事件
                alert("jQuery  的单击事件");
            });
        });
    </script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>

image-20201202105133833

3. jQuery核心函数

$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。$()就是调用$这个函数。

1、传入参数为 [ 函数 ] 时:
表示页面加载完成之后。相当于 window.onload = function(){}

image-20201202110715023

2、传入参数为 [ HTML 字符串 ] 时:
会对我们创建这个 html 标签对象

可以直接在body中创建这些标签,比js方便许多。

image-20201202110237144

3、传入参数为 [ 选择器字符串 ] 时:
$(“#id 属性值”); id 选择器,根据 id 查询标签对象
$(“标签名”); 标签名选择器,根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器,可以根据 class 属性查询标签对象

4、传入参数为 [ DOM 对象 ] 时:
会把这个 dom 对象转换为 jQuery 对象

image-20201202110609417

4. 区分jQuery对象和DOM对象

4.1 什么是 jQuery 对象,什么是 DOM 对象

Dom 对象:
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象,是 Dom 对象

​ DOM 对象 Alert 出来的效果是: [object HTML 标签名 Element]

jQuery 对象:
5.通过 JQuery 提供的 API 创建的对象,是 JQuery 对象
6.通过 JQuery 包装的 Dom 对象,也是 JQuery 对象
7.通过 JQuery 提供的 API 查询到的对象,是 JQuery 对象

​ jQuery 对象 Alert 出来的效果是:[object Object]

4.2 jQuery对象的本质

Jquery对象本质“可以看成”是一个包含一个 dom数组和所有Jquery方法的容器(补充:方法在所有jq对象共享的jq原型属性prototype中,jq对象本质是一个“类数组”)。

4.3 jQuery 对象和 Dom 对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法。
DOM 对象也不能使用 jQuery 对象的属性和方法。

4.4 Dom 对象和 jQuery 对象互转(重要)

1.dom 对象转化为 jQuery 对象
1.1 先有 DOM 对象
1.2 $( DOM 对象 ) 就可以转换成为 jQuery 对象

2.jQuery 对象转为 dom 对象
2.1 先有 jQuery 对象
2.2 jQuery 对象[下标]取出相应的 DOM 对象

5. jQuery 选择器(非常重要)

5.1 基本选择器

#ID 选择器:根据 id 查找标签对象
.class 选择器:根据 class 查找标签对象
element 选择器:根据标签名查找标签对象

选择器:表示任意的,所有的元素
selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回

image-20201202143255577

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }      
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         div.hide {
             display: none;
         }
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         
            $(function () {
               //1.选择 id 为 one 的元素 "background-color","#bbffaa"
               $("#btn1").click(function () {
                  // css() 方法 可以设置和获取样式
                  $("#one").css("background-color","#bbffaa");
               });


               //2.选择 class 为 mini 的所有元素
               $("#btn2").click(function () {
                  $(".mini").css("background-color","#bbffaa");
               });

               //3.选择 元素名是 div 的所有元素
               $("#btn3").click(function () {
                  $("div").css("background-color","#bbffaa");
               });

               //4.选择所有的元素
               $("#btn4").click(function () {
                  $("*").css("background-color","#bbffaa");
               });

               //5.选择所有的 span 元素和id为two的元素
               $("#btn5").click(function () {
                  $("span,#two").css("background-color","#bbffaa");
               });

            });

      </script>
   </head>
   <body>
<!--   <div>
      <h1>基本选择器</h1>
   </div>  -->   
      <input type="button" value="选择 id 为 one 的元素" id="btn1" />
      <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
      <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
      <input type="button" value="选择 所有的元素" id="btn4" />
      <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
      
      <br>
      <div class="one" id="one">
         id 为 one,class 为 one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span class="one" id="span">^^span元素^^</span>
   </body>

5.2 层级选择器

ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器:在给定的父元素下匹配所有的子元素
prev + next 相 邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

image-20201202144621063

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   <style type="text/css">
      div, span, p {
          width: 140px;
          height: 140px;
          margin: 5px;
          background: #aaa;
          border: #000 1px solid;
          float: left;
          font-size: 17px;
          font-family: Verdana;
      } 
      div.mini {
          width: 55px;
          height: 55px;
          background-color: #aaa;
          font-size: 12px;
      } 
      div.hide {
          display: none;
      }        
   </style>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){ //这是$(function() {});的全写
         //1.选择 body 内的所有 div 元素
         $("#btn1").click(function(){
            $("body div").css("background", "#bbffaa");
         });

         //2.在 body 内, 选择div子元素  
         $("#btn2").click(function(){
            $("body > div").css("background", "#bbffaa");
         });

         //3.选择 id 为 one 的下一个 div 元素 
         $("#btn3").click(function(){
            $("#one+div").css("background", "#bbffaa");
         });

         //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
         $("#btn4").click(function(){
            $("#two~div").css("background", "#bbffaa");
         });
      });
   </script>
</head>
<body>
   <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
   <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
   <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
   <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
   <br><br>
   <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display:none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
   </div>
   <span id="span">^^span元素^^</span>
</body>

5.3 过滤选择器

5.3.1 基本过滤器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素,从 0 开始计数
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

image-20201202151922799

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   <style type="text/css">
      div, span, p {
          width: 140px;
          height: 140px;
          margin: 5px;
          background: #aaa;
          border: #000 1px solid;
          float: left;
          font-size: 17px;
          font-family: Verdana;
      }
      
      div.mini {
          width: 55px;
          height: 55px;
          background-color: #aaa;
          font-size: 12px;
      }
      
      div.hide {
          display: none;
      }        
   </style>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         function anmateIt(){
            $("#mover").slideToggle("slow", anmateIt);
         }
         anmateIt();
      });
      
      $(document).ready(function(){
         //1.选择第一个 div 元素  
         $("#btn1").click(function(){
            $("div:first").css("background", "#bbffaa");
         });

         //2.选择最后一个 div 元素
         $("#btn2").click(function(){
            $("div:last").css("background", "#bbffaa");
         });

         //3.选择class不为 one 的所有 div 元素
         $("#btn3").click(function(){
            $("div:not(.one)").css("background", "#bbffaa");
         });

         //4.选择索引值为偶数的 div 元素
         $("#btn4").click(function(){
            $("div:even").css("background", "#bbffaa");
         });

         //5.选择索引值为奇数的 div 元素
         $("#btn5").click(function(){
            $("div:odd").css("background", "#bbffaa");
         });

         //6.选择索引值为大于 3 的 div 元素
         $("#btn6").click(function(){
            $("div:gt(3)").css("background", "#bbffaa");
         });

         //7.选择索引值为等于 3 的 div 元素
         $("#btn7").click(function(){
            $("div:eq(3)").css("background", "#bbffaa");
         });

         //8.选择索引值为小于 3 的 div 元素
         $("#btn8").click(function(){
            $("div:lt(3)").css("background", "#bbffaa");
         });

         //9.选择所有的标题元素
         $("#btn9").click(function(){
            $(":header").css("background", "#bbffaa");
         });

         //10.选择当前正在执行动画的所有元素
         $("#btn10").click(function(){
            $(":animated").css("background", "#bbffaa");
         });
         //11.选择没有执行动画的最后一个div
         $("#btn11").click(function(){
            $("div:not(:animated):last").css("background", "#bbffaa");
         });
      });
   </script>
</head>
<body>
   <input type="button" value="选择第一个 div 元素" id="btn1" />
   <input type="button" value="选择最后一个 div 元素" id="btn2" />
   <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
   <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
   <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
   <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
   <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
   <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
   <input type="button" value="选择所有的标题元素" id="btn9" />
   <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />    
   <input type="button" value="选择没有执行动画的最后一个div" id="btn11" />


   <h3>基本选择器.</h3>
   <br><br>
   <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display:none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
   </div>
   <div id="mover">正在执行动画的div元素.</div>
</body>

5.3.2 内容过滤器:

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

image-20201202152547750

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   <style type="text/css">
      div, span, p {
          width: 140px;
          height: 140px;
          margin: 5px;
          background: #aaa;
          border: #000 1px solid;
          float: left;
          font-size: 17px;
          font-family: Verdana;
      }
      
      div.mini {
          width: 55px;
          height: 55px;
          background-color: #aaa;
          font-size: 12px;
      }
      
      div.hide {
          display: none;
      }        
   </style>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         function anmateIt(){
            $("#mover").slideToggle("slow", anmateIt);
         }

         anmateIt();             
      });
      
      /** 
      :contains(text)   
      :empty             
      :has(selector)     
      :parent          
      */
      $(document).ready(function(){
         //1.选择 含有文本 'di' 的 div 元素
         $("#btn1").click(function(){
            $("div:contains('di')").css("background", "#bbffaa");
         });

         //2.选择不包含子元素(或者文本元素) 的 div 空元素
         $("#btn2").click(function(){
            $("div:empty").css("background", "#bbffaa");
         });

         //3.选择含有 class 为 mini 元素的 div 元素
         $("#btn3").click(function(){
            $("div:has(.mini)").css("background", "#bbffaa");
         });

         //4.选择含有子元素(或者文本元素)的div元素
         $("#btn4").click(function(){
            $("div:parent").css("background", "#bbffaa");
         });
      });
   </script>
</head>
<body>    
   <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
   <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
   <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
   <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
   
   <br><br>
   <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display:none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
   </div>
   <div id="mover">正在执行动画的div元素.</div>
</body>

5.3.3 属性过滤器:

[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。

image-20201202153615706

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {
   width: 140px;
   height: 140px;
   margin: 5px;
   background: #aaa;
   border: #000 1px solid;
   float: left;
   font-size: 17px;
   font-family: Verdana;
}

div.mini {
   width: 55px;
   height: 55px;
   background-color: #aaa;
   font-size: 12px;
}

div.hide {
   display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   /**
[attribute]          
[attribute=value]     
[attribute!=value]         
[attribute^=value]        
[attribute$=value]        
[attribute*=value]        
[attrSel1][attrSel2][attrSelN]
   */
   
   $(function() {
      //1.选取含有 属性title 的div元素
      $("#btn1").click(function() {
         $("div[title]").css("background", "#bbffaa");
      });
      //2.选取 属性title值等于'test'的div元素
      $("#btn2").click(function() {
         $("div[title='test']").css("background", "#bbffaa");
      });
      //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
      $("#btn3").click(function() {
         $("div[title!='test']").css("background", "#bbffaa");
      });
      //4.选取 属性title值 以'te'开始 的div元素
      $("#btn4").click(function() {
         $("div[title^='te']").css("background", "#bbffaa");
      });
      //5.选取 属性title值 以'est'结束 的div元素
      $("#btn5").click(function() {
         $("div[title$='est']").css("background", "#bbffaa");
      });
      //6.选取 属性title值 含有'es'的div元素
      $("#btn6").click(function() {
         $("div[title*='es']").css("background", "#bbffaa");
      });
      
      //7.首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素
      $("#btn7").click(function() {
         $("div[id][title*='es']").css("background", "#bbffaa");
      });
      //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
      $("#btn8").click(function() {
         $("div[title][title!='test']").css("background", "#bbffaa");
      });
   });
</script>
</head>
<body>
   <input type="button" value="选取含有 属性title 的div元素." id="btn1" style="display: none;"/>
   <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
   <input type="button"
      value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
   <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
   <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
   <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
   <input type="button"
      value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素."
      id="btn7" />
   <input type="button"
      value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />

   <br>
   <br>
   <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display: none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
      包含input的type为"hidden"的div<input type="hidden" value="123456789"
         size="8">
   </div>
   <div id="mover">正在执行动画的div元素.</div>
</body>

5.3.4 可见性过滤选择器:

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   <style type="text/css">
      div, span, p {
          width: 140px;
          height: 140px;
          margin: 5px;
          background: #aaa;
          border: #000 1px solid;
          float: left;
          font-size: 17px;
          font-family: Verdana;
      }
      
      div.mini {
          width: 55px;
          height: 55px;
          background-color: #aaa;
          font-size: 12px;
      }
      
      div.hide {
          display: none;
      }        
   </style>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         function anmateIt(){
            $("#mover").slideToggle("slow", anmateIt);
         }

         anmateIt();    
      });
      /**
         :hidden   
         :visible  
      */
      $(document).ready(function(){
         //1.选取所有可见的  div 元素
         $("#btn1").click(function(){
            $().css("background", "#bbffaa");
         });

         //2.选择所有不可见的 div 元素
         //不可见:display属性设置为none,或visible设置为hidden
         $("#btn2").click(function(){
            $().show("slow").css("background", "#bbffaa");
         });

         //3.选择所有不可见的 input 元素
         $("#btn3").click(function(){
            alert($().attr("value"));
         });    
      });
   </script>
</head>
<body>    
   <input type="button" value="选取所有可见的  div 元素" id="btn1">
   <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
   <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
   
   <br>
   <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display:none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
      包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
   </div>
   <div id="mover">正在执行动画的div元素.</div>
</body>

5.3.5 表单过滤选择器:

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button <button>按钮
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden

image-20201202162805056

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(function(){
   /**
   :input        
   :text     
   :password  
   :radio        
   :checkbox  
   :submit    
   :image        
   :reset        
   :button    
   :file     
   :hidden
   表单对象的属性
   :enabled      
   :disabled     
   :checked      
   :selected     
   */
         //1.对表单内 可用input 赋值操作
         $("#btn1").click(function(){
            // val()可以操作表单项的value属性值
            // 它可以设置和获取
            $(":text:enabled").val("我是万能的程序员");
         });
         //2.对表单内 不可用input 赋值操作
         $("#btn2").click(function(){
            $(":text:disabled").val("管你可用不可用,反正我是万能的程序员");
         });
         //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
         $("#btn3").click(function(){
            alert( $(":checkbox:checked").length );
         });
         //4.获取多选框,每个选中的value值
         $("#btn4").click(function(){
            // 获取全部选中的复选框标签对象
            var $checkboies = $(":checkbox:checked");
            // 老式遍历
            // for (var i = 0; i < $checkboies.length; i++){
            //     alert( $checkboies[i].value );
            // }

            // each方法是jQuery对象提供用来遍历元素的方法
            // 在遍历的function函数中,有一个this对象,这个this对象,就是当前遍历到的dom对象
            $checkboies.each(function () {
               alert( this.value );
            });
            
         });
         //5.获取下拉框选中的内容  
         $("#btn5").click(function(){
            // 获取选中的option标签对象
            var $options = $("select option:selected");
            // 遍历,获取option标签中的文本内容
            $options.each(function () {
               // 在each遍历的function函数中,有一个this对象。这个this对象是当前正在遍历到的dom对象
               alert(this.innerHTML);
            });
         });
      }) 
   </script>
</head>
<body>
   <h3>表单对象属性过滤选择器</h3>
    <button id="btn1">对表单内 可用input 赋值操作.</button>
       <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
    <button id="btn3">获取多选框选中的个数.</button>
    <button id="btn4">获取多选框选中的内容.</button><br /><br />
        <button id="btn5">获取下拉框选中的内容.</button><br /><br />
    
   <form id="form1" action="#">         
      可用元素: <input name="add" value="可用文本框1"/><br>
      不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
      可用元素: <input name="che" value="可用文本框2"/><br>
      不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
      <br>
      
      多选框: <br>
      <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
      <input type="checkbox" name="newsletter" value="test2" />test2
      <input type="checkbox" name="newsletter" value="test3" />test3
      <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
      <input type="checkbox" name="newsletter" value="test5" />test5
      
      <br><br>
      下拉列表1: <br>
      <select name="test" multiple="multiple" style="height: 100px" id="sele1">
         <option>浙江</option>
         <option selected="selected">辽宁</option>
         <option>北京</option>
         <option selected="selected">天津</option>
         <option>广州</option>
         <option>湖北</option>
      </select>
      
      <br><br>
      下拉列表2: <br>
      <select name="test2">
         <option>浙江</option>
         <option>辽宁</option>
         <option selected="selected">北京</option>
         <option>天津</option>
         <option>广州</option>
         <option>湖北</option>
      </select>
   </form>       
</body>

6. jQuery元素筛选

eq() 获取给定索引的元素 功能跟 :eq() 一样
first() 获取第一个元素 功能跟 :first 一样
last() 获取最后一个元素 功能跟 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回,true
has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
not(exp) 删除匹配选择器的元素 功能跟 :not 一样
children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样
find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

image-20201202164742808

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>DOM查询</title>
   <style type="text/css">
      div, span, p {
          width: 140px;
          height: 140px;
          margin: 5px;
          background: #aaa;
          border: #000 1px solid;
          float: left;
          font-size: 17px;
          font-family: Verdana;
      }
      div.mini {
          width: 55px;
          height: 55px;
          background-color: #aaa;
          font-size: 12px;
      }
      div.hide {
          display: none;
      }        
   </style>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         function anmateIt(){
            $("#mover").slideToggle("slow", anmateIt);
         }
         anmateIt();
/**        
过滤
eq(index|-index)         
first()                
last()                    
hasClass(class)          
filter(expr|obj|ele|fn)    
is(expr|obj|ele|fn)1.6*    
has(expr|ele)           
not(expr|ele|fn)         
slice(start,[end])           

查找
children([expr])         
closest(expr,[con]|obj|ele)1.6*   
find(expr|obj|ele)              
next([expr])               
nextall([expr])             
nextUntil([exp|ele][,fil])1.6*     
parent([expr])                 
parents([expr])             
parentsUntil([exp|ele][,fil])1.6*  
prev([expr])               
prevall([expr])             
prevUntil([exp|ele][,fil])1.6*     
siblings([expr])            

串联
add(expr|ele|html|obj[,con])
*/
         
         //(1)eq()  选择索引值为等于 3 的 div 元素
         $("#btn1").click(function(){
            $("div").eq(3).css("background-color","#bfa");
         });
         //(2)first()选择第一个 div 元素
          $("#btn2").click(function(){
             //first()   选取第一个元素
            $("div").first().css("background-color","#bfa");
         });
         //(3)last()选择最后一个 div 元素
         $("#btn3").click(function(){
            //last()  选取最后一个元素
            $("div").last().css("background-color","#bfa");
         });
         //(4)filter()在div中选择索引为偶数的
         $("#btn4").click(function(){
            //filter()  过滤   传入的是选择器字符串
            $("div").filter(":even").css("background-color","#bfa");
         });
          //(5)is()判断#one是否为:empty或:parent
         //is用来检测jq对象是否符合指定的选择器
         $("#btn5").click(function(){
            alert( $("#one").is(":empty") );
         });
         
         //(6)has()选择div中包含.mini的
         $("#btn6").click(function(){
            //has(selector)  选择器字符串    是否包含selector
            $("div").has(".mini").css("background-color","#bfa");
         });
         //(7)not()选择div中class不为one的
         $("#btn7").click(function(){
            //not(selector)  选择不是selector的元素
            $("div").not('.one').css("background-color","#bfa");
         });
         //(8)children()在body中选择所有class为one的div子元素
         $("#btn8").click(function(){
            //children()  选出所有的子元素
            $("body").children("div.one").css("background-color","#bfa");
         });
         
         
         //(9)find()在body中选择所有class为mini的div元素
         $("#btn9").click(function(){
            //find()  选出所有的后代元素
            $("body").find("div.mini").css("background-color","#bfa");
         });
         //(10)next() #one的下一个div
         $("#btn10").click(function(){
            //next()  选择下一个兄弟元素
            $("#one").next("div").css("background-color","#bfa");
         });
         //(11)nextAll() #one后面所有的span元素
         $("#btn11").click(function(){
            //nextAll()   选出后面所有的元素
            $("#one").nextAll("span").css("background-color","#bfa");
         });
         //(12)nextUntil() #one和span之间的元素
         $("#btn12").click(function(){
            //
            $("#one").nextUntil("span").css("background-color","#bfa")
         });
         //(13)parent() .mini的父元素
         $("#btn13").click(function(){
            $(".mini").parent().css("background-color","#bfa");
         });
         //(14)prev() #two的上一个div
         $("#btn14").click(function(){
            //prev()  
            $("#two").prev("div").css("background-color","#bfa")
         });
         //(15)prevAll() span前面所有的div
         $("#btn15").click(function(){
            //prevAll()   选出前面所有的元素
            $("span").prevAll("div").css("background-color","#bfa")
         });
         //(16)prevUntil() span向前直到#one的元素
         $("#btn16").click(function(){
            //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
            $("span").prevUntil("#one").css("background-color","#bfa")
         });
         //(17)siblings() #two的所有兄弟元素
         $("#btn17").click(function(){
            //siblings()    找到所有的兄弟元素,包括前面的和后面的
            $("#two").siblings().css("background-color","#bfa")
         });
         
         
         //(18)add()选择所有的 span 元素和id为two的元素
         $("#btn18").click(function(){

            //   $("span,#two,.mini,#one")
            $("span").add("#two").add("#one").css("background-color","#bfa");
         });
      });
   </script>
</head>
<body>    
   <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
   <input type="button" value="first()选择第一个 div 元素" id="btn2" />
   <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
   <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
   <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
   <input type="button" value="has()选择div中包含.mini的" id="btn6" />
   <input type="button" value="not()选择div中class不为one的" id="btn7" />
   <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
   <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
   <input type="button" value="next()#one的下一个div" id="btn10" />
   <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
   <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
   <input type="button" value="parent().mini的父元素" id="btn13" />
   <input type="button" value="prev()#two的上一个div" id="btn14" />
   <input type="button" value="prevAll()span前面所有的div" id="btn15" />
   <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
   <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
   <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
   
   <h3>基本选择器.</h3>
   <br /><br />
   文本框<input type="text" name="account" disabled="disabled" />
   <br><br>
   <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other"><b>class为mini,title为other</b></div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display:none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <span id="span1">^^span元素 111^^</span>
   <div>
      包含input的type为"hidden"的div<input type="hidden" size="8">
   </div>
   <span id="span2">^^span元素 222^^</span>
   <div id="mover">正在执行动画的div元素.</div>
</body>

7. jQuery的属性操作

image-20201202165137873

这三个的功能测试:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //不传参数,是获取,传递参数是设置
            alert( $("div").html() );// 获取
            $("div").html("<h1>我是div中的标题 1</h1>");// 设置

            //不传参数,是获取,传递参数是设置
            alert( $("div").text() ); // 获取
            $("div").text("<h1>我是div中的标题 1</h1>"); // 设置

            //不传参数,是获取,传递参数是设置
            $("button").click(function () {
                alert($("#username").val());//获取
                $("#username").val("超级程序猿");// 设置
            });
        });
    </script>
</head>
<body>
    <div>我是div标签 <span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>
</body>

val 方法同时设置多个表单项的选中状态:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
/*
            // 批量操作单选
            $(":radio").val(["radio2"]);
            // 批量操作筛选框的选中状态
            $(":checkbox").val(["checkbox3","checkbox2"]);
            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);
            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);
*/
            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
        });
    </script>
</head>
<body>
    单选:
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选:
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>
    下拉多选 :
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>
    下拉单选 :
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>

attr() 可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等等

                attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj

prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

这两个的功能测试:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            attr
            alert( $(":checkbox:first").attr("name") ); // 获取
            $(":checkbox:first").attr("name","abc") ; // 设置

            $(":checkbox").prop("checked",false );// 官方觉得返回undefined是一个错误

            $(":checkbox:first").attr("abc","abcValue");
            alert( $(":checkbox:first").attr("abc") );
        });
    </script>
</head>
<body>
    <br/>
    多选:
    <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <br/><br/>
    <div>1234</div>
    <div>1234</div>
</body>

8. DOM 的增删改

内部插入:
appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾,成为最后一个子元素
prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面,成为第一个子元素

外部插入:
insertAfter() a.insertAfter(b) 得到 ba
insertBefore() a.insertBefore(b) 得到 ab

替换:
replaceWith() a.replaceWith(b) 用 b 替换掉 a
replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
删除:

remove() a.remove(); 删除 a 标签
empty() a.empty() ; 清空 a 标签里的内容

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("<h1>标题</h1>").prependTo( $("div") );
            $("<h1>标题</h1>").insertAfter("div");

            $("<h1>标题</h1>").insertBefore( $("div") );

            $("<h1>标题</h1>").replaceWith("div");

            $("div").replaceWith( $("<h1>标题</h1>") );

            $("<h1>标题</h1>").replaceAll( "div" );

            $("div").empty();
        });
    </script>
</head>
<body>
    <br/>
    多选:
    <input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <br/><br/>
    <div>1234</div>
    <div>1234</div>
</body>

9. CSS样式操作

image-20201203090717732

image-20201203090742404

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   
   div{
      width:100px;
      height:260px;
   }
   
   div.border{
      border: 2px white solid;
   }
   
   div.redDiv{
      background-color: red;
   }
   
   div.blackDiv{
      border: 5px blue solid;
   }
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   

   $(function(){
      /*
CSS
css(name|pro|[,val|fn])       读写匹配元素的样式属性。 
                        a.css('color')取出a元素的color
                        a.css('color',"red")设置a元素的color为red

CSS 类

addClass(class|fn)           为元素添加一个class值;<div class="mini big">
removeClass([class|fn])    删除元素的class值;传递一个具体的class值,就会删除具体的某个class
                     a.removeClass():移除所有的class值

**/
      var $divEle = $('div:first');
      
      $('#btn01').click(function(){
         //addClass() - 向被选元素添加一个或多个类
         $divEle.addClass("redDiv blackDiv");
      });
      
      $('#btn02').click(function(){
         //removeClass() - 从被选元素删除一个或多个类 
         $divEle.removeClass()
      });

      
      $('#btn03').click(function(){
         //toggleClass() - 对被选元素进行添加/删除类的切换操作 
         //切换就是如果具有该类那么删除,如果没有那么添加上
         $divEle.toggleClass("redDiv");
      });
      
      $('#btn04').click(function(){
         //offset() - 返回第一个匹配元素相对于文档的位置。
         var os = $divEle.offset();
         //注意通过offset获取到的是一个对象,这个对象有两个属性top表示顶边距,left表示左边距
         alert("顶边距:"+os.top+" 左边距:"+os.left);
         
         //调用offset设置元素位置时,也需要传递一个js对象,对象有两个属性top和left
         //offset({ top: 10, left: 30 });
          $divEle.offset({
             top:50,
             left:60
          }); 
      });
      
   })
</script>
</head>
<body>
   <table align="center">
      <tr>
         <td>
            <div class="border">
            </div>
         </td>
         
         <td>
            <div class="btn">
               <input type="button" value="addClass()" id="btn01"/>
               <input type="button" value="removeClass()" id="btn02"/>
               <input type="button" value="toggleClass()" id="btn03"/>
               <input type="button" value="offset()" id="btn04"/>
            </div>
         </td>
      </tr>
   </table>
   <br /> <br />
   <br /> <br />
</body>

10. jQuery动画操作

基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏,不可见就显示。

以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长,以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

淡入淡出动画
fadeIn() 淡入(慢慢可见)
fadeOut() 淡出(慢慢消失)
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明,1 完成可见,0.5 半透明

image-20201203092356939

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <link href="css/style.css" type="text/css" rel="stylesheet" />
      <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
   
<script type="text/javascript">
   /*     
      基本
      show([speed,[easing],[fn]]) 
      hide([speed,[easing],[fn]]) 
      toggle([speed],[easing],[fn]) 
      滑动
      slideDown([spe],[eas],[fn]) 
      slideUp([speed,[easing],[fn]]) 
      slideToggle([speed],[easing],[fn]) 
      淡入淡出
      fadeIn([speed],[eas],[fn]) 
      fadeOut([speed],[eas],[fn]) 
      fadeTo([[spe],opa,[eas],[fn]]) 
      fadeToggle([speed,[eas],[fn]])
      */
      $(function(){
         //显示   show()
         $("#btn1").click(function(){
            $("#div1").show(1000);
         });       
         //隐藏  hide()
         $("#btn2").click(function(){
            $("#div1").hide(1000);
         });    
         //切换   toggle()
         $("#btn3").click(function(){
            $("#div1").toggle(1000);
         });    
         
         
         //淡入   fadeIn()
         $("#btn4").click(function(){
            $("#div1").fadeIn(500);
         });    
         //淡出  fadeOut()
         $("#btn5").click(function(){
            $("#div1").fadeOut(500);
         });    
         
         //淡化到  fadeTo()
         $("#btn6").click(function(){
            $("#div1").fadeTo("slow",Math.random());
         });    
         //淡化切换  fadeToggle()
         $("#btn7").click(function(){
            $("#div1").fadeToggle("slow","linear");
         });    
      })
</script>
   
   </head>
   <body>
      <table style="float: left;">
         <tr>
            <td><button id="btn1">显示show()</button></td>
         </tr>
         <tr>
            <td><button id="btn2">隐藏hide()</button></td>
         </tr>
         <tr>
            <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
         </tr>
         <tr>
            <td><button id="btn4">淡入fadeIn()</button></td>
         </tr>
         <tr>
            <td><button id="btn5">淡出fadeOut()</button></td>
         </tr>
         <tr>
            <td><button id="btn6">淡化到fadeTo()</button></td>
         </tr>
         <tr>
            <td><button id="btn7">淡化切换fadeToggle()</button></td>
         </tr>
      </table>
      
      <div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
         jquery动画定义了很多种动画效果,可以很方便的使用这些动画效果
      </div>
   </body>

11. jQuery事件操作

image-20201203101205377

image-20201203101213304

11.1 jQuery中其他的事件处理方法

click() 它可以绑定单击事件,以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
unbind() 跟 bind 方法相反的操作,解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出

                    来的也有效

image-20201203104600135

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   <link href="css/style.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
   
      $(function(){
         //1.测试click
         $("#anniu").click(function () {
            console.log("按钮单击事件==click方法绑定")
               });

         //2.测试live()
         //把 $('<h5 class="head">什么是jQuery?</h5>')这个元素添加到id为panel的子元素末尾
         $('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );
         //用live方法给所有h5标签绑定单击事件,但是如果用别的绑定就不行,因为上边的这个h5是后面动态创建出来的
         $("h5").live("click",function () {
            alert("h5单击事件 = live方法绑定")
               });

         //3.测试bind(),mouseover(),mouseout()
         //用bind给所有h5标签绑定鼠标移入移出事件,要做的事是function中的代码
         $("h5").bind("mouseover mouseout",function () {
                   console.log("我在进出")
               });

         //4.测试one()
         //这代表这个按钮鼠标移入事件和单击事件只会执行一次
               $("#anniu").one("mouseover click",function () {
                   alert("我只会弹出一次")
               });

         //5.测试unbind()
         //解除这个按钮的所有绑定的事件
               $("#anniu").unbind();
      });
   </script>
</head>
<body>
   <div id="panel">
      <h5 class="head">什么是jQuery?</h5>
      <div class="content">
         jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
      </div>
      <div>
         <button id="anniu">按钮</button>
      </div>
   </div>
</body>

11.2 事件的冒泡

什么是事件的冒泡?
事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢?
在子元素事件函数体内,return false; 可以阻止事件的冒泡传递。

image-20201203105402808

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   <style type="text/css">
      *{
         margin: 0;
         padding: 0;
      }
      body{
         font-size: 13px;
         line-height: 130%;
         padding: 60px;
      }
      #content{
         width: 220px;
         border: 1px solid #0050D0;
         background: #96E555;
      }
      span{
         width: 200px;
         margin: 10px;
         background: #666666;
         cursor: pointer;
         color: white;
         display: block;
      }
      p{
         width: 200px;
         background: #888;
         color: white;
         height: 16px;
      }
   </style>
   <script type="text/javascript" src="jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(function(){
         
         //冒泡就是事件的向上传导,子元素的事件被触发,父元素的响应事件也会触发
         /*例如:在这里因为id=content是span的父标签,而两个绑定的是一个事件,那么当点击
         span标签的时候,id=content的事件也会同时触发。*/
         //解决冒泡问题:return false;
         
         //给span绑定一个单击响应函数
         $("span").click(function(){
            alert("我是span的单击响应函数");
            //只要给子元素return false就能解决问题
                   return false;
         });
         
         //给id为content的div绑定一个单击响应函数
         $("#content").click(function(){
            alert("我是div的单击响应函数");
         });
      })
   </script>
</head>
<body>
   <div id="content">
      外层div元素
      <span>内层span元素</span>
      外层div元素
   </div>
   
   <div id="msg"></div>   
   
   <br><br>
   <a href="http://www.hao123.com" onclick="return false;">WWW.HAO123.COM</a> 
</body>

11.3 JavaScript事件的对象

image-20201203111032866

这个事件对象中有各种信息可以拿来使用,例如鼠标的坐标,当前操作的事件等等(用法可以看案例3或者jQuery练习5)

image-20201203111834379

//1.原生 javascript 获取 事件对象

window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
    console.log(event);
    }
}

//2.jQuery 代码获取 事件对象

$(function () {
    $("#areaDiv").click(function (event) {
        console.log(event);
    });
});

//案例3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

image-20201203144434281

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   #areaDiv {
      border: 1px solid black;
      width: 300px;
      height: 50px;
      margin-bottom: 10px;
   }
   #showMsg {
      border: 1px solid black;
      width: 300px;
      height: 20px;
   }
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
   //使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
   $(function () {
       //用bind给id=areaDiv绑定鼠标移入和移出事件
      $("#areaDiv").bind("mouseover mouseout",function (event) {
         //那么怎么判断他是移出还是移入,添加不同的警告信息呢?
         //event.type代表了事件对象当前操作的事件
         if (event.type == "mouseover"){
             console.log("鼠标移入");
         } else if (event.type == "mouseout") {
                console.log("鼠标移出");
         }
        })
    })

</script>
</head>
<body>
   <div id="areaDiv"></div>
   <div id="showMsg"></div>
</body>

12. jQuery练习

1、全选,全不选,反选

image-20201202193845923

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   
   $(function(){
       //1.全选功能
      $("#checkedAllBtn").click(function () { //点击事件里边要做什么的方法
          //$(":checkbox")代表匹配所有复选框
         $(":checkbox").prop("checked",true); //直接使用jQuery对象的prop方法设置checked属性开启
        });

      //2.全不选功能
        $("#checkedNoBtn").click(function () { //点击事件里边要做什么的方法
            //$(":checkbox")代表匹配所有复选框
            $(":checkbox").prop("checked",false); //直接使用jQuery对象的prop方法设置checked属性关闭
        });

        //3.反选功能
        $("#checkedRevBtn").click(function () { //点击事件里边要做什么的方法
            //获取所有的name属性=items的复选框(jQuery对象)
      var cheackbox = $(":checkbox[name='items']");
            //遍历这个jQuery对象获取每个DOM
            for (var i = 0; i < cheackbox.length; i++) {
                //把DOM中的checked属性都改成相反的
                cheackbox[i].checked =! cheackbox[i].checked;
            }
            //当反选的时候正好所有都选上了,此时 全选/全不选 按钮也要选上
            var cl = $(":checkbox[name='items']").length; //获取所有球类的长度
            var clc = $(":checkbox[name='items']:checked").length; //获取所有选中的球类的长度
            $("#checkedAllBox").prop("checked",cl==clc);//如果这两个长度相等则选上
        });

        //3.弹出选中的标签
        $("#sendBtn").click(function () {
            var clc = $(":checkbox[name='items']:checked") //获取所有选中的球类复选框
            for (var i = 0; i < clc.length; i++) { //遍历获得每个 DOM对象
                alert(clc[i].value); //弹出每个dom对象的value值
            }
        });

        //4.全选/全不选复选框
        $("#checkedAllBox").click(function () {
            //在函数(方法) function中有个this对象,这个this就代表当前正在响应事件的dom对象
            alert(this.checked); //这个就是 全选/全不选 复选框有没有选中的状态
            //让所有篮球复选框的状态都和this的状态一样
            $(":checkbox[name='items']").prop("checked",this.checked)
        });

        //5.当一个个单选选上所有复选框时,全选/全不选复选框也会自动选上
        //给每一个球类按钮绑定单击事件,因为你不知道用户最后会点那个
        $(":checkbox[name='items']").click(function () {
            //每点击都要比较一下选中的球类复选框的长度和球类复选框的长度是否相等
            var cl = $(":checkbox[name='items']").length; //获取所有球类的长度
            var clc = $(":checkbox[name='items']:checked").length; //获取所有选中的球类的长度
            $("#checkedAllBox").prop("checked",cl==clc);//如果这两个长度相等则选上
        })
   });
</script>
</head>
<body>
   <form method="post" action="">
      你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
      <br />
      <input type="checkbox" name="items" value="足球" />足球
      <input type="checkbox" name="items" value="篮球" />篮球
      <input type="checkbox" name="items" value="羽毛球" />羽毛球
      <input type="checkbox" name="items" value="乒乓球" />乒乓球
      <br />
      <input type="button" id="checkedAllBtn" value="全 选" />
      <input type="button" id="checkedNoBtn" value="全不选" />
      <input type="button" id="checkedRevBtn" value="反 选" />
      <input type="button" id="sendBtn" value="弹  出" />
   </form>
</body>

2、 从左到右,从右到左练习

image-20201202195235017

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
   <style type="text/css">
      select {
         width: 100px;
         height: 140px;
      }
      
      div {
         width: 130px;
         float: left;
         text-align: center;
      }
   </style>
   <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
   <script type="text/javascript">    
      $(function(){
         //选中添加到右边
         $("button:eq(0)").click(function(){
            $("select[name=sel01] :selected").each(function(){
               //alert(this);
               $(this).appendTo("select[name=sel02]");
            });
         });
         
         //全部添加到右边
         $("button:eq(1)").click(function(){
            $("select[name=sel01] option").each(function(){
               //alert(this);
               $(this).appendTo("select[name=sel02]");
            });
         });
         
         //选中删除到左边
         $("button:eq(2)").click(function(){
            $("select[name=sel02] :selected").each(function(){
               //alert(this);
               $(this).appendTo("select[name=sel01]");
            });
         });
         //全部删除到左边
         $("button:eq(3)").click(function(){
            $("select[name=sel02] option").each(function(){
               //alert(this);
               $(this).appendTo("select[name=sel01]");
            });
         });
      });
   
   </script>
</head>
<body>

   <div id="left">
      <select multiple="multiple" name="sel01">
         <option value="opt01">选项1</option>
         <option value="opt02">选项2</option>
         <option value="opt03">选项3</option>
         <option value="opt04">选项4</option>
         <option value="opt05">选项5</option>
         <option value="opt06">选项6</option>
         <option value="opt07">选项7</option>
         <option value="opt08">选项8</option>
      </select>
      
      <button>选中添加到右边</button>
      <button>全部添加到右边</button>
   </div>
   <div id="rigth">
      <select multiple="multiple" name="sel02">
      </select>
      <button>选中删除到左边</button>
      <button>全部删除到左边</button>
   </div>

</body>

3、动态添加、删除表格记录

image-20201202200827909

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   
   $(function(){
      
      //删除用户的方法
      function delA(){
         //获取要删除员工的名字
         var name = $(this).parents("tr").find("td:eq(0)").text();
         //弹出一个确认框
         var flag = confirm("确认删除"+name+"吗?");
         if(flag){
            //删除当前a所在的tr
            $(this).parents("tr").remove();
         }
         //取消默认行为
         return false;
      }
      
      //删除用户
      //$("a").click(delA);
      $("a").live("click" , delA);
      
      //添加员工
      $("#addEmpButton").click(function(){
         //获取用户填写的内容
         var name = $("#empName").val();
         var email = $("#email").val();
         var salary = $("#salary").val();
         
         //创建tr
         /*
            <tr>
               <td>Tom</td>
               <td>tom@tom.com</td>
               <td>5000</td>
               <td><a href="#">Delete</a></td>
            </tr>
         */
         $("<tr></tr>").append("<td>"+name+"</td>")
                    .append("<td>"+email+"</td>")
                    .append("<td>"+salary+"</td>")
                    .append("<td><a href='#'>Delete</a></td>")
                    .appendTo("#employeeTable");
         
      });
   });
</script>
</head>
<body>

   <table id="employeeTable">
      <tr>
         <th>Name</th>
         <th>Email</th>
         <th>Salary</th>
         <th>&nbsp;</th>
      </tr>
      <tr>
         <td>Tom</td>
         <td>tom@tom.com</td>
         <td>5000</td>
         <td><a href="#">Delete</a></td>
      </tr>
      <tr>
         <td>Jerry</td>
         <td>jerry@sohu.com</td>
         <td>8000</td>
         <td><a href="#">Delete</a></td>
      </tr>
      <tr>
         <td>Bob</td>
         <td>bob@tom.com</td>
         <td>10000</td>
         <td><a href="#">Delete</a></td>
      </tr>
   </table>

   <div id="formDiv">
   
      <h4>添加新员工</h4>

      <table>
         <tr>
            <td class="word">name: </td>
            <td class="inp">
               <input type="text" name="empName" id="empName" />
            </td>
         </tr>
         <tr>
            <td class="word">email: </td>
            <td class="inp">
               <input type="text" name="email" id="email" />
            </td>
         </tr>
         <tr>
            <td class="word">salary: </td>
            <td class="inp">
               <input type="text" name="salary" id="salary" />
            </td>
         </tr>
         <tr>
            <td colspan="2" align="center">
               <button id="addEmpButton" value="abc">
                  Submit
               </button>
            </td>
         </tr>
      </table>

   </div>

</body>

4、CSS_画 动画

1.点击按钮的时候,隐藏和显示卡西欧之后的品牌。

2.当显示全部内容的时候,按钮文本为“显示精简品牌”
然后,小三角形向上。所有品牌产品为默认颜色。

3.当只显示精简品牌的时候,要隐藏卡西欧之后的品牌,按钮文本为“显示全部品牌”
然后小三形向下。并且把 佳能,尼康的品牌颜色改为红色(给 li 标签添加 promoted 样式即可)

image-20201203093604078

image-20201203093609391

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
   <style type="text/css">
      *{ margin:0; padding:0;}
      body {font-size:12px;text-align:center;}
      a { color:#04D; text-decoration:none;}
      a:hover { color:#F50; text-decoration:underline;}
      .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
      .SubCategoryBox ul { list-style:none;}
      .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
      .showmore { clear:both; text-align:center;padding-top:10px;}
      .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
      
      .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
      
      .promoted a { color:#F50;}
   </style>
   <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      $(function(){
         var category = $("ul:first li:gt(5):not(:last)");
         category.hide();
         
         var $promoptedCategory = $("ul:first li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')");
         
         $(".showmore a").click(function(){
            if(category.is(":hidden")){
               category.show();
               $promoptedCategory.addClass("promoted");
               $(".showmore a span").text("显示精简品牌")
                               .css("background", "url(img/up.gif) no-repeat 0 0");
            }else{
               category.hide();
               $promoptedCategory.removeClass("promoted");
               $(".showmore a span").text("显示全部品牌")
                               .css("background", "url(img/down.gif) no-repeat 0 0");
            }
            
            return false;
         });
      });
   </script>
</head>
<body>
   <div class="SubCategoryBox">
      <ul>
         <li ><a href="#">佳能</a><i>(30440) </i></li>
         <li ><a href="#">索尼</a><i>(27220) </i></li>
         <li ><a href="#">三星</a><i>(20808) </i></li>
         <li ><a href="#">尼康</a><i>(17821) </i></li>
         <li ><a href="#">松下</a><i>(12289) </i></li>
         <li ><a href="#">卡西欧</a><i>(8242) </i></li>
         <li ><a href="#">富士</a><i>(14894) </i></li>
         <li ><a href="#">柯达</a><i>(9520) </i></li>
         <li ><a href="#">宾得</a><i>(2195) </i></li>
         <li ><a href="#">理光</a><i>(4114) </i></li>
         <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
         <li ><a href="#">明基</a><i>(1466) </i></li>
         <li ><a href="#">爱国者</a><i>(3091) </i></li>
         <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
      </ul>
      <div class="showmore">
         <a href="more.html"><span>显示全部品牌</span></a>
      </div>
   </div>
</body>

5、 事件 图片跟随

鼠标移动到图片上,出现放大版的图片跟着鼠标一起移动。

image-20201203144607213

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   body {
      text-align: center;
   }
   #small {
      margin-top: 150px;
   }
   #showBig {
      position: absolute;
      display: none;
   }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(function(){
      $("#small")
         .mouseover(function(event){
            $("#showBig")
               .show()
               .css("left",event.pageX+10)
               .css("top",event.pageY+10);
         })
         .mousemove(function(event){
            $("#showBig")
               .css("left",event.pageX+10)
               .css("top",event.pageY+10);
         })
         .mouseout(function(){
            $("#showBig").hide();
         });
   });
</script>
</head>
<body>
   <img id="small" src="img/small.jpg" />
   
   <div id="showBig">
      <img src="img/big.jpg">
   </div>
</body>
最后修改:2020 年 12 月 04 日 09 : 52 AM
如果觉得我的文章对你有用,请随意赞赏