首页 > 代码库 > javaScript 笔记(5) --- jQuery(上)

javaScript 笔记(5) --- jQuery(上)

这节整理整理 iquery.js 相关的内容...

目录

   --- jQuery 语法

   --- 文档就绪事件

   --- jQuery 选择器

   --- jQuery 事件

   --- jQuery 效果

jQuery 语法:jQuery 语法是通过选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。

  • jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
  • 基础语法:$(selector).action()
    • 美元符号定义 jQuery
    • 选择符(selector)"查询"和"查找" HTML 元素
    • jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件:

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){
   // 开始写 jQuery 代码...
});
// 这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

    如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

提示:简洁写法(与以上写法效果相同):

$(function(){ 
   // 开始写 jQuery 代码...
});

     以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

jQuery 选择器:允许您对 HTML 元素组或单个元素进行操作。

  • jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的CSS 选择器,除此之外,它还有一些自定义的选择器。
  • jQuery 中所有选择器都以美元符号开头:$()。
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>点我</button>
    </body>
    </html>
    实例1: 点击按钮隐藏所有 p 元素
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <p id="test">这是另外一个段落</p>
    <button>点我</button>
    </body>
    
    </html>
    实例2: 按钮隐藏所选#id & .class
    $("*") 选取所有元素  
    $(this) 选取当前 HTML 元素  
    $("p.intro") 选取 class 为 intro 的 <p> 元素  
    $("p:first") 选取第一个 <p> 元素  
    $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素  
    $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素  
    $("[href]") 选取带有 href 属性的元素  
    $("a[target=‘_blank‘]") 选取所有 target 属性值等于 "_blank" 的 <a> 元素  
    $("a[target!=‘_blank‘]") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素  
    $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素  
    $("tr:even") 选取偶数位置的 <tr> 元素  
    $("tr:odd") 选取奇数位置的 <tr> 元素

jQuery 事件:页面对不同访问者的响应叫做事件。

  • 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
  • 在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。常见 DOM 事件:
    鼠标事件键盘事件表单事件文档/窗口事件
    click keypress submit load
    dblclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave blur unload
  • 在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。实践方法语法:
    $("p").click(function(){
        // 动作触发后执行的代码!! eg:$(this).hide();
    });
  • 常用的 jQuery 事件方法

    • $(document).ready() 方法允许我们在文档完全加载完后执行函数。
    • click() 方法:是当按钮点击事件被触发时会调用一个函数,该函数在用户点击 HTML 元素时执行:
    • dblclick() 方法: 双击元素时,触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:
      $("p").dbclick(function(){
        $(this).hide();
      });
    • mouseenter() 方法:当鼠标指针穿过元素时,触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:
      $("#p1").mouseenter(function(){
          alert(您的鼠标移到了 id="p1" 的元素上!);
      });
    • mouseleave() 方法: 当鼠标指针离开元素时,触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数;
    • mousedown() 方法: 当鼠标指针移动到元素上方,并按下鼠标键是,触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数;
    • mouseup() 方法:当在元素上松开鼠标按钮时,触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数;
    • hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
      $("#p1").hover(
          function(){
              alert("你进入了 p1!");
          },
          function(){
              alert("拜拜! 现在你离开了 p1!");
          }
      );
    • focus() 方法:当元素获得焦点时,触发 focus 事件,或规定当发生 focus 事件时运行的函数。当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
      $("input").focus(function(){
        $(this).css("background-color","#cccccc");
      });
      技术分享
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8"> 
      <title>菜鸟教程(runoob.com)</title> 
      <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script>
      $(document).ready(function(){
        $("input").focus(function(){
          $(this).css("background-color","#cccccc");
        });
        $("input").blur(function(){
          $(this).css("background-color","#ffffff");
        });
      });
      </script>
      </head>
      <body>
      
      Name: <input type="text" name="fullname"><br>
      Email: <input type="text" name="email">
      
      </body>
      </html>
      实例全部代码
    • blur() 方法:当元素失去焦点时,触发 blur 事件,或规定当发生 blur 事件时运行的函数:
      $("input").blur(function(){
        $(this).css("background-color","#ffffff");
      });   // 一般与 focus() 方法匹配使用

       

jQuery 效果:隐藏、显示、切换,滑动,淡入淡出,以及动画,...

  •  jQuery: hide() 和 show() 方法来隐藏和显示 HTML 元素,语法:
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    /*可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
      可选的 callback 参数是隐藏或显示完成后所执行的函数名称。  */
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide(1000);
      });
    });
    </script>
    </head>
    <body>
    <button>隐藏</button>
    <p>这是个段落,内容比较少。</p>
    <p>这是另外一个小段落</p>
    </body>
    </html>
    隐藏实例:自定义隐藏时间

jQuery:toggle()方法来切换 hide() 和 show() 方法,语法:

$(selector).toggle(speed,callback);
技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
toggle 实例全部代码
  • jQuery Fading 方法:实现元素的淡入淡出效果。
    • fadeIn(): 用于淡入已隐藏的元素:
    • fadeOut():用于淡出可见元素;
    • fadeToggle():可以在 fadeIn() 与 fadeOut() 方法之间进行切换;
      前三者语法相同,类如下 fadeIn:$(selector).fadeIn(speed,callback);
      /*可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
         可选的 callback 参数是 fading 完成后所执行的函数名称。  */
      用法也相同,如下使用 fadeToggle 进行示例
      $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
      });

