JavaScript（16）jQuery 事件

最新推荐文章于 2023-04-11 09:26:38 发布

馨宇心苑

最新推荐文章于 2023-04-11 09:26:38 发布

阅读量822

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/u014194675/article/details/26570705

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

jQuery 事件
jQuery 是为事件处理特别设计的。

jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：

<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

在上面的例子中，当按钮的点击事件被触发时会调用一个函数：

$("button").click(function() {..some code...} )

该方法隐藏所有 <p> 元素：

$("p").hide();

单独文件中的函数
如果网站包含许多页面，并希望 jQuery 函数易于维护，那么可以把 jQuery 函数放到独立的 .js 文件中。

jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简写。（我现在才理解这句话的意思，即：使用 $ 等价于使用 jQuery。）

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

使用 jq 来代替 $ 符号：

var jq = $.noConflict();

等价于：

var jq = jQuery.noConflict();

如果 jQuery 代码块使用 $ 简写，并且不愿意改变这个快捷方式，那么可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

结论：
由于 jQuery 是为处理 HTML 事件而特别设计的，遵循以下原则时，代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中（$(document).ready(function){......}）
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

说完了事件，然后就是具体方法了。方法很多，如果以后有机会用到，可以边用边学习。
列几个比较常用或是有用的方法吧。。。

jQuery 效果

隐藏和显示

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

淡入淡出
jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

以上3个方法的参数：
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

滑动
jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

jQuery slideUp() 方法用于向上滑动元素。

$(selector).slideUp(speed,callback);

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

以上3个方法的参数：
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

隐藏和显示、淡入淡出、滑动的例子：

<head>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失；再点击“显示”按钮，我就会出现。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>

<head>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</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>

<head>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
<div class="panel">
<p>出现了</p>
</div>
 
<p class="flip">请点击这里</p>
</body>