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

时间 2019-11-25

标签 javascript 笔记 jquery 栏目 JavaScript 繁體版

原文原文链接

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

目录css

--- jQuery 语法html

--- 文档就绪事件jquery

--- jQuery 选择器ide

--- jQuery 事件函数

--- jQuery 效果动画

jQuery 语法：jQuery 语法是经过选取（查询，query） HTML 元素，并对它们执行"操做"（actions）。this

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

实例：spa

$(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>

实例代码全