• jquery核心基础


    jquery对对象的操作:
     
    检查对象类型:
    老式的javascript使用typeOf()操作符,但他是不符合逻辑的,在某些情况下,typeOf()返回的不是一个正确的值,或者返回一个出乎意料的值,如:typeOf(null),它返回object或不是null。
    所以jquery提供了一个自定义的.type()方法:
    $.type(null);//返回null
    $.type([]);//返回array
     
     
    .isEmptyObject()方法:
    .isEmptyObject()方法用于检查一个对象是否包含任何属性,包括继承的属性,它与对象的类型无关:
     
    $.isEmptyObject("");//返回true
    $.isEmptyObject([]);//返回true
     
    var mailman={};
    mailman.letters=100;
    $.isEmptyObject(mailman);//返回false
     
    与之类似的是.isPlainObject()方法:
    .isPlainObject()方法。它用于检测一个对象是否包含任何属性,但它检测的必须是object实例。因此对于该函数,对于空字符检测将返回false。
    $.isPlainObject("");//返回false
    $.isPalinObject({});//返回true
    $.isPalinObject(new obj);//返回true
     
    .extend()方法:
    extend()方法可以用来合并两个或两个以上的对象。值得注意的是,.extend()方法的功能是将一个或多个对象的属性合并到一个目标对象中。在下面的例子中,obj1将获得obj2、obj3的属性:
    var obj1={"1":"property 1"};
    var obj2={"2":"property 2"};
    var obj3={"3":"property 3"};
    $.extend(obj1,obj2,obj3);
    alert(obj1["3"]);//显示“3”值的属性
     
    关于.extend()方法,有趣的是,可以用它来克隆javascript对象(这与$.clone()方法不同):
    var cloneObj=$.extend({},anObj);
     
    .extend()还可以接收一个布尔值作为第一个参数,对以执行对象的深度合并,即递归复制。可以使用该方法来实现对象的深度克隆:
    var cloneObject=$.extend(true,{},Object;);
     
     
    -函数操作:
    jquery()有两个用于函数的工具的方法:isFunction()和.noop()。
    顾名思义,isFunction()方法时检查对象是否是一个函数。在使用.isFunction()方法时,请确保去掉函数名的圆括号。
    在下面的列子中,将.isFunction()函数作为参数传入.isFunction()函数自身。由于它是一个函数,因此返回值必然是true。
     var fn1=$.isFunction({});//返回false
            var fn2=$.isFunction($.isFunction);//返回true
            var fn3=$.isFunction($.isFunction());//返回false,由于圆括号。
            alert(fn1+"-"+fn2+"-"+fn3);
     
    .noop()方法时一个存根函数(stub function),它并不执行任何操作。但在某些情况下它是非常有用的,比如我们想把一个空函数作为参数传递时,以便安装一个在默认情况下不进行任何操作的新事件。
     
    -数组操作:
    与.isObject()方法和.isFunction()方法类似,对于数组也有一个.isArray()。除了检查对象是否是一个数组之外,还可以使用.makeArray()方法将一个类似数组的对象转换为一个真正的数组,但将类似于数组的对象转换为数组,会丢失原对象的所有方法和属性。
        var cloned=$.extend(true,{},$);
            var type1=$.type(cloned);
            alert(type1);//返回Object
            var arr=$.makeArray(type1);
            var type2=$.type(arr);//返回array
            alert(type2);
     
    另外一种用于合并数组的方法,.merge()方法。它从第2个数组中获取元素,并将这些元素追加到第一个数组中,并保留两个数组中的原有顺序:
    var arr1=["ddf","ppp","vvv"];  
            var arr2=[121,323,434];
            var arrAll=$.merge(arr1,arr2);
            alert(arrAll);//ddf,ppp,vvv,121,323,434
     
    .inArray()方法用于检测数组中是否存在某个特定的值,如果找到则返回该值在数组中的索引,如果不存在则返回-1。
    .unique()方法的功能是从DOM元素的数组中移除重复的元素:
            【
            <p></p><p></p>
            <p class="dicp"></p>
            <p class="dicp"></p>
            <p class="dicp"></p>
            】
            var ptage=$("p");
               alert(ptage.length);//返回5
               ptage=$.makeArray(ptage);//将其转换为一个数组
     
               var ptg=$.makeArray($(".dicp"));
               ptage=ptage.concat(ptg);//将ptg数组连接到ptage数组中
               alert(ptage.length);//返回8
     
               ptage=$.unique(ptage);//去除ptg中重复元素
               alert(ptage.length);//返回5
     
               var index=$.inArray("6",ptage);
               alert(index);//返回-1
     
    遍历数组:for循环遍历,这是旧式的循环语句,jquery提供了.each()方法,可以替代旧式的for循环。
    .each()方法可以用于遍历对象以及类似数组的对象和数组,该方法的索引是基于0的,它接收两个参数:第一参数是遍历的结合,第二参数是回调函数。
    该回调函数接收两个参数:第一个参数是当前遍历元素在集合中的索引,第二个参数是该元素的值。看下面演示:
    var arry=[111,222,333,444,555];
                    $.each(arry,function(index,value){
                        value=value*2;
                        alert("index is:"+index+"--new value is:"+value);
                    })
     
    .map()方法与.each()方法类似,接收两个参数:第一参数是数组对象,第二参数是回调函数。该回调函数是“对每一个元素项进行处理的函数”,该回调函数接收两个参数,第一参数是当前元素的值,第二个元素是当前元素在数组中的索引。
     var array=[2322323,445445,65665,76];
                    alert(array);
                    var newarr=$.map(array,function(value,index){
                        return Math.sqrt(value).toFixed(4);//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
                    })
                    alert(newarr);
     
    数据结构:
    队列是一直先进先出的数据结构,队列总是将元素添加到队列的尾部,移除元素时总是从队列的头部开始。在jq中使用$.queue()来维护一个函数的队列。默认的函数队列是fx,他是一个具有标准功能的队列。在fx的上下文中,队列的功能是显而易见的。
    $("#anmate").sildeUp().fadeIn();//简单的动画队列
     
    $.queue队列支持push和pop操作。要从队列中移除所有函数,可以使用.clearQueue()方法。使用.dequeue()方法可以从队列中移除一个函数,并执行它。
    $("#anmate").show("slow");
          $("#anmate").queue(function(){
              $(this).animate({"width":"+=400"},1000);
              $(this).dequeue();//从列队中弹出一个函数并执行它
          })
     
    字符串:
    js中包含了一种强大的机制,可以通过正则表达式来处理字符串,但js中内置的String对象并不包含.trim()方法,在下列代码中,.trim()方法用于移除字符串首尾的空格。
    var par1=" 欢迎来到我们伟大的国度        ";
                    var par2="    -中国            ";
                    var par=par1+par2;
                    alert(par);
                     var pars=$.trim(par1)+$.trim(par2);
                     alert(pars);
     
    数据:ajax(后章节讲)
     
    其他有用的工具方法:
     
    .contains()方法用于检查一个DOM节点是不是另外一个节点的子节点,该方法接收两个参数,第一个参数是容器节点,第二个参数是要检查的目标节点,由于jq包装器返回的是一个类似于数组的对象,因此要引用实际的元素,使用索引值来引用。
    $.contains($("head")[0],$("title")[0]);//返回true
     
    .isWindow()方法用于判断当前窗口是否window窗口,如在使用iframe的情形下,在某个操作中,我们可能要区分iframe和浏览器的窗口,就可以用.isWindow()方法实现此功能。
    【<iframe src="" id="frame"></iframe>】
    var frmWindow=$("#frame")[0];
    $.isWindow(frmWindow);//返回false
    $.isWindow(window);//返回true
     
    $.now()用于获取当前时间,他是(new Date).getTime()方法的一个快捷方式,显然使用$.now()非常简洁
     
    .support()是jq检测浏览器特性(浏览器所支持的特性)的方法,用于取代jq低版本中的$.browser()方法。
    一个很好的例子是:if($.support.ajax){},
    他可以检测浏览器是否支持Ajax请求(亦称为创建XMLHttpRequest对象)
     
    .globalEval()方法:
    //在所有的DOM加载完成之后,创建一个变量x并把它的值初始化为0
    $(function(){
      eval("var x=0;");
    })
    eval()方法执行的“上下文”并不是全局,而是局部。有时我们希望把求值的语句放在全局的“上下文”中,例如加载一个外部javascript文件时,我们就要用到.globalEval():
    //在全局“上下文”中创建变量
    $(function(){
      globalEval("var x=0;");
    })
     
    .ready()方法用于注册处理程序,一旦问道的所有DOM元素加载完毕,就执行该处理程序代码,不必等待页面所有元素(图片flash等)加载完毕。.ready()方法接收一个函数作为参数。
     
     
  • 相关阅读:
    1.saltstack入门
    构造函数
    gitlab
    mysql常见的问题
    python数据运算
    BZOJ 1691 usaco2007 挑剔的美食家
    BZOJ 1708 usaco2007 Money奶牛的硬币
    BZOJ 1050 HAOI2006 旅行comf
    BZOJ 2427 HAOI2010 软件安装
    BZOJ 1901 Dynamic Rankings
  • 原文地址:https://www.cnblogs.com/boyzi/p/4011460.html
Copyright © 2020-2023  润新知