您的当前位置:首页jq源码中绑在$,jQuery上面的方法
广告

jq源码中绑在$,jQuery上面的方法

2023-11-30 来源:六三科技网

1.当我们用$符号直接调用的方法。在jQuery内部是如何封装的呢?有没有好奇心?

// jQuery.extend 的方法 是绑定在 $ 上面的。jQuery.extend( { //expando 用于决定当前页面的唯一性。 /D/ 非数字。其实就是去掉小数点。 expando: "jQuery" + ( version + Math.random() ).replace( /D/g, "" ), // Assume jQuery is ready without the ready module isReady: true, // 报错的情况 error: function( msg ) { throw new Error( msg ); }, // 空函数 noop: function() {}, // 判断是不是一个函数 isFunction: function( obj ) { return jQuery.type( obj ) === "function"; }, //判断当前对象是不是window对象。 isWindow: function( obj ) { return obj != null && obj === obj.window; }, //判断obj是不是一个数字 当为一个数字字符串的时候页可以的哦 比如 "3.2" isNumeric: function( obj ) { var type = jQuery.type( obj ); return ( type === "number" || type === "string" ) && // 这个话的意思就是要限制 "3afc 这个类型的 字符串" !isNaN( obj - parseFloat( obj ) ); }, //判断obj 是不是一个对象 isPlainObject: function( obj ) { var proto, Ctor; // obj 存在且 toString.call(obj) !== "[object object]"; 就肯定不是一个对象了。 if ( !obj || toString.call( obj ) !== "[object Object]" ) { return false; } //getProto获取原型链上的对象。 getProto = Object.getPrototypeOf(); 获取原型链上的属性 proto = getProto( obj ); // getProto(Object.create(null)) -> proto == null 这种情况也是对象 obj = Object.create(null); if ( !proto ) { return true; } // obj 原型上的属性。 proto 上面有 constructor hasOwn = hasOwnPrototypeOf('name') 判断某个对象自身是否有 这个属性 // Ctor: 当 proto 自身有constructor的时候, 取得constructor 这个属性的value 值。 其实就是 obj的构造函数。 type -> function Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor; //Ctor 类型为“function” 且 为构造函数类型吧。 这个时候 obj 也是对象。 我的理解 这个时候,obj = new O(); 其实就是某个构造函数的实列 return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString; }, //判断obj是不是一个空对象 isEmptyObject: function( obj ) { //var o = {} var name; for ( name in obj ) { return false; } return true; }, //获取js的数据类型。 其实方法就是 Object.prototype.toString.call(xx); xx 就是要检测的某个变量。 得到的结果是 "[object object]" "[object array]" ... type: function( obj ) { //除去null 和undefined 的情况。 返回本身。 也就是 null 或者 undefined. 因为 undefined == null -> true。 if ( obj == null ) { return obj + ""; } // 这个跟typeof xx(某个变量 ) -> undefined object,number,string,function,boolean(typeof 一个变量只能得到6中数据类型) /** * 1. obj 是一个对象 或者 obj 是一个 function 那么 直接class2type[toString.call(obj)] 这个话其实是在class2type 中根据key值找到对应的value。 * class2type = { * [object object]: "object", * [object array]:"array" ... * * } * 这样类似的值。 * class2type[toString.call(obj)] || "object" 连起来读就是,在class2type 中找不到类型的值,就直接返回 object * * 2.或者返回 typeof obj。的数据类型。 -> number, string,boolean 基本数据了类型吧。 (js 中有5中基本数据类型。 null ,undefined,number,string,boolean) */ return typeof obj === "object" || typeof obj === "function" ? class2type[ toString.call( obj ) ] || "object" : typeof obj; }, // 翻译为:全局的Eval函数。 说句实话。没有看懂这个是拿来干嘛的。 DOMval(); /** * * @param code * function DOMEval( code, doc ) { doc = doc || document; var script = doc.createElement( "script" ); script.text = code; doc.head.appendChild( script ).parentNode.removeChild( script ); } 创建一个 script标签, 或remove 这个标签。 目前没有搞懂拿来干嘛用。 */ globalEval: function( code ) { DOMEval( code ); }, // 这个是用来转为 驼峰的用函数吧。 ms- 前缀转为驼峰的吧。 camelCase: function( string ) { return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); }, // each 方法。 $.each(obj,function(){}); 用于循环数组和对象的方法。 each: function( obj, callback ) { var length, i = 0; if ( isArrayLike( obj ) ) { // 当obj 是一个数组的时候执行这个方法 length = obj.length; for ( ; i < length; i++ ) { /*当$.each(obj,function(i,item){ if( i = 2){ return false。 } }) 当$.each(obj,function(){}) 中的匿名函数中纯在 return false; 的时候跳出循环。 */ if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } else { // for in 循环对象。 callback.call(obj[i],i,obj,[i]) === false 跟数组循环是一道理 for ( i in obj ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } return obj; }, // 去掉 text 两边的空白字符 $("input").val().trim() 一个道理吧。 text + "" 其实是为了把 text 转成一个字符串。 类型这种情况 123.replace(rtrim,"") 是会报错的。 // 如果 123 + "" 其实变成了 "123" trim: function( text ) { return text == null ? "" : ( text + "" ).replace( rtrim, "" ); }, // $.makeArray 其实是将类数组转换成数组 对象。 /** * * * @param arr * @param results * @returns {*|Array} * 比如: var b = document.getElementsByTagName("p"); b.reverse() 。 用b 来调reserver() 方法会直接报错的。因为这个时候b是类数组对象。 * var a = $.makeArray(document.getElementsByTagName("p")); a.reverser()。 这样就不会报错了。 * */ makeArray: function( arr, results ) { var ret = results || []; if ( arr != null ) { if ( isArrayLike( Object( arr ) ) ) { jQuery.merge( ret, typeof arr === "string" ? [ arr ] : arr ); } else { push.call( ret, arr ); } } return ret; }, /** * * @param elem 要检测的值 * @param arr 待处理的数组 * @param i 从待处理的数组的第几位开始查询. 默认是0 * @returns {number} 返回 -1 。表示arr 中没有该value值, 或者该值的下表 * $.inArray()。 * */ inArray: function( elem, arr, i ) { //如果arr 为 null 直接返回 -1 。 /** * 对indxOf.call(arr,elem,i);方法的解释 * var s = new String(); * eg: var indexOf = s.indexOf; 用indexOf 变量来存字符串中的 indexOf的方法。 * indexOf.call(arr,elem,i) ; 其实就是把字符串的indexOf 继承给数组,并且传递 elem 和 i 参数。 * 更简单一点其实可以理解为: arr.indexOf(elem,i); */ return arr == null ? -1 : indexOf.call( arr, elem, i ); }, // 合并数组 /** * * @param first 第一个数组 * @param second 第二个数组 * @returns {*} */ merge: function( first, second ) { var len = +second.length, //第二个数组的长度 j = 0, //j 从0 开始 i = first.length; //第一个数组的长度 for ( ; j < len; j++ ) { first[ i++ ] = second[ j ]; } // 其实用push 应该可以吧。 first.length = i; return first; }, /** * * @param elems 带过滤的函数 * @param callback 过滤的添加函数 * @param invert 来决定 $.grep(arr,callback) 返回来的数组,是满足条件的还是不满足条件的。 true 是满足条件的。 false 是不满足条件的。 * @returns {Array} * * 返回一个数组。 */ grep: function( elems, callback, invert ) { var callbackInverse, matches = [], i = 0, length = elems.length, callbackExpect = !invert; // Go through the array, only saving the items // that pass the validator function for ( ; i < length; i++ ) { callbackInverse = !callback( elems[ i ], i ); if ( callbackInverse !== callbackExpect ) { matches.push( elems[ i ] ); } } return matches; }, /** * * @param elems 带处理的数组 * @param callback 回调函数 * @param arg 这参数用在callback回调函数的。 * callback(elems[i],i,arg) * @returns {*} * * $.map(arr,function(item,i,arg){},arg) * 将一个数组,通过callback 转换成另一个数组。 * eg: var b = [2,3,4]; * var a = $.map(b,function(item,i,arg){ * return item + arg; * },1) * console.log(a) [3,4,5] */ map: function( elems, callback, arg ) { var length, value, i = 0, ret = []; // Go through the array, translating each of the items to their new values if ( isArrayLike( elems ) ) { length = elems.length; for ( ; i < length; i++ ) { value = callback( elems[ i ], i, arg ); if ( value != null ) { ret.push( value ); } } // Go through every key on the object, } else { for ( i in elems ) { value = callback( elems[ i ], i, arg ); if ( value != null ) { ret.push( value ); } } } // Flatten any nested arrays return concat.apply( [], ret ); }, // 对对象的一个全局标志量吧。 没搞懂具体用处 guid: 1, // Bind a function to a context, optionally partially applying any // arguments. /** * * @param fn * @param context * @returns {*} * * es6也提供了 new Proxy() 。对象。 */ proxy: function( fn, context ) { var tmp, args, proxy; //当content是字符串的时候 if ( typeof context === "string" ) { tmp = fn[ context ]; context = fn; fn = tmp; } // Quick check to determine if target is callable, in the spec // this throws a TypeError, but we will just return undefined. if ( !jQuery.isFunction( fn ) ) { return undefined; } // Simulated bind args = slice.call( arguments, 2 ); proxy = function() { return fn.apply( context || this, args.concat( slice.call( arguments ) ) ); }; // Set the guid of unique handler to the same of original handler, so it can be removed proxy.guid = fn.guid = fn.guid || jQuery.guid++; return proxy; }, //$.now 当前时间搓 now: Date.now, // jQuery.support is not used in Core but other projects attach their // properties to it so it needs to exist. /** * 检测浏览器是否支持某个属性 * $.support.style */ support: support} );

