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

在 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();

  });

});

</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();

    });

});

</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();

  });

  $("#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();

  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();

    alert("现在段落被隐藏了");

  });

});

</script>

</head>

<body>

<button>隐藏</button>

<p>这是一个段落，内容很少</p>

</body>

</html>

实例代码全

jQuery 链：Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上），可以把动作/方法链接在一起。实例：下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red")

  .slideUp()

  .slideDown();

<!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()

      .slideDown();

  });

});

</script>

</head>

<body>

<p id="p1">教程!!</p>

<button>点我</button>

</body>

</html>

实例代码全

秒客网

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

相关文章