上篇主要介绍了jQuery，和一些基本用法，这篇主要讲解动画、常用事件、还有一些jQuery的补充内容。
一、动画
1、基本
show([s,[e],[fn]]) 显示隐藏的匹配元素 hide([s,[e],[fn]]) 隐藏显示的元素 toggle([s],[e],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
2、滑动
slideDown([s],[e],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素 slideUp([s,[e],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素 slideToggle([s],[e],[fn]) 通过高度变化来切换所有匹配元素的可见性
3、淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]])
- 淡出到到固定（自己定义）透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("真没用3");
}); 切换
4、自定义动画
animate(p,[s],[e],[fn]) 自定义动画
5、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画示例</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<img src="http://www.iyi8.com/uploadfile/2017/0523/20170523114637271.jpg" alt="">
<button id="b1">召唤</button>
<button id="b2">淡出</button>
<button id="b3">淡入</button>
<button id="b4">淡出到0.66</button>
<button id="b5">淡入淡出</button>
<button id="b6">边框变大</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#b1").on("click", function () {
// $("img").show();
$("img").toggle();
})
// 淡出
$("#b2").on("click", function () {
$("img").fadeOut("fast");
})
// 淡入
$("#b3").on("click", function () {
// 掌握了增加时间的方法
$("img").fadeIn(3000, function () {
alert("真没用");
});
})
// 淡出到0.66透明度
$("#b4").on("click", function () {
// 掌握了新知识
$("img").fadeTo(3000, 0.66, function () {
alert("真没用2");
});
})
// 淡入淡出
$("#b5").on("click", function () {
$("img").fadeToggle(3000, function () {
alert("真没用3");
});
})
// 动画-图片变小
$("#b6").on("click", function () {
$("img").animate({
width: "100px",
height: "60px",
}, 3000, function () {
// 这是回调函数
alert(123);
});
})
</script>
</body>
</html>
View Code
二、常用事件
1、常用事件
blur([[data],fn])
-失去焦点
focus([[data],fn])
- 获取焦点
change([[data],fn])
- 当元素的值发生改变（select）
click([[data],fn])
- 点击
dblclick([[data],fn])
- 双击
scroll([[data],fn])
- 滚动
submit([[data],fn])
-提交
2、补充
文档树加载完之后绑定事件（绝大部分情况下）
$(document).ready(function(){
// 绑定事件的代码
....
})
简写：
$(function($){
// 绑定事件的代码
....
});
3、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用事件示例</title>
</head>
<body>
<input type="text" name="search" value="苹果手机" data-show="">
<button>搜索</button>
<select name="" id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script src="jquery-3.2.1.js"></script>
<script>
$(":input").focus(function () {
var data = $(this).val();
$(this).val("");
$(this).attr("data-show", data);
});
$(":input").blur(function () {
$(this).val($(this).attr("data-show"));
});
$(":input").data("items", ["苹果手机", "苹果电脑", "烟台红富士"]);
// change
$("#s1").change(function () {
console.log($(this).val());
});
</script>
</body>
</html>
View Code
4、事件处理
之前绑定事件的方式：
1. onclick=clickMe(); function clickMe() {}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){})
jQuery绑定事件的方式：
1. $(ele).on("click", function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){}) 事件委派 1.x版本使用 最新版本已经不能使用
3. $("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派
三、插件
1、jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
<script>
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
</script>
2、jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。jQuery.fn.extend(object)
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
// jQuery对象可以使用新添加的check()方法了。
$( "input[type='checkbox']" ).check();
</script>
3、单独写在文件里的扩展
(function(jq){
jq.extend({
funcName: function(){
...
},
});
})(jQuery);
或
(function (jq) {
jq.fn.extend({
funcName: function(){
...
}
})
})(jQuery);
四、jQuery API 中文文档
上一篇jQuery初识和本篇所有的jquery的所有操作只是一些常用操作很少的一部分，如果想了解jquery的其他操作的话可以去查一些（jQuery API 中文文档）在百度上就可以搜到很多。
推荐一个： http://jquery.cuishifeng.cn/
样图：
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。