开发者社区> 范大脚脚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery06 jQuery.extend 给jQuery函数添加、继承 静态方法

简介:
+关注继续查看
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
jQuery.extend({//给jQuery函数添加的静态方法
    
    expando  :  生成唯一JQ字符串(内部)
    noConflict()  :  防止冲突
    isReady  :  DOM是否加载完(内部)
    readyWait  :  等待多少文件的计数器(内部)
    holdReady()  :  推迟DOM触发
    ready()  :  准备DOM触发
    isFunction()  :  是否为函数
    isArray()  :  是否为数组
    isWindow()  :  是否为window
    isNumeric()  :  是否为数字 
    type()  :  判断数据类型
    isPlainObject()  :  是否为对象自变量
    isEmptyObject()  :  是否为空的对象
    error()  :  抛出异常
    parseHTML()  :  解析节点
    parseJSON()  :  解析JSON
    parseXML()  :  解析XML
    noop()  :  空函数
    globalEval()  :  全局解析JS
    camelCase()  :  转驼峰(内部)
    nodeName()  :  是否为指定节点名(内部)
    each()  :  遍历集合
    trim()  :  去前后空格
    makeArray()  :  类数组转真数组
    inArray()  :  数组版indexOf
    merge()  :  合并数组
    grep()  :  过滤新数组
    map()  :  映射新数组
    guid  :  唯一标识符(内部)
    proxy()  :  改this指向
    access()  :  多功能值操作(内部)
    now()  :  当前时间
    swap()  :  CSS交换(内部)
    
});

jQuery.ready.promise = function(){};  监测DOM的异步操作(内部)

function isArraylike(){}  类似数组的判断(内部)
</script>
</head>

<body>
</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

var $ = 123;
var jQuery = 456;
js源码里面有    _jQuery = window.jQuery,_$ = window.$,此时_$ = 123,_jQuery=456
</script>
<script src="jquery-203.js"></script>
<script>

alert( $.expando );//jQuery20308751509357000222
---------------------------------------------------------------------------------
//$()  jQuery()  这2个是jQuery对外提供的接口,其他的库也有$,
var miaov = $.noConflict(true);//miaov就当$来用了
var $ = 123;//要写到下面,写到上面$已经是123,就不能调用noConflict方法了,
miaov(function(){//$(function(){})
    alert($);
    alert( jQuery );
});
---------------------------------------------------------------------------------
$(function(){});//等dom(标签)加载完就走,<img>标签是先加载标签然后加载图片资源,这个方法等标签dom加载完就走,先于window.onload。dom加载完会触发原生的DOMContentLoaded事件。
/*$(function(){})在init方法中调用的是rootjQuery.ready(function(){})就是$(document).ready(function(){})就是$().ready(function(){})(不同于$.ready(),前者是实例的方法,后者是类的静态方法,方法的实现不一样),
ready: function( fn ) {
    jQuery.ready.promise().done( fn );
    return this;
},
jQuery.ready.promise()创建了一个延迟对象,等到时机执行fn函数,异步操作,
jQuery.ready.promise()最终都是调的$.ready(),
$.ready()最终走readyList.resolveWith( document, [ jQuery ] );然后触发函数fn执行。
*/

window.onload = function(){//等页面中所有东西都加载完,才走这里
};

-----------------------------------------------------------------------

$(function( arg ){
    alert(arg);//jQuery函数
});


$(document).ready(function(){
});

$(document).on('ready',function(){
    alert(123);
});
------------------------------------------------------------------
$.holdReady(true);//推迟
$(function(  ){
    alert(123);//不弹出来
});
$.holdReady(true);//释放推迟
---------------------------------------------------------------------
readyList.resolve();


---------------------------------------------------------------------

$.getScript('a.js',function(){//动态加载js,异步加载,有可能alert(2)先于a.js加载完
});
$(function(){
    alert(2);
});
--------------------------------------------------------------------------
$.holdReady(true);
$.getScript('a.js',function(){//动态加载js,异步加载
    $.holdReady(false);//a.js加载完后回调函数执行,释放hold,保证先加载a.js,然后弹出alert(2)
});
$(function(){
    alert(2);
});
----------------------------------------------------------------------
$.holdReady(true);

$.getScript('b.js',function(){
    $.holdReady(false);
});

$.holdReady(true);

$.getScript('c.js',function(){
    $.holdReady(false);
});

---------------------------------------------------------------------

</script>
</head>

<body>
<div>aaaaa</div>
<img src="">
</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>

function show(){
}
alert( $.isFunction([]) );
alert( typeof alert );//低版本是object,高版本是function

alert( isFunction(alert) );
function isFunction(fn){ //jquery提供的兼容方法
       
        if( !fn )
            return false;
        var s   = "toString",
            v   = "valueOf",
            t   = typeof fn[s] === "function" && fn[s],
            o   = typeof fn[v] === "function" && fn[v],
            r;
        if( t )
            delete fn[s];
        if( o )
            delete fn[v];
        r   = typeof fn !== "string" && !(fn instanceof String) && !fn.nodeName && fn.constructor != Array && /^[\s[]?function/.test(fn + "");
        if( t )
            fn[s]   = t;
        if( o )
            fn[v]   = o;
        return r;
        
}


alert( Array.isArray([]) );

alert( $.isWindow(window) );

alert( null == null );//true
alert(undefined == null);//true

var a = 10;
window.a = 10;

window.open();//window是浏览器窗口

alert( typeof NaN );//number

alert( $.isNumeric(123) );

alert( isFinite( Number.MAX_VALUE + Number.MAX_VALUE ) );


var a = new Date;
alert( typeof a );//原生typeof对于复杂类型都是object,
alert( $.type(a) );//时间:Date,数组:array,'ss':string,{}:object,null:null


alert( {}.toString.call([]));//[object Array]
alert( {}.toString.call([]) =='[object Array]' );
alert( {}.toString.call(new Date) );//
alert( {}.toString.call(111) );//[object Number]
alert( {}.toString.call('111') );//[object String]
alert( $.type(undefined) );  //'undefined'
alert( {}.toString.call(function f(){}) );//[object Function]
alert( $.type([]) );  //'[object Array]' -> array

</script>
</head>

<body>
</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/6906731.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Infinite Scroll - jQuery & WP 无限滚动插件
  无限滚动(Infinite Scroll)也称为自动分页、滚动分页和无限分页。常用在图片、文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容。Infinite Scroll  这款 jQuery & WordPress 无限滚动插件可以帮助你轻松实现这个效果。
927 0
jQuery验证插件
原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能     验证插件(validate.js),是一款验证常规表单数据合法性的插件。
1111 0
SlidesJS - 老牌的响应式 jQuery 幻灯片插件
  SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件。支持循环、自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果。
799 0
Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
  Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本。目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:  16个独特的过渡效果  简洁和有效的标记  加载参数设置 ...
1596 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1228 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1345 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载