小编还为您整理了以下内容,可能对您也有帮助:

jQuery 的事件委托方法有哪些?

jQuery 的事件委托方法是在父元素上绑定事件,而不是在每个子元素上绑定事件。这样可以提高性能,因为只需要绑定一次事件,就可以处理所有的子元素事件。jQuery 支持三种事件委托方法:on、live 和 delegate。其中,on 是 jQuery 1.7 之后引入的,支持事件绑定的全部功能;live 是在 DOM 加载完成后立即执行的,不支持动态添加的元素;delegate 是在事件发生时委托给一个指定的元素来处理事件 。

这三种方法都可以实现事件委托,但是使用场景不同。如果你需要处理动态添加的元素,可以使用 live() 方法;如果你需要在所有元素上绑定同一个事件,可以使用 on() 方法;如果你需要在特定的父元素上绑定子元素的事件,可以使用 delegate() 方法 。

如何解决Jquery库及其他库之间的$命名冲突_jquery

首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生。比如说:$('#xmlas')和JQuery('#xmlas') 虽然在写法上不同,但在实际上却是完全等同的。

要想解决这个冲突,其实最简单的方法就是使用不同的名称来命名,或者让执行代码认为是不同的命名空间即可。

一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:

代码如下:

test---prototype

test---jQuery

jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。

jQuery("p").click(function(){

alert( jQuery(this).text() );

});

});

$("pp").style.display = 'none'; //使用prototype

二、jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:

代码如下:

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

jQuery(function(){ //使用jQuery

jQuery("p").click(function(){

alert( jQuery(this).text() );

});

});

$("pp").style.display = 'none'; //使用prototype

代码二

代码如下:

var $j = jQuery.noConflict(); //自定义一个比较短快捷方式

$j(function(){ //使用jQuery

$j("p").click(function(){

alert( $j(this).text() );

});

});

$("pp").style.display = 'none'; //使用prototype

代码三

代码如下:

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

jQuery(function($){ //使用jQuery

$("p").click(function(){ //继续使用 $ 方法

alert( $(this).text() );

});

});

$("pp").style.display = 'none'; //使用prototype

代码四

代码如下:

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

(function($){ //定义匿名函数并设置形参为$

$(function(){ //匿名函数内部的$均为jQuery

$("p").click(function(){ //继续使用 $ 方法

alert($(this).text());

});

});

})(jQuery); //执行匿名函数且传递实参jQuery

$("pp").style.display = 'none'; //使用prototype

/*********************************************************************/

jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去

jQuery.noConflict();

});

除了上面的方法之外,我们还可以采用第二种方法来解决冲突的问题,那就是最笨但最有效的解决方法:用自定义的命名空间来避免冲突。

比如说需要的项目名称为xmlas,那么我们原来的代码:

代码如下:

$('contentArea').show()

就可以写成以下这种形式:

代码如下:

XMLAS('contentArea').show()

3.在jquery代码中,当遇到冲突的时候我们可以使用$符号,这需要我们在ready事件中添上以下代码:

代码如下:

jQuery(document).ready(function($) {

//你在这里可以放心的使用$了

});

当然,您也可以简写成下面的形式:

代码如下:

jQuery(function($){

//这里为使用$的代码

});

由此,根据第一个方法来实现的完整代码如下:

代码如下:

//jquery库与其他库冲突的完整解决办法 $.noConflict();

jQuery(function($) {

//使用了$的jquery代码

});

//这里是你的其他js库代码

当然,你也可以对上面的完整代码进行一步的简化,简化代码如下:

代码如下:

//简化后的代码

$.noConflict()(function(){

//这里是你的带$的jquery代码

});

//这里是其他库的代码

针对 jQuery 项目的优化方法有哪些?

