什么是jquery对象，$的含义,和组件封装

$代表的是jQuery这个对象

https://www.jb51.net/article/53391.htm
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr(“src”,“test.jpg”); 这里的 $("#img")就是 jQuery 对象。

DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById(“img”).src = “test.jpg"；这里的document.getElementById(“img”) 就是DOM 对象。

$("#img").attr(“src”,“test.jpg”); 和 document.getElementById(“img”).src = “test.jpg”; 是等价的，是正确的，但是 $("#img").src = “test.jpg” ；或者 document.getElementById(“img”).attr(“src”,“test.jpg”); 都是错误的。

再说一个例子，就是this, 在写 jQuery 时经常这样写： this.attr(“src”,“test.jpg”)；可是就是出错，其实this 是DOM对象，而.attr(“src”,“test.jpg”) 是 jQuery 方法，所以出错了。要解决这个问题就要将 DOM对象转换成 jQuery 对象，例如 $(this).attr(“src”,“test.jpg”);

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象了，$(DOM 对象) 注： var是定义变量

如：

var v = document.getElementById(“v”); //DOM对象
var $v = $(v); //jQuery 对象
转换后，就可以任意使用 jQuery 的方法。

2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象： [index] 和 .get(index)；

(1) jQuery 对象是一个数据对象，可以通过 [index] 的方法，来得到相应的 DOM 对象。

如：

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中
(2) jQuery 本身提供，通过.get(index) 方法得到相应的 DOM 对象

如：

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中
通过以上方法，可以任意的相互转换 jQuery 对象和 DOM 对象，需要再强调的是： DOM 对象才能使用DOM 中的方法，jQuery 对象是不可以使用DOM中的方法。

https://blog.youkuaiyun.com/qq_36273128/article/details/52932841

8jquery组件封装参考下面的
注意对参数的预处理
https://www.jianshu.com/p/1b55c475b165

通过$.extend()来扩展jQuery 这个意思是单独的一个方法，不绑定在html元素上，直接把方法放在$对象里面
通过$.fn 向jQuery添加新的方法 这个指的是绑定在元素上，设置选择器，这里面的fn就是选择的元素
通过$.widget()应用jQuery UI的部件工厂方式创建

$(function () {
>     $.fn.插件名称 = function (options) {
>         var defaults = {			这里在设置一个default对象，用来下文使用，里面的值代表函数中要用的
>             Event : "click", //触发响应事件
>             msg : "Holle word!" //显示内容
>         };
>         var options = $.extend(defaults, options);   利用extend来将ortions传入的数据覆盖defaults原有的，如果没有则添加
>         var $this = $(this); //当然响应事件对象  这里的前一个this是jquery对象，后一个是dom对象就是捕获的组件，比如<p>等，用this.的方法来获得和更改组件的值或者属性，转换方式就是\$()包起来
>         //功能代码部分
>         //绑定事件
>         $this.live(options.Event, function (e) {      live方法是用来绑定时间的方法，第一个为激活的事件如点击click，
>                                                                         第二个为  执行的函数      这里的下面几行有解释是event传进来的
>                                                                         参数，比如鼠标事件的坐标信息，key事件的按键信息，给函数用，可以不写                 
>             alert(options.msg);
>         });
>     } });

调用时按照格式输入参数

$(function () {
    //绑定元素事件
    $("#test").插件名称({
        Event : "click", //触发响应事件
        msg : "插件原来就是这么简单!" //显示内容
    });
});

布局

<input type = "button" id = "test" value = "这是一个简单的插件调用" /  >

对e的解释

("body").on("click",function(e){
    var ele = e.target
});

e代表event，是jQuery会传进来的第一个参数
意思是 如果后面需要获取操作的信息 就要加e 如果不需要，只是完成一个事件，就可以不加e

https://blog.youkuaiyun.com/u598975767/article/details/75543012

https://www.cnblogs.com/landeanfen/p/5124542.html 这个是第二个方法通常也是使用这个

第一步：要想封装自己的jq插件，要先了解jquery插件运行机制。jQuery使用无new的构造方式，直接$(’ ')进行构造，相当于new jQuery()。看下面例子。

jQuery将jQuery.prototype赋值给jQuery.prototype.init的prototype作为中转站，最终return出了一个jQuery实例。将上述代码写在一个自执行函数内（形成私有作用域，避免命名空间污染），就构成了jQuery的核心框架。

第二步： jquery的两种使用方法 $.function() 和 $(“selector”);

1 $.function() 是在jquery原型对象设置的方法。我们可以通过 $.fn.extend(）去扩展。例如：

$.fn.extend({
getMax:function(a,b){ //getMax 自定义方法。3
var result=a>b?a:b;
console.log(result);
}
});
$(“input”).getMax(1,2); //使用方法
2 $("selector")是在jquery对象上设置的方法。我们可以通过$.extend(）去扩展。例如：

$.extend({
print1:function(name){ //print1是自己定义的函数名字，括号中的name是参数
console.log(name)
}
});
$.print1(“222”) ; //使用方法
所以我们的扩展插架也有两种方式。

第一种：在jQuery对象上添加了一个静态方法。所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($(‘selector’).myfunction())。

$.extend({
sayHello: function(name) {
console.log(‘Hello,’ + (name ? name : ‘Dude’) + ‘!’);
}
})
$.sayHello(); //调用
$.sayHello(‘test’); //带参调用
第二种方法：运用面向对象的思维方式，在jquery的原型上扩展方法。这就要用到 $.fn.extend({}）这个方法了。

;(function($,window,document,undefined){ //用一个自调用匿名函数把插架代码包裹起来，防止代码污染
$.fn.插件名称 = function (options) {
var defaults = { //defaults 使我们设置的默认参数。
Event : “click”, //触发响应事件
msg : “Holle word!” //显示内容
};
var options = $.extend(defaults, options); //将传入参数和默认参数合并
var $this = $(this); //当然响应事件对象

    $this.live(options.Event, function (e) {   //功能代码部分，绑定事件
        alert(options.msg);
    });
}

})(jQuery,window,document);

//调用插件
$("#test").插件名称({
Event : “click”, //触发响应事件
msg : “测试插件!” //显示内容
});

---

作者：Cool people
来源：优快云
原文：https://blog.youkuaiyun.com/weixin_39398244/article/details/81539486
版权声明：本文为博主原创文章，转载请附上博文链接！