首页 > 代码库 > jQuery扩展工具方法

jQuery扩展工具方法

2024-08-07 05:06:56   223人阅读

共享学习Jquery源码的一些东西
jQuery.extend({
 
expando  :  生成唯一JQ字符串(内部)
noConflict()  :  防止冲突
----------------------------------------------
isReady  :  DOM是否加载完(内部)
        $(function(){});
        rootjQuery.ready();=>$(doucment).ready(function(){});=>$().ready();=>jQuery.ready.promise().done(fn);//延迟对象==>$.ready();
        DOMContentLoaded
        window.onload=function(){};
----------------------------------------------
readyWait  :  等待多少文件的计数器(内部)
----------------------------------------------
holdReady()  :  推迟DOM触发
            a.js={<script>alert(1)</script>}
$.holdReady(true);
$.getScript("a.js",function(){
    $.holdReady(false);
});
alert(2);
---------------------------------------
ready()  :  准备DOM触发
--------------------------------------------
isFunction()  :  是否为函数
            alert(typeof alert);
IE8以前返回Object
---------------------------------
isArray()  :  是否为数组
          Array.isArray();
--------------------------------------
isWindow()  :  是否为window
          alert($.isWindow(window));=>true
          window作用：1.全局对象
                                   2.浏览器窗口
---------------------------------------
isNumeric()  :  是否为数字 
          alert(typrof 123);=>true
          alert(typeof NaN) ;=>true
           alert(isNumeric(123));=>true
            alert(isNumeric(NaN));=>false
            isFinite(Number.MAX_VALUE+1);//有限数字=>false
            isFinite(123123123);=>true    
---------------------------------------
type()  :  判断数据类型
        var a="Hello";=>String    
        var b=[];=>Array
        var c={};=>json
        var d=new Date();=>date
    alert({}.toString.call([]))=>[object array]
原生的js区分不了json，date，数组
--------------------------------------------
isPlainObject()  :  是否为对象自变量    
   （ 1.不是Object 2.Dom节点 3.Window）=>false;
   （constructor&&Object.prototype,"isprototype"）;
    var obj={};=>true
    var obj= new Object();=>true;
    var obj=[];=>false;
----------------------------------------------
isEmptyObject()  :  是否为空的对象
            var obj=null;
            var obj={};
            var obj=[];
            function aaa(){}
            var obj=new  aaa();
            $.isEmptyObject(obj)=>true
    ++++++++++++++++++++
        for(name  in  object ){}
        系统自带得 循环不到
----------------------------------------------
error()  :  抛出异常
          $.error("这是错误");
           便签
-----------------------------------------------
parseHTML()  :  解析节点
var str ="<li></li><li></li><script><\/script>";       
 $.parseHTML(str,documrnt,true);==>[<li>,<li>,<script>]
$.parseHTML(str,documrnt,false);==>[<li>,<li>]
$("<li></li>")=>$.parseHTML();

核心创建DOM：jQuery.buildFragment();
-----------------------------------------------
parseJSON()  :  解析JSON
var str=‘{"name":"Hello"}‘;
$.parseJSON(str);支持严格json格式
JSON.parse和eval；
JSON.stringify();【Json=>String】
------------------------------------------------
parseXML()  :  解析XML
<script>
var xml = "<rss version=‘2.0‘><channel><title>RSS Title</title></channel></rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "title" );
// Append "RSS Title" to #someElement
$( "#someElement" ).append( $title.text() );
// Change the title to "XML Title"
$title.text( "XML Title" );
// Append "XML Title" to #anotherElement
$( "#anotherElement" ).append( $title.text() );
</script>
new DOMParser().parseFromString(data,"text/xml");支持IE8以上
<parsererror>错误信息</parsererror>
ActiveXObject低版本的XML解析
-------------------------------------------------
noop()  :  空函数
    noop：function(){},
--------------------------------------------------
globalEval()  :  全局解析JS
function test() {
jQuery.globalEval( "var newVar = true;" );//把局部变量转成全局变量
var newVar = true;//局部变量
}
test();
alert( newVar );
 
function test() {
  var val=eval;
   val("var a=1");
   window.eval("var a=1");
}
alert(1);
----------------------------------------------
camelCase()  :  转驼峰(内部)
margin-left  -> maginLeft
 
IE :  -ms-transform ->msTransfrom
其他 ：-moz-transform ->MozTransfrom
 
----------------------------------------------
nodeName()  :  是否为指定节点名(内部)
$(function(){
    $.nodeName(document. documentElement,‘html‘);=>true
    $.nodeName(document. body,‘html‘);=>false
});
 
----------------------------------------------
each()  :  遍历集合
var arr=[1,2,3,4];
var json={"id":"111","name":"zhangsan "}
 
this ->{0:,1:,length:2}
$.each(arr,function(i,value){
       alert(value);
});
----------------------------------------------
trim()  :  去前后空格
IE 低版本需要自己写正则
var str ="  Hello    ";
alert("("+str+")");

alert("("+$.trim(str)+")");

----------------------------------------------
makeArray()  :  类数组转真数组
var str="Hello";
$.makeArray(str); -> [Hello]
----------------------------------------------
inArray()  :  数组版indexOf
var arr={‘a‘,‘b‘,‘c‘,‘d‘}
$.inArray(‘b‘,arr);  -> 2
$.inArray(‘w‘,arr);  -> -1
----------------------------------------------
merge()  :  合并数组
if : $.merge([‘a‘,‘b‘],[‘c‘,‘d‘]); ->[‘a‘,‘b‘,‘c‘,‘d‘]
else: $.merge([‘a‘,‘b‘],{0:‘c‘,1:‘d‘}); ->{0:‘a‘,1:‘b‘,2:‘c‘,3:‘d‘}
          $.merge({0:‘a‘,1:‘b‘,length:2},{0:‘c‘,1:‘d‘}); -> {0:‘a‘,1:‘b‘,2:‘c‘,3:‘d‘,length:4}
          $.merge({0:‘a‘,1:‘b‘,length:2},[‘c‘,‘d‘]); -> {0:‘a‘,1:‘b‘,2:‘c‘,3:‘d‘,length:4}
----------------------------------------------
grep()  :  过滤新数组
var arr=[1,2,3,4];
arr=$.grep(arr,function(n,i){
    return n>2;
}); ->[3,4]
arr=$.grep(arr,function(n,i){
    return n>2;
},true); ->[1,2]
----------------------------------------------
map()  :  映射新数组
var arr=[1,2,3,4];
arr=$.map(arr,function(n){
        return n+1;
}); ->[2,3,4,5]
 
----------------------------------------------
guid  :  唯一标识符(内部)    
事件函数关联，查找和关联
----------------------------------------------
proxy()  :  改this指向
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$.proxy(show,document)(3,4); ->3,4
$.proxy(show,document,3,4)(); ->3,4
$.proxy(show,document,3)(4); ->3,4
简化的写法：
var obj={
    show : function(){
        alert(this);
    }
}
$.proxy(obj.show,obj) ===$.proxy(obj,"show")
----------------------------------------------
access()  :  多功能值操作(内部)
$().css();  $().attr()  get/set
$(function(){
    $("#div1").css("background")//get
    $("#div1").css("background","yellow")//set
    $("#div1").css({background : "yellow" , width : "300px"}) //多值set
});
<div id=‘div1‘ style="width:100px;height:100;background:red"></div>
 
----------------------------------------------
now()  :  当前时间
$.now();//1970.1.1距今的毫秒数
now : Date.now 低版本的不支持
----------------------------------------------
swap()  :  CSS交换(内部)
$(function(){
    $("#div1").css("width")//jquery  ->100
     $("#div1").get(0).offserWidth;//源生display:none  ->0
});
<div id=‘div1‘ style="width:100px;height:100;background:red;display:none"></div>
实现方式 ： 把值去掉，获取值，添加样式
 
----------------------------------------------
});
(819).jQuery.ready.promise = function(){};  监测DOM的异步操作(内部)
$().ready();
---------------------------------------------------------
function isArraylike(){}  类似数组的判断(内部)
function show(){
    arguments.isArraylike();
}
show(‘a‘,‘b‘,‘c‘,‘d‘);
 
------------------------------------------------------------
rootjQuery=jQuery(document);
 
 
 
 



来自为知笔记(Wiz)



jQuery扩展工具方法


联系
我们