jQuery 项目的优化方法有很多,以下是一些常见的方法:

1. 总是使用 ID 去寻找 element。在 jQuery 中最快的选择器是 ID 选择器,因为它直接映射为 JavaScript 的 getElementById() 方法。选择多个元素,在我们讨论选择多个元素的时候,我们真正需要知道的是 DOM 的遍历和循环才是性能低下的原因。为了尽量减少这种情况的发生,我们可以使用 jQuery 的 $.each() 方法来遍历数组,而不是使用 for 循环。

2. 缓存 jQuery 对象。将你经常用的元素缓存起来,这样你就可以避免在每次调用时都重新查找这些元素。

3. 减少 DOM 操作次数。DOM 操作是非常耗时的,因此我们应该尽量减少它们的次数。如果你需要多次修改同一个元素,那么你可以将它缓存起来,然后再进行修改。

4. 使用局部变量。在使用 jQuery 时,我们应该尽量使用局部变量,因为全局变量会比其他变量更加耗时。

5. 避免使用动画效果。动画效果会占用大量的 CPU 资源,因此我们应该尽量避免使用它们。

6. 压缩代码。压缩代码可以减少文件大小,从而提高页面加载速度。

jquery有哪些追加元素的方法

这次给大家带来jquery有哪些追加元素的方法,jquery追加元素的注意事项有哪些,下面就是实战案例,一起来看一下。

一、after()和before()方法的区别

after()——其方法是将方法里面的参数添加到jquery对象后面去;

如:A.after(B)的意思是将B放到A后面去;

before()——其方法是将方法里面的参数添加到jquery对象前面去。

如:A.before(B)的意思是将A放到B前面去;

二、insertAfter()和insertBefore()的方法的区别

其实是将元素对调位置;

可以是页面上已有元素;也可以是动态添加进来的元素。

如:A.insertAfter(B);即将A元素调换到B元素后面;

如<span>CC</span><p>HELLO</p>使用$("span").insertAfter($("p"))后,就变为<p>HELLO</p><span>CC</span>了。两者位置调换了

三、append()和appendTo()方法的区别

append()——其方法是将方法里面的参数添加到jquery对象中来;

如:A.append(B)的意思是将B放到A中来,后面追加,A的子元素的最后一个位置;

appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

如:A.appendTo(B)的意思是将A放到B中去,后面追加,B的子元素的最后一个位置;

四、prepend()和prependTo()方法的区别

append()——其方法是将方法里面的参数添加到jquery对象中来;

如:A.append(B)的意思是将B放到A中来,插入到A的子元素的第一个位置;

appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

如:A.appendTo(B)的意思是将A放到B中去,插入到B的子元素的第一个位置;

例子

1、insert局部方法

/**

* 在父级元素上操作DOM

* @param {Object} parent 父级元素,可以是element,也可以是Yquery对象

* @param {String} position 位置: beforebegin/afterbegin/beforeend/afterend

* @param {*} any 任何:string/text/object

* @param {Number} index 序号,如果大于0则复制节点

* @return {Undefined}

* @version 1.0

* 2013年12月2日17:08:26

*/

function _insert(parent, position, any, index) {

if ($.isFunction(any)) {

any = any.call(parent);

}

// 字符串

if ($.isString(any)) {

if (regTag.test(any)) {

parent.insertAdjacentHTML(position, any);

} else {

parent.insertAdjacentText(position, any);

}

}

// 数字

else if ($.isNumber(any)) {

parent.insertAdjacentText(position, any);

}

// 元素

else if ($.isElement(any)) {

parent.insertAdjacentElement(position, index > 0 ? any.cloneNode(!0) : any);

}

// Yquery

else if (_isYquery(any)) {

any.each(function() {

_insert(parent, position, this);

});

}

}2、append、prepend、before、after

$.fn = {

/**

* 追插

* 将元素后插到当前元素(集合)内

* @param {String/Element/Function} any

* @return this

* @version 1.0

* 2013年12月29日1:44:15

*/

append: function(any) {

return this.each(function(index) {

_insert(this, 'beforeend', any, index);

});

},

/**

* 补插

* 将元素前插到当前元素(集合)内

* @param {String/Element/Function} any

* @return this

* @version 1.0

* 2013年12月29日1:44:15

*/

prepend: function(any) {

return this.each(function(index) {

_insert(this, 'afterbegin', any, index);

});

},

/**

* 前插

* 将元素前插到当前元素(集合)前

* @param {String/Element/Function} any

* @return this

* @version 1.0

* 2013年12月29日1:44:15

*/

before: function(any) {

return this.each(function(index) {

_insert(this, 'beforebegin', any, index);

});

},

/**

* 后插

* 将元素后插到当前元素(集合)后

* @param {String/Element/Function} any

* @return this

* @version 1.0

* 2013年12月29日1:44:15

*/

after: function(any) {

return this.each(function(index) {

_insert(this, 'afterend', any, index);

});

}

};3、prependTo、prependTo、insertBefore、insertAfter

