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

2022-08-31 19:16:09

一、为什么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. jasoncpp读取jason数据如何判断某一字段是否存在

    如标题,使用json_data.isMember("XXX")来判断 jason_data["XXX"].isNull()是用来判断“XXX”字段后边的值是否为 ...

  2. oracle异常写法

    EXCEPTION WHEN OTHERS THEN V_ALARM_MSG := SQLERRM; --错误日志表 V_SQLTEXT := 'CALL DD_PAK.ERRLOG(:V1,:V2, ...

  3. spring&lowbar;150806&lowbar;hibernate&lowbar;non&lowbar;transaction

    添加hibernate的相关jar包! 实体类: package com.spring.model; import javax.persistence.Entity; import javax.per ...

  4. haproxy&period;cfg

    # this config needs haproxy-1.1.28 or haproxy-1.2.1 global log 127.0.0.1 local0 log 127.0.0.1 local1 ...

  5. jQuery 中的防冲突（noConflict）机制

    许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个.在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,w ...

  6. Windows Latex 中日文字体设置例

    中文字体例: \documentclass[CJK]{article} \usepackage{CJKutf8} \newcommand{\songti}{\CJKfamily{song}} % 宋体 ...

  7. U盘安装Win7系统教程

    U盘安装系统教程: http://wiki.jd.com/knowledge/6699.html

  8. centos 7 破解密码

    CentOS 7 root密码的重置方式和CentOS 6完全不一样,CentOS 7与之前的版本6变化还是比较大的,以进入单用户模式修改root密码为例. 1.重启开机按esc   2.按e     ...

  9. Java 8 特性 —— 默认方法和静态方法

    Java 8 新增了接口的默认方法.简单说,默认方法就是接口可以有实现方法,而且不需要实现类去实现其方法.我们只需在方法名前面加个 default 关键字即可实现默认方法. 为什么要有这个特性?之前的 ...

  10. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

上一篇：POJ 3278 经典BFS


下一篇：ASP.NET MVC 创建控制器类过程