web前端学习笔记——Day11

最新推荐文章于 2024-10-16 11:23:07 发布

小小鱼@✔

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量321

点赞数 1

分类专栏： web前端学习笔记文章标签：前端 jQuery

本文链接：https://blog.csdn.net/qq_43338468/article/details/90693150

版权

web前端学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

六、动画效果

6.1显示隐藏

hide show toggle三个函数方法

<!DOCTYPE html>
<html>
<head>
	<title>显示隐藏</title>
</head>
<body>
	<p>hello</p>
    <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三个函数方法

<!DOCTYPE html>
<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">toggle</div>
    <div id="content">helloworld</div>
</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四个函数

<!DOCTYPE html>
<html>
<head>
	<title>淡入淡出</title>
</head>
<body>
	<button id="in">fadein</button>
    <button id="out">fadeout</button>
    <button id="toggle">fadetoggle</button>
    <button id="fadeto">fadeto</button>
    <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回调函数

<!DOCTYPE html>
<html>
<head>
	<title>回调函数</title>
</head>
<body>
	<button>hide</button>
  	<p>helloworld helloworld helloworld</p>
</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);

举例：
<!DOCTYPE html>
<html>
<head>
	<title>jquery扩展</title>
</head>
<body>
	<p>111</p>
	<p>222</p>
	<p>333</p>
	<p>444</p>
	<p>555</p>
	<p>666</p>
</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<this.length;i++){
			// 	console.log(this[i].innerHTML);
			// }	

			//循环二
			// $.each($(this),function(x,y){
			// 	console.log(y.innerHTML)
			// })	
		}
	});
	$("p").Get_text();
</script>
</html>