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

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

2024-09-18 14:17:39   219人阅读

这节整理整理 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（上）


联系
我们