web前端学习笔记——Day11
六、动画效果
6.1显示隐藏
hide show toggle三个函数方法
<html>
<head>
<title>显示隐藏title>
head>
<body>
<p>hellop>
<button id="hide">隐藏button>
<button id="show">显示button>
<button id="toggle">切换button>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});
//用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function () {
$("p").toggle(1000);
});
});
script>
html>
6.2滑动
slideDown slideUp slideToggle三个函数方法
<html>
<head>
<title>滑动title>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
style>
head>
<body>
<div id="slideDown">出现div>
<div id="slideUp">隐藏div>
<div id="slideToggle">togglediv>
<div id="content">helloworlddiv>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
});
script>
html>
6.3淡入淡出
fadeIn .fadeOut fadeToggle fadeTo四个函数
<html>
<head>
<title>淡入淡出title>
head>
<body>
<button id="in">fadeinbutton>
<button id="out">fadeoutbutton>
<button id="toggle">fadetogglebutton>
<button id="fadeto">fadetobutton>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet">div>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$("#in").click(function(){
$("#id1").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);
});
script>
html>
6.4回调函数
<html>
<head>
<title>回调函数title>
head>
<body>
<button>hidebutton>
<p>helloworld helloworld helloworldp>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html());
});
});
script>
html>
七、扩展方法（插件机制）
7.1用JQuery写插件时，最核心的方两个方法
<script>
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));
//-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});
$("p").print();
</script>
7.2定义作用域
定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
(function(a,b){return a+b})(3,5)
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);
7.3默认参数
/step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);
举例：
<html>
<head>
<title>jquery扩展title>
head>
<body>
<p>111p>
<p>222p>
<p>333p>
<p>444p>
<p>555p>
<p>666p>
body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js">script>
<script type="text/javascript">
//创建一个MyPrint函数
// $.extend({
// MyPrint:function(){
// console.log("hello");
// }
// });
//调用创建的函数
// $.MyPrint();
//创建方式二
$.fn.extend({
Get_text:function(){
//循环一
// for (var i=0;i
// console.log(this[i].innerHTML);
// }
//循环二
// $.each($(this),function(x,y){
// console.log(y.innerHTML)
// })
}
});
$("p").Get_text();
script>
html>