码迷，mamicode.com
首页 > 编程语言 > 详细

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

时间：2017-05-01 00:25:20      阅读：187      评论：0      收藏：0      [点我收藏+]

标签：world   log   自定义   ffffff   script   blog   事件   偶数   open   

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

标签：world   log   自定义   ffffff   script   blog   事件   偶数   open   

原文地址：http://www.cnblogs.com/ostrich-sunshine/p/6789151.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！