jquery工具方法和开发插件 | Serena = 阳光果苏 = 自律给我自由

# jquery 的工具方法

对象方法 --90%，JQ 中大部分都是此方法
$(“选择器”).do ()

$().xx(),$ ().yyy()

作用：选择 DOM 元素，然后做对应的操作

比如：

$(“div”).hide();
工具方法 — 全局方法

$.do(); –

格式： $.xxx()；$ .yyy()

比如：

$.trim (“字符串”)；针对的是字符串、对象、数组等。

# 常用的工具方法

$.trim (“字符串”)

作用：去除首尾空格，返回去了的字符串
$.type(）

作用：类似于 JS 的 typeof ，验证数据的类型

typeof [];//object

typeof /abc/;//object

jquery 的 type 方法可以精确的检测对象的类型。

$.each 全局可以遍历数组、对象、和 DOM 重点方法

$(“div”).each () 只能遍历 DOM 元素

用来代替 JS 的 for 循环

1.$.each()  --全局方法（工具方法）
作用：可以遍历对象、数组、DOM元素等
$.each("对象、数组、DOM",function(index,item){
    //index表示数组索引或对象的属性名
    //item表示数组的每一项，或对象的值
})

2.$("选择器").each(); ---对象方法
作用：只能遍历DOM元素
$("div").each(function(index,item){
    
});
使用场景：用得较少，因为JQ可以直接对元素批量操作，而不需要使用循环

$.inArray()

类似于 JS 的 indexOf 方法

语法：

1	$.inArray('要查找的数组元素',数组);//如果有，则返回下标，否则返回-1

$.extend (target,obj1,obj2); // 扩展已有的对象

将多个对象合并到一块

var obj={
    name:'张三'
}
var obj2={
    sex:"男"
}
JS：需要使用for in循环一个个遍历给另外一个对象

JQ：
$.extend(要合并的对象,对象2,对象3);  
会改写原来的那个对象。
$.extend(obj,obj2);//新的obj

# JQ 的两种插件

# 全局插件

步骤：

使用开发模板【重点】

$.extend({
    //参数一般写对象、数组、字符串等
    xxx：function(参数){
        //插件代码
    },
    插件名2：function(参数){
        //插件代码
    }
});

//调用：
$.xxx();
$.yyy();
//举例：开发一个去除左边空格的全局方法

起一个好名字

起名有规范：
如果 jquery 插件，起名应该是

jquery. 插件名.js

jquery. 插件名.min.js // 如果是压缩版

写说明文档

    说明书：
    使用步骤：
    1、本插件依赖jquery环境，在使用前先导入jquery
    2、可以去掉字符串左边的空格，使用以下方法调用
		$.leftTirm("字符串");
		可以返回去掉的字符串
		。。。
	3、关注我的微博，请扫描二维码打赏我喝一杯咖啡

宣传推广

压缩 JS 代码的工具网站：

可以根据压缩程度选择对应的压缩方式：
http://tool.chinaz.com/js.aspx

# 对象插件的开发

1. 全局方法的插件模板
;$.extend({
  插件名:function(参数){
      
  }   
})
2.对象方法的插件模板
;(function($){
    //昨天没有添加fn
    $.fn.extend({
        插件名:function(参数){
            //插件代码
        }
    });
})(jQuery);

例子1：开发
例子2：要开发这种插件
$("div").tab({
    a:'a'，
    b:'b'
});
开发这种插件，需要结合昨天的$.extend()；即合并多个对象的方法

注意：
1. 插件中的 this 的指向：谁调用了插件，指向的就是谁
2. 此处的 this 指向的是 jQuery, 而非 js dom 对象
3.css () 方法会返回调用它的对象，即此处的 this, 所以在原方法的基础上记得添加 return，以保证 jquery 链式操作的延续性

# 插件编写要点

1. 一般建议文件命名为 jquey. 插件名.js，以免和其他 js 库插件混淆例如命名为 jquery.color.js

2. 所有的对象方法都应当附加到 jQuery.fn.extend ({}); 对象上，而所有的全局函数 (工具方法) 都应当附加到 jQuery.extend ({}) 对象本身上

3. 插件内部 this 指向是当前的局部对象（使用该插件的元素）

4. 可以通过 this.each 来遍历所有元素

5. 所有的方法或插件，必须用分号结尾，避免出问题，为了更稳妥可以在插件头部先加一个分号

6. 插件应该返回的是 jQuery 对象，以保证可链式操作，除非插件是全局方法（需要获取的量，如字符串或数组等）

7. 避免插件内部使用 $, 如果要使用，请传参数 jQuery 进去

# 无缝滚动的幻灯片插件实例

# html 文件


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>——作业2——</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
	body{
		height: 1000px;
	}
	ul,li{list-style: none;}
	.content{
		position: relative;
		width: 790px;
		height: 390px;
		overflow: hidden;
	}
	.content ul{
		position: absolute;
		top: 0;
		left: -790px;
		/*width: 3950px;*/
		height: 340px;
	}
	.content ul li{
		float: left;
		width: 790px;
		height: 340px;
	}
	.content ul li img{
		width: 100%;
		height: 100%;
	}
	.arrow{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 790px;
		text-align: center;
		background-color: #fff;
	}
	.arrow a{
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-decoration: none;
		color: #666;
		border:1px solid #ddd;
		border-radius: 5px;
	}
	.arrow a:hover{
		background-color: #eee;
	}
	</style>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/jquery.scroll.js"></script>
	<!-- 
	2.编写一个可以改变无缝滚动大小，速度的幻灯片插件
    其中可变参数为轮播图的宽度和高度，滚动时的速度
    调用格式：
        $("#box").scroll({
            width:790,
            height:390,
            speed:"normal"
        })
	 -->
	 <script>
		 $(function(){
			$("#box").scroll({
				width:790,
				height:390,
				speed:1000
			})
		 })
	 </script>
</head>
<body>
	<div id="box" class="content">
		<ul class="clearfix">
			<li><img src="img/adv4.jpg"></li>
			<li><img src="img/adv1.jpg"></li>
			<li><img src="img/adv2.jpg"></li>
			<li><img src="img/adv3.jpg"></li>
			<li><img src="img/adv4.jpg"></li>
			<li><img src="img/adv1.jpg"></li>
		</ul>
		<div class="arrow">
			<a href="javascript:void(0);"><</a>
			<a href="javascript:void(0);">></a>
		</div>
	</div>
</body>
</html>

# js 文件


; (function ($) {
    $.fn.extend({
        scroll: function (option) {
                option = $.extend({
                    width:690,
                    height:290,
                    speed: 500,
                }, option);
                //这里写JQ代码
                var lbtn = $(".arrow a:first");
                var rbtn = $(".arrow a:last");
                // 胶卷
                var plist = $(".content>ul");
                // 获取多少张
                var len = plist.children().length;//4
                // index表示的就是当前是第几张
                var index = 1;
                // 去根据胶片改变胶卷的长度
                plist.css("width", len * option.width);
                rbtn.on("click", function () {
                    index++;
                    if (index > len - 1) {
                        index = 2;
                    }
                    plist.stop().animate({ "left": -index * option.width }, function () {
                        // 跳到列表的四张图片第一张
                        if (index == len - 1) {
                            plist.css("left", -option.width);
                        }
                    });
                });
                lbtn.on("click", function () {
                    index--;
                    if (index < 0) {
                        index = len - 3;
                    }
                    plist.stop().animate({ "left": -index * option.width }, function () {
                        // 跳到列表的四张图片最后一张
                        if (index == 0) {
                            plist.css("left", -option.width * (len - 2));
                        }
                    });
                });
                // 用定时器触发实现自动轮播
                var timer = setInterval(function () {
                    rbtn.trigger("click");
                }, option.speed)
                // 鼠标移入轮播图的时候轮播静止，移除轮播图的时候轮播继续开始
                $(this).hover(function () {
                    clearInterval(timer)
                }, function () {
                    timer = setInterval(function () {
                        rbtn.trigger("click");
                    }, option.speed)
                })
        }
    })
})(jQuery)

jquery