这些带后缀的与上面的不同的是,返回的结果不一样。如:

$('#demo').append('<a/>');

// => 返回的是 $('#demo')

$('<a/>').appendTo($('#demo'));

// => 返回的是$('a');因此两者的关系只是返回结果不一样,其他的都一样,可以这么解决:

_each({

appendTo: 'append',

prependTo: 'prepend',

insertBefore: 'before',

insertAfter: 'after'

}, function(key, val) {

$.fn[key] = function(selector) {

this.each(function() {

$(selector)[val](this);

});

return this;

};

});jquery 追加元素的方法(append prepend after before 的区别)

append() 方法在被选元素的结尾插入内容。

prepend() 方法在被选元素的开头插入内容。

after() 方法在被选元素之后插入内容。

before() 方法在被选元素之前插入内容。

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>

<p class="testp">

<ul>

<li>第一个li标签</li>

</ul>

</p>

<script>

//append

$('.testp ul').append('<li>append 插入的li</li>');

//prepend

$('.testp ul').prepend('<li>prepend 插入的li</li>');

//after

$('.testp ul').after('<li>after 插入的li</li>');

//before

$('.testp ul').before('<li>before 插入的li</li>');

</script>效果图

html结构图

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

jquery如何删除选中的css样式

jQuery怎样获取同级元素

六三科技网还为您提供以下相关内容希望对您有帮助:

Jquery中bind和live的区别

1、target.click(function(){});2、target.bind("click",function(){});3、target.live("click",function(){});live方法,只有在click事件发生的时候,才会去检测绑定事件的对象target是否存在,所以live方法可以实现后来...

jquery中有哪些基础事件方法

一.绑定事件 jQuery 通过.bind()方法来为元素绑定这些事件。形式:bind(type, [data], fn)参数:type 表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个...

jquery如何封装插件jquery封装插件的方法

1.jQuery.extend()方法有一个重载。 JQuery.extend(object),用于扩展JQuery类本身的参数,也就是说在jQuery类/naming空之间添加新的函数,或者调用静态方法。比如jQuery内置的ajax方法都是用jQuery.ajax()调用的,有点像“类名”的静态方法。

jquery如何绑定一个已有的方法并传递参数

a["b"]()//反射调用 所以在组件里可以写个属性(比如propFuncname),返回那个方法的名字的字符串,如"abc"然后在匿名函数里找到组件的引用,通过上述属性(propFuncname)得到方法字符串,再用反射调用之。这样可以保证,通过...

jquery $('#btn').click与$("#btn").live("click",function()有什么区...

1、延时绑定事件功能不同:jquery $('#btn').click在文档流中,后续通过脚本动态添加的元素(符合 id="#btn"),是没有绑定click事件的。("#btn").live("click",function()后续通过脚本动态添加的元素(符合 id="#btn...

jQuery中的bind()函数跟on()函数有什么区别呢?

(1)是否支持selector这个参数值。由于javascript的事件冒泡特性,如果在父元素上注册了一个事件处理函数,当子元素上发生这个事件的时候,父元素上的事件处理函数也会被触发。如果使用on的时候,不设置selector,那么on与bind...

jquery文档操作都有哪些函数

jQuery 代码:("img").attr("src","test.jpg");作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。在控制HTML标记上是必备的工具...

jQuery中bind函数用法

而appendChild()不是jquery的方法,而是javascript原生的方法。append和appendChild的关系是:其实几乎一样,append就是调用appendChild实现的,只是在append前,做一个简单判断。下面贴下jquery的源代码:append: function() { retu...

jquery中加$是什么意思

是 JQuery 常用的一个回传函数,定义为 "选取" 英文是 selector 的缩写 例子︰.function();就是 选取 JQuery 定义的 function() 执行 ('input')就是 选取 HTML 当中全部的 input 标签 ('#abc')就是 选取 HTML ...

jquery中$的疑惑

首先先纠正你一个错误, 第三种情况的写法是错误的, 在jq中没有这种用法, 在整个js中都没有这种用法, 我想你应该是用错了括号, $[],这应该才是你想问的情况.先说在js中这三种用法的本质:这是函数调用方式, 也就是...

Top