每日学习心得:$.extend()方法和(function($){...})(jQuery)详解

1.    JS中substring与substr的区别

之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的。这样就直接按照在C#中使用Substring的方式,直接在js中用了substring,在实际的项目中,有时候能得到正确的结果,但是有时候得到的结果却让人匪夷所思,后来仔细的调试跟踪之后才发现,原来是Js中substring的方法跟C#中的Substring方法不一样。关于C# 中的字符串截取方法已经很简单了,这里就不再叙述了。主要讲一个js中的substring方法,顺便再讲一下substr方法。

Substring:

该方法可以有一个参数也可以有两个参数。

l  一个参数:

示例: var str=“Olive”;

str.substring(3);

结果:“ve”

说明:当substring只有一个参数时,参数表示从字符串的第几位开始截取,

直截取到字符串结尾。

l  两个参数:

示例:var str=“Olive”;

1)       Str.substring(3,4);

2)       Str.substring(3,2);

结果:1) “v”  2) 0

说明:当substring有两个参数时,第一个参数表示从字符串的第几位开始截取,第二个参数表示截取到字符串的第几位。这点是个C#中字符截取不同的一点,所以才会导致不同的结果。

Substr:

该方法也可以有一个或两个参数。

l  一个参数:

说明:substr一个参数时,作用跟substring方法一个参数时一样。

l  两个参数:

示例:var str=“Olive”;

1)       Str.substr(3,2);

2)       Str.substr(3,4);

结果:1) “ve” 2) “ve”

说明:substr有两个参数时,第一个参数表示从字符串的第几位开始截取,第二个参数表示截取多少位字符串。这点跟C#中字符截取相同的,所以在以后的使用中,如果想要避免出现截取的问题最好还是使用substr。

2 $.extend()

因为项目中有些地方看到有用到这个方法,当时也不知道是什么意思,见的多了就想了

解一下。原来这个方法还是挺有用的,多用在编写插件,当然,它本身也有一些重载原型。

2.1 extend(result,item1,item2…..)

这里这个方法主要用来合并,将所有的参数项都合并result中,并返回result,但是这

样就会破坏result的结构。

2.2 extend({},item1,item2,……)

用这个方法,可以将所得的结果全部合并在{}中,并返回,而且还不会破坏原有的项的结构。

示例:

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果:

Result={name:”Momo”,age:23,sex:”gril”};

说明:

以上的结果表明extend方法将所有的项都合并到了{}中,但是,细心一点就会发现,其中item1中的name:“Momo” 将item中的name:“olive”给覆盖了,这是怎么回事?请接着往下看。

2.3 extend(bool,{},item1,item2….)

Extend方法还有带bool型参数的重载。

bool型参数为true表示深拷贝,为false时表示浅拷贝。具体可以通过一下示例来说明:

示例:

