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://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

鼠标事件	键盘事件	表单事件	文档/窗口事件
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="80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="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="80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="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',
    '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',
      '150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;100px;position:absolute;">
</div>

</body>
</html>

实例代码全

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

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    '+=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',
      '+=150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;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;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;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>

实例代码全

相关阅读:
游戏系统开发笔记（八）——场景对象管理
 dynomite:高可用多数据中心同步
 VBS错误代码释义
 VBScript 内置函数
 在oracle中，select语句查询字段中非纯数字值
 ASP里面令人震撼地自定义Debug类（VBScript）
调试 ASP 程序脚本
 多文档界面的实现(DotNetBar的superTabControl)
C#利用tabControl控件实现多窗体嵌入及关闭
 使用MDI窗体实现多窗口效果
原文地址：https://www.cnblogs.com/ostrich-sunshine/p/6789151.html