技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>
示例 全部代码
    • fadeTo():允许渐变为给定的不透明度(值介于 0 与 1 之间),语法:
      $(selector).fadeTo(speed,opacity,callback);
      /*必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
         fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于0 与 1之间)
         可选的 callback 参数是该函数完成后所执行的函数名称。
      */

      实例:

      $("button").click(function(){
        $("#div1").fadeTo("slow",0.15);
        $("#div2").fadeTo("slow",0.4);
        $("#div3").fadeTo("slow",0.7);
      });
      技术分享
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script>
      $(document).ready(function(){
        $("button").click(function(){
          $("#div1").fadeTo("slow",0.15);
          $("#div2").fadeTo("slow",0.4);
          $("#div3").fadeTo("slow",0.7);
        });
      });
      </script>
      </head>
      
      <body>
      <p>演示 fadeTo() 使用不同参数</p>
      <button>点我让颜色变淡</button>
      <br><br>
      <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
      <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
      <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
      
      </body>
      </html>
      fadeTo 实例代码 全
  • jQuery 滑动:您可以在元素上创建滑动效果
  • $(selector).slideToggle(speed,callback);
    • slideDown():用于向下滑动元素
    • slideUp():用于向上滑动元素
    • slideToggle():可以在 slideDown() 与 slideUp() 方法之间进行切换:
      $("#flip").click(function(){
        $("#panel").slideToggle();
      });
      技术分享
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script> 
      $(document).ready(function(){
        $("#flip").click(function(){
          $("#panel").slideToggle("slow");
        });
      });
      </script>
       
      <style type="text/css"> 
      #panel,#flip
      {
          padding:5px;
          text-align:center;
          background-color:#e5eecc;
          border:solid 1px #c3c3c3;
      }
      #panel
      {
          padding:50px;
          display:none;
      }
      </style>
      </head>
      <body>
       
      <div id="flip">点我,显示或隐藏面板。</div>
      <div id="panel">Hello world!</div>
      
      </body>
      </html>
      实例代码 全部
  • jQuery 动画:animate() 方法允许您创建自定义的动画,语法:
    $(selector).animate({params},speed,callback);
    /* 必需的 params 参数定义形成动画的 CSS 属性。
       可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast"、"normal" 或毫秒。
       可选的 callback 参数是动画完成后所执行的函数名称。  */
    默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
    如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

    强调:(1)生成动画的过程中可同时使用多个属性,如下:

    $("button").click(function(){
      $("div").animate({
        left:250px,
        opacity:0.5,
        height:150px,
        width:150px
      });
    });
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("button").click(function(){
        $("div").animate({
          left:250px,
          opacity:0.5,
          height:150px,
          width:150px
        });
      });
    });
    </script> 
    </head>
     
    <body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 
    如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
    
    </body>
    </html>
    实例代码 全

    (2)animate()也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

    $("button").click(function(){
      $("div").animate({
        left:250px,
        height:+=150px,
        width:+=150px
      });
    });
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("button").click(function(){
        $("div").animate({
          left:250px,
          height:+=150px,
          width:+=150px
        });
      });
    });
    </script> 
    </head>
     
    <body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 
    如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
    
    </body>
    </html>
    实例代码 全

    (3)可以把属性的动画值设置为 "show"、"hide" 或 "toggle",实例:

    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("button").click(function(){
        $("div").animate({
          height:toggle
        });
      });
    });
    </script> 
    </head>
     
    <body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 
    如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
    
    </body>
    </html>
    实例代码 全

    (4)animate() 队列功能:这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("button").click(function(){
        var div=$("div");  
        div.animate({left:100px},"slow");
        div.animate({fontSize:3em},"slow");
      });
    });
    </script> 
    </head>
     
    <body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 
    如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
    
    </body>
    </html>
    实例代码 全

    (5)可使用 animate() 来操作所有 CSS 属性,但 需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

  • jQuery 停止动画:stop() 方法,用于在动画或效果完成前对它们进行停止,它适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。语法:
    $(selector).stop(stopAll,goToEnd);
    /*可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
      可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
      因此,默认地,stop() 会清除在被选元素上指定的当前动画   */

    实例:

    $("#stop").click(function(){
      $("#panel").stop();
    });
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideDown(5000);
      });
      $("#stop").click(function(){
        $("#panel").stop();
      });
    });
    </script>
     
    <style type="text/css"> 
    #panel,#flip
    {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel
    {
        padding:50px;
        display:none;
    }
    </style>
    </head>
    <body>
     
    <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel">Hello world!</div>
    
    </body>
    </html>
    实例代码 全

     

  • jQuery Callback:Callback 函数在当前动画 100% 完成之后执行。许多 jQuery 函数涉及动画,这些函数也许会将 speed 或 duration 作为可选参数,speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
    //以下实例在隐藏效果完全实现后回调函数
    $("button").click(function(){
      $("p").hide("slow",function(){
        alert("段落现在被隐藏了");
      });
    });
    
    // 以下实例没有回调函数,警告框会在隐藏效果完成前弹出
    $("button").click(function(){
      $("p").hide(1000);
      alert("段落现在被隐藏了");
    });
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide(1000);
        alert("现在段落被隐藏了");
      });
    });
    </script>
    </head>
    <body>
    <button>隐藏</button>
    <p>这是一个段落,内容很少</p>
    </body>
    </html>
    实例代码 全

     

  • jQuery 链:Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上),可以把动作/方法链接在一起。实例:下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
    技术分享
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function()
      {
      $("button").click(function(){
        $("#p1").css("color","red")
          .slideUp(2000)
          .slideDown(2000);
      });
    });
    </script>
    </head>
    <body>
    
    <p id="p1">教程!!</p>
    <button>点我</button>
    
    </body>
    </html>
    实例代码 全

     

 

       

 

javaScript 笔记(5) --- jQuery(上)