通过jQuery注册事件
jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<button type="button" name="click" >单击事件</button>
<button type="button" name="dbclick" >双击事件</button>
</body>
<script>
$("button[name='click']").click(function(e){
alert('单击事件！');
});
$("button[name='dbclick']").dblclick(function(e){
alert('双击事件！');
});
</script>
</html>函数中的参数就是事件源对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<button type="button" name="click" >单击事件</button>
<button type="button" name="dbclick" >双击事件</button>
</body>
<script>
$("button[name='click']").click(function(e){
alert(e.toString());
});
$("button[name='dbclick']").dblclick(function(e){
alert(e.toString());
});
</script>
</html>在函数中可以使用this来表示当前触发事件的对象，也可以通过选择器去获取当前对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<button type="button" name="click" >单击事件</button>
<button type="button" name="dbclick" >双击事件</button>
</body>
<script>
$("button[name='click']").click(function(e){
$("button[name='click']").html("Change");
});
$("button[name='dbclick']").dblclick(function(e){
$(this).html("Change");
});
</script>
</html>给标签添加/删除样式
在jQuery中有一个addClass方法，可以给标签添加类样式，相对的removeClass方法则是删除标签中的类样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<style>
.text_p{
color: royalblue;
font-size: 22px;
}
</style>
<body>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
<script>
$("p").mousemove(function(){
$(this).addClass("text_p");
});
$("p").mouseout(function(){
$(this).removeClass("text_p");
});
</script>
</html>除了以上的方法外，还有一个css方法可以添加样式，以键值的方式添加：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
<script>
$("p").mousemove(function(){
$(this).css("color","royalblue");
$(this).css("font-size","22px");
});
$("p").mouseout(function(){
$(this).css("color","black");
$(this).css("font-size","16px");
});
</script>
</html>如果css方法中传递的是键，那么就可以得到该键的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<style>
.text_p{
color: royalblue;
font-size: 22px;
}
</style>
<body>
<p class="text_p">Hello World!</p>
<p class="text_p">Hello World!</p>
<p class="text_p">Hello World!</p>
</body>
<script>
$("p").click(function(){
alert($(this).css("color"));
alert($(this).css("font-size"));
});
</script>
</html>运行结果：
控制标签
通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<button type="button">添加标签</button>
<div></div>
<select></select>
</body>
<script>
$("button").click(function(){
$("div").append("<p>Hello Wolrd!</p>");
$("select").append("<option>hello</option>");
});
</script>
</html>remove方法可以删除某个标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<body>
<button type="button">删除标签</button>
<div>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
</div>
</body>
<script>
$("button").click(function() {
$("p").remove();
});
</script>
</html>html方法类似于innerHTML方法，可以给开始和结束标签之间填充HTML或文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<body>
<button type="button">添加HTML</button>
<div></div>
</body>
<script>
$("button").click(function() {
$("div").html("<p>Hello Wolrd!</p>");
});
</script>
</html>text方法可以给开始和结束标签之间填充纯文本内容，即便传的是HTML代码也会被转换成文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<body>
<button type="button">添加文本</button>
<p></p>
</body>
<script>
$("button").click(function() {
$("p").text("<p>Hello Wolrd!</p>");
});
</script>
</html>val方法可以返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<body>
<button type="button">得到/设置value</button>
<input type="text" value="test" />
</body>
<script>
$("button").click(function() {
alert($("input").val());
$("input").val("Hello World！");
});
</script>
</html>控制标签属性
attr方法可以控制标签的所有属性，通过这个方法可以给某个标签动态设置属性，也可以通过这个方法来获得某个属性的值，而removeAttr方法则可以删除指定的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
.test_div{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<body>
<div>
<button type="button" id="add">设置属性</button>
<button type="button" id="del">删除属性</button>
<img />
</div>
</body>
<script>
$("button").click(function() {
$("img").attr("src","img/TIM截图20180105215155.png");
$("img").addClass("test_div");
});
$("#del").click(function(){
$("img").removeAttr("src");
});
</script>
</html>运行结果：
jQuery的显示/隐藏效果
show方法可以显示某个组件，hide方法则可以隐藏某个组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
.test{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<body>
<div>
<button type="button" name="show">显示</button>
<button type="button" name="hide">隐藏</button>
<img class="test" src="img/TIM截图20180105215155.png" />
</div>
</body>
<script>
$("button[name='show']").click(function() {
$("img").show();
});
$("button[name='hide']").click(function(){
$("img").hide();
});
</script>
</html>show以及hide方法中都有可选的参数，第一个参数可以设置元素从隐藏到完全可见的速度，可以直接传递毫秒数，也可以传递字符串：slow、normal、fast等。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。第二个参数就是回调函数，show 函数执行完之后，要执行的函数，示例：
<script>
function show_img(){
alert("显示完成！");
}
function hide_img(){
alert("隐藏完成！");
}
$("button[name='show']").click(function() {
$("img").show(5000,show_img);
});
$("button[name='hide']").click(function(){
$("img").hide(5000,hide_img);
});
</script>toggle方法可以切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素，同样的可以设置过程时间和回调函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
.test{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<body>
<div>
<button type="button" name="toggle">显示/隐藏</button>
<img class="test" src="img/TIM截图20180105215155.png" />
</div>
</body>
<script>
function done(){
alert("完成！");
}
$("button[name='toggle']").click(function() {
$("img").toggle(3000,done)
});
</script>
</html>想要有淡入淡出的效果可以使用以下四种fade方法：
- fadeIn() 方法用于淡入已隐藏的元素
- fadeOut() 方法用于淡出可见元素
- fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
- fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
.test{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<body>
<div>
<button type="button" name="fadeIn">显示</button>
<button type="button" name="fadeOut">隐藏</button>
<button type="button" name="fadeToggle">显示/隐藏</button>
<button type="button" name="fadeTo">淡出</button>
<img class="test" src="img/TIM截图20180105215155.png" />
</div>
</body>
<script>
function fadeIn_img(){
alert("显示完成！");
}
function fadeOut_img(){
alert("隐藏完成！");
}
function done_img(){
alert("完成！");
}
$("button[name='fadeIn']").click(function() {
$("img").fadeIn(3000,fadeIn_img);
});
$("button[name='fadeOut']").click(function(){
$("img").fadeOut(3000,fadeOut_img);
});
$("button[name='fadeToggle']").click(function(){
$("img").fadeToggle(3000,done_img);
});
$("button[name='fadeTo']").click(function(){
$("img").fadeTo("slow",0.5);
});
</script>
</html>通过jQuery实现元素滑动效果可以使用以下三个方法：
- slideDown() 方法用于向下滑动元素。
- slideUp() 方法用于向上滑动元素。
- slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
.test {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<body>
<button type="button" name="slideDown">向下滑动</button>
<button type="button" name="slideUp">向上滑动</button>
<button type="button" name="slideToggle">向下滑动/向上滑动</button>
<div>
<img class="test" src="img/TIM截图20180105215155.png" />
</div>
</body>
<script>
function slideDown_img() {
alert("向下滑动完成！");
}
function slideUp_img() {
alert("向上滑动完成！");
}
function done_img() {
alert("完成！");
}
$("button[name='slideDown']").click(function() {
$("div").slideDown(3000,slideDown_img);
});
$("button[name='slideUp']").click(function() {
$("div").slideUp(3000,slideUp_img);
});
$("button[name='slideToggle']").click(function() {
$("div").slideToggle(3000,done_img);
});
</script>
</html>
本文转自 ZeroOne01 51CTO博客，原文链接：http://blog.51cto.com/zero01/2057995，如需转载请自行联系原作者
