JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

时间：2022-12-17 19:30:35

一、为什么jquery前面要写$

Javascript没有package的概念，而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳。
名为jQuery的全局变量就是这样一个对象，不过显然作者也觉得没必要每次都要大家写jQuery.balabala......这样有点小啰嗦了，于是就又给了jQuery一个简短而独特的别名——$.

二、$.fn  $.extend()   $.fn.extend

理解jquery的$.extend()、$.fn和$.fn.extend()    jQuery插件开发模式

2.1  $.fn  

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript没有明确的类的概念，但是用类来理解它，会更方便。

jQuery便是一个封装得非常好的类，比如我们用 语句　$(“#btn1″) 会生成一个 jQuery类的实例。

2.2   $.extend()

jQuery官网

When two or more object arguments are supplied to $.extend(), properties from all of the objects are added to the target object. Arguments that are null or undefined are ignored.

If only one argument is supplied to $.extend(), this means the target argument was omitted. In this case, the jQuery object itself is assumed to be the target. By doing this, you can add new functions to the jQuery namespace. This can be useful for plugin authors wishing to add new methods to JQuery.

Keep in mind that the target object (first argument) will be modified, and will also be returned from $.extend(). If, however, you want to preserve both of the original objects, you can do so by passing an empty object as the target:

2.2.1.   $.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法  是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而已。

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); //

2.2.2.  $.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

 var settings = { validate: false, limit: 5, name: "foo" };

 var options = { validate: true, name: "bar" };

 jQuery.extend(settings, options);

 结果：settings == { validate: true, limit: 5, name: "bar" }

2.3    $.fn.extend(object)

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

 $.fn.extend({                               // 方法 是在jQuery的prototype属性上扩展的，自然实例可以使用此方法

     alertWhileClick:function() {             //   和 $.extend() 道理一样，只是一个是扩展在Jquery上，一个是扩展在Jquery.prototype上

           $(this).click(function(){

                  alert($(this).val());

            });

      }

 });

 $("#input1").alertWhileClick(); // 页面上为：

三、javaScript对象、DOM对象和jQuery对象

JavaScript 对象、DOM对象、jquery对象的区别、转换详解

javaScript对象:

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

DOM对象：

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API）。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
DOM对象，即是我们用传统的方法(javascript)获得的对象。

JQuery对象：

jQuery对象即是用jQuery类库的选择器获得的对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法

区别：

在jQuery对象中无法使用DOM对象的任何方法

在DOM对象中无法使用JQuery对象的任何方法

两者之间互相使用方法时时需要先转换一下的

DOM对象 JQuery对象之间的转换

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。

jQuery对象转成DOM对象:

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

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

(2)使用jquery的方法  .get(index)

四、工具方法(utility)

jQuery设计思想      工具方法(utilities)

除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。

如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。

它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。

而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。

如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。

常用的工具方法:

 　　$.trim()   去除字符串两端的空格。

 　　$.each()   遍历一个数组或对象。

 　　$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。

 　　$.grep() 返回数组中符合某种标准的元素。

 　　$.extend() 将多个对象，合并到第一个对象。  //即继承
 　　$.makeArray() 将对象转化为数组。

 　　$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

 　　$.isArray() 判断某个参数是否为数组。

 　　$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。

 　　$.isFunction() 判断某个参数是否为函数。

 　　$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。

 　　$.support() 判断浏览器是否支持某个特性。

随机推荐

  1. Java实现时间动态显示方法汇总

    这篇文章主要介绍了Java实现时间动态显示方法汇总,很实用的功能,需要的朋友可以参考下 本文所述实例可以实现Java在界面上动态的显示时间.具体实现方法汇总如下: 1.方法一 用TimerTask: ...

  2. MySQL为什么需要一个主键

    主键 表中每一行都应该有可以唯一标识自己的一列(或一组列). 一个顾客可以使用顾客编号列,而订单可以使用订单ID,雇员可以使用雇员ID 或 雇员社会保险号. 主键(primary key) 一列(或一 ...

  3. Java经典实例：正则表达式，找到匹配的文本

    import java.util.regex.Matcher; import java.util.regex.Pattern; /** * Created by Frank */ public cla ...

  4. android学习日记04--开发中的通用细节

    1.android中的计量单位 px (pixels)(像素):是屏幕的物理像素点,与密度相关,密度大了,单位面积上的px会比较多.通常不推荐使用这个 pt(磅):1/72英寸,也较少用 in(英寸) ...

  5. 解决kindeditor编辑器中使用百度地图时不能拖动坐标的问题

    覆盖\plugins\baidumap文件夹下的map.html代码即可 <!doctype html><html><head>    <meta http- ...

  6. 正确分析结构使用正确的HTML标签。CSS样式写一起。

    在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...

  7. supervisor 守护进程

    一.supervisor 安装 1.yum -y install epel-release 2.yum -y install supervisor 二.supervisor 配置文件详解 三.supe ...

  8. 神坑，使用gcc对opencv重编译

    工具 cmake-3.9.1 opencv-3.3.0  gcc-6.3.0 前几天为了装eclipse的CDT,把minggw里的make改了,今天突然想学opencv,可是只找到了vc版本,千辛万 ...

  9. Linux内核分析（第四周）

    扒开系统调用的三层皮(上) 一.用户态.内核态.中断 (上周课件有学习到) 1.地址空间是一个显著的标志(是逻辑地址,不是物理地址) 2.CPU每条指令的读取都是通过cs:eip这两个寄存器:0xc0 ...

  10. Ubuntu系统下在github中新增库的方法

    上一篇介绍了Ubuntu16.04系统下安装git的方法.本博客介绍怎么在github上怎么新建库. 如图 root@ranxf:/home/ranxf/learnGit/ranran_jiekou# ...

相关文章