var item={name:“olive”,age:23,address{provice:”河南”,city:”郑州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

结果:

Result={name:“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name:“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明:

以上结果说明,当参数为ture时,即为深拷贝,当子项item1中的子项有与item中的子项相同属性的值不一样时,item1中子项的值会将item子项中的值给覆盖,当子项item1的属性跟item中的属性不同时,会与item进行合并。

当参数为false时,子项item1中的子项中与item中的子项属性相同时,item1中子项的属性值会将item中的值给完全覆盖。

2.4 $.extend(item)

该方法是将item合并到Jquery的全局对象中去,相当于为Jquery全局对象添加了一个

静态方法(对应这里的静态方法,当然还有实例方法,在后边有介绍)。

示例:

$.extend({SayHello:function(value){alert(“hello “+value);}});

这样写过之后,就可以直接调用SayHello方法:

$.SayHello(“Olive”);

说明:该方法相当于为Jquery类添加了新的方法。

2.5 $.fn.extend(item)

上边提到的$.extend(item)说是为Jquery类添加了静态方法,那么这里的$.fn.extend(item

)就是为每一个实例添加一个实例方法了。

示例:

$.fn.extend({hello:function(value){alert(“hello “+value);}});

这样写过之后,在获取每一个示例之后,都可以调用该方法:

$(“#id”).hello(“Olive”);

3.(function($){….})(jQuery)

初次看到这种写法时,一头雾水,不知所云。在网上查找了一些资料之后才有点明白。

我们先看第一个括号里边的内容:function($){….},这不就是一个匿名的函数吗?但是它的形参比较奇怪,是$,这里主要是为了不与其它的库冲突。

这样我们就比较容易理解第一个括号内的内容就是定义了一个匿名函数,我们在调用函数的时候,都是函数名后边加上括号以及实参,但是由于操作符的优先级我们定义的匿名函数也需要用()括起来。

现在我想大家已经很清楚这句话是什么意思了吧。第一个括号表示定义了一个匿名函数,然后第二个函数表示为该函数传递的参数,整个结合起来意思就是,定义了一个匿名函数,然后又调用该函数,该函数的实参为jQuery。

相当于:function fun($){…};fun(jQuery);

这种方法多用于存放开发的插件,执行其中的代码时,Dom对象并不一定加载完毕。于此相反的是$(function(){}),这种方法在使用时页面的Dom对象已经加载完毕了。事实上该方法的全写是:$(document).ready(function(){});

好了,今天就总结到这里了,主要都是一些跟写插件相关的常用的方法,希望能给大家一些帮助。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-08 17:20:28

每日学习心得:$.extend()方法和(function($){...})(jQuery)详解的相关文章

$.extend()方法和(function($){...})(jQuery)详解

1.    JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的.这样就直接按照在C#中使用Substring的方式,直接在js中用了substring,在实际的项目中,有时候能得到正确的结果,但是有时候得到的结果却让人匪夷所思,后来仔细的调试跟踪之后才发现,原来是Js中substring的方法跟C#中的Substring方法不一样.关于C# 中的字符串截取方法已

$.extend()方法和(function($){...})(jQuery)详解 关于js 的 深入用法。“use strict”

这一次release的内容终于做完了,可以研究一下用到的东西. 以前写js 都是基本的写法, 写个function, 这次看到同事用jquery 加js 写的插件 用了自己不知道的新知识,觉得得有必要学习一下了. 1. "use  strict";   可以在写js 的文件中把这句话放上,不知道是什么意思 ,查了一下,应该是让js写法更严谨,当出现不符合要求的js,系统会报错 看解释给的一个例子  foo = ’aa': 当加了这句话就会报错.  大约就是语法更严谨了. 可以写到fun

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

【转】jquery ajax 方法及各参数详解

在使用jquery的时候,我们经常用到jquery中对ajax的封装,下面对ajax函数的各参数详细说明和讲解,以便更好的理解和使用 $.get(url, data, callback,type) 和 $.post(url, data, callback, type). 1. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() 返回其创建的 XML

【学习笔记】HTML5视频的属性、方法、事件介绍 详解

规划了一下学习路线 HTML5 -> CSS3  -> JS ->综合 7.31日开始,做好笔记做好记录 认真学习. HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement)所以音频文件和视频文件大多数都是一样的,除了标签名称 <video> <audio> HTML视频 大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含

&quot;MindManager&quot;学习iOS系列之&quot;CAAnimation-核心动画&quot;详解,让你的应用“动”起来。

"MindManager"学习iOS系列之"CAAnimation-核心动画"详解,思维导图内展示了CAAnimation-核心动画的大多数基本功能和知识,每个part都有代码讲解,展示出CAAnimation-核心动画的清晰轮廓,编者提供了"JPG"."SWF"."PDF"."Word"."Mmap"格式的源文件供给使用.注意:JPG格式仅为图片总览,SWF格式使用

Python学习教程(Python学习路线):Pandas库基础分析-详解时间序列的处理

Python学习教程(Python学习路线):Pandas库基础分析-详解时间序列的处理 在使用Python进行数据分析时,经常会遇到时间日期格式处理和转换,特别是分析和挖掘与时间相关的数据,比如量化交易就是从历史数据中寻找股价的变化规律.Python中自带的处理时间的模块有datetime,NumPy库也提供了相应的方法,Pandas作为Python环境下的数据分析库,更是提供了强大的日期数据处理的功能,是处理时间序列的利器. 1.生成日期序列 主要提供pd.data_range()和pd.p

算法学习笔记 KMP算法之 next 数组详解

最近回顾了下字符串匹配 KMP 算法,相对于朴素匹配算法,KMP算法核心改进就在于:待匹配串指针 i 不发生回溯,模式串指针 j 跳转到 next[j],即变为了 j = next[j]. 由此时间复杂度由朴素匹配的 O(m*n) 降到了 O(m+n), 其中模式串长度 m, 待匹配文本串长 n. 其中,比较难理解的地方就是 next 数组的求法.next 数组的含义:代表当前字符之前的字符串中,有多大长度的相同前缀后缀,也可看作有限状态自动机的状态,而且从自动机的角度反而更容易推导一些. "前

Jquery详解

目录 jquery 通过jquery改变标签字体颜色 jquery和js对象之间值转化 Jquery基本选择器 Jquery层级选择器 基本筛选器 操作类属性 模太框 表单筛选器 筛选器方法 设置多个css样式: 位置操作: 尺寸: 文本操作 设置值: 属性操作 动态获取属性如用户选择 attr对checkbox和radio进行赋值操作时注意: prop和attr的区别: 文档处理 克隆事件 绑定事件的两种方式: 取消标签自带的事件的两种方式: 悬浮事件: input实时获取可用于验证用户名是否