• jQuery核心及其工具


    1、核心函数

    jQuery核心函数为$,可以作为$("document").ready()的简写,可以用来作为一个在DOM文档载入完成后执行的函数,

    简写和全写一样,不过在使用时候有区别,一个文档中$只能有一个要包裹所有的操作,而全写的可以有多个,分别包裹。

    2、jQuery对象的访问

    $(".first").size()  等价于$(".first").length() 获得长度

    get([index])  不带参数时,取得所有匹配的DOM元素的集合,参数index表示取得第几个匹配的元素,此时函数用于取得第一个匹配的元素

    join()函数用来将数组中的内容连接成一个字符串,如果里面带单数如join(",")则以参数为分割符,连在一起组成字符串。

    reverse()  函数用于将得到的DOM元素数组内的各项反序。

    使用get(index)可以根据已有的index定位匹配的元素位置,同样如果在已经得到元素的情况下可以查询其在DOM元素数值中的位置

    这时候使用index(subject)  找到返回number,没找到返回-1

    遍历对象集

    for循环 、each(callback)其中的callback函数可以设定返回值,返回false时将停止循环(等同于break),设置ture时家你个跳至下一循环(等同与continue)。

    3、数据缓存

    隐藏数据

    设置和获取元素的缓存数据

    设置缓存数据的函数为data(name,value)   name为存储的数据名,value为存储的数据值

    获取数据的使用data(name)

    其中value可以为包括字符串在内的所有数据类型,为在一个变量中保存多为数组提供来方便

    $("#testbutton").click(
    
                        function(){                        
    
                            $("#div1").data("style", {font:14,border:2});
    
                            $("#div3").html("style.font: " + $("#div1").data("style").font
    
                                                            + "<br/>style.border:" + $("#div1").data("style").border);
    
                        }
    
                    );

    代码中定义了stytle,并为其设定来一组数据,可以像在C语言中访问结构体一样使用“.”操作符进行访问。

    删除缓存数据removeData(name),与data(name,value)的操作刚好相反。

    4、jQuery常用工具类

    浏览器相关

    jQuery.browser的可用值有safari、opera、msie、mozilla

    function(){
    
                        //显示浏览器类型以及版本
    
                        jQuery.each(jQuery.browser, function(i, val) {
    
                            $("<div>" + i + " : <span>" + val + "</span>")
    
                            .appendTo("#div3");
    
                        });
    
                                                
    
                        }

    显示结果为:

    这里用来显示结果.

    version : 1.9.2.10
    safari : false
    opera : false
    msie : false
    mozilla : true
    数组与对象相关
    each(obj,callback)
    var arr=["one","two","three","four","five"];
    如果只想遍历数组中前面4个元素,则可以设置返回false
    function() {
                                        var arr = [ "one", "two", "three", "four",
                                                "five" ];
                                        var obj = {
                                            one : 1,
                                            two : 2,
                                            three : 3,
                                            four : 4,
                                            five : 5
                                        };
    
                                        jQuery.each(arr, function() {
                                            $("#div3").append(
                                                    "<div id='"+this+"'>My id is "
                                                            + this + ".</div>");
                                            return (this != "four");
                                        });
                                        jQuery.each(obj, function(i, val) {
                                            $("#" + i).append(
                                                    document.createTextNode("--"
                                                            + val));
                                        })
    为真时候等同为continue,继续执行循环。

    extend()扩展数组
    extend(target,obj1,[bojN])
    target待修改对象,obj1待合并到第一个对象的对象,objN待合并到第一个对象的对象
    var empty={};
    var defaults={validate:false,limit:5,name:"foo"};
    var options={validate:true,name:"bar"}
    var setting=jQuery.extend(empty,defaults,options);
    我们可以看到执行之后setting={validate:true,limit:5,name:"bar"};
    empty与setting相等
    defaults里面的数值没有任何改变,使之得到来很好的保留
    grep()筛选数组
    jQuery.grep(array,callback,[invert])
    array待过滤数组,callback该函数处理数组中的每个元素,
    invert(boolean)如果invert为false或未设置,则函数返回数组中由过滤函数返回true的元素,当invert为true时,
    则返回过滤元素中为false的元素,即是否对过滤进行反转。
    返回值为object。
    如显示index比3大,且数字本身不是5的数字,函数中n代表number,i代表index
    var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
    
                        $("#div3").append("<br/>"+arr.join(", "));
                        arr
    = jQuery.grep(arr, function(n, i){ return (n != 5 && i > 3); }); $("#div3").append("<br/>"+arr.join(", "));

    inArray()判断是否在数组中

    jQuery.inArray(value,array)  确定第一个参数在数组中的位置,(如果没有找到,返回-1)

    返回值:Number

    value用户在数组中查找是否存在,array待处理数组

    makeArray()生成数组

    jQuery.makeArray(obj)  将类数组对象转化为数组对象,类数组对象有length属性,其成员索引为0至length-1。

    实际中次函数在jQuery中将自动使用而无需特意转换。

    返回值:Array     参数:obj类数组对象

    调用方式如下所示:

    function(){                                            
    
                        //makeArray:生成数组
    
                        var arr = jQuery.makeArray(document.getElementsByTagName("p"));
    
                        arr.reverse(); // use an Array method on list of dom elements
    
                        $(arr).appendTo("#div3");                       
    
                        }

    map()数组元素映射

    jQuery.map(array,callback)     将以个数组中的元素转换到另一个元数组中

    返回值:Array

    参数:array为待转换数组,callback为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数

    调用实例如下:

    function(){                        
    
                        //map:数组元素映射        
    
                        var arr = [ "a", "b", "c", "d", "e" ]
    
                        $("#div3").append("<br/>" + arr.join(", "));
    
                        arr = jQuery.map(arr, function(n, i){
    
                          return (n.toUpperCase() + i);
    
                        });
    
                        $("#div3").append("<br/>" + arr.join(", "));
    
                        arr = jQuery.map(arr, function (a) { return a + a; });
    
                        $("#div3").append("<br/>" + arr.join(", "));    
    
                        }

    map()函数的第二个参数(也就是转换函数)可以设置为一个字符串,当设置为字符串时,将视为缩写形式,其中a代表数组元素。

    有如下语句:a*a

    与下述语句等价:

    function(a){
    
    return a*a;
    
    }

    unique()删除重复元素

    jQuery.unique(array)

    返回:jQuery

    其他功能行函数

    isFunciton()、trim()、

    5、jQuery的插件机制

    jQuery具有很强的可扩展性,不但可以定义插件来对其进行扩展,甚至还可以对jQuery对象本身进行扩展,

    jQuery提供了与插件机制相关的两种方式:

    jQuery.extend(Object)

    jQuery中本身没有提供比较两个数字大小的函数,现在定义两个函数min()和max()对jQuery对象本身进行扩展

    jQuery.extend({
    
              min:     function(a, b) {
    
                        return a < b ? a : b; 
    
                    },
    
              max:     function(a, b) {
    
                        return a > b ? a : b; 
    
                    }
    
            });     

    调用形式和普通的函数一样,因为其已经是jQuery对象的一部分了。

    $("#div3").html("min(2, 3): " + $.min(2, 3)
    
                                    + "<br/>max(4, 5):" + $.max(4, 5));
    
                            $("#div3").html("min(2, 3): " + jQuery.min(2, 3)
    
                                    + "<br/>max(4, 5):" + jQuery.max(4, 5));

    jQuery.fn.extend(Object)

    此方法用于扩展jQuery元素集来提供新的方法,目前很多方法都是基于这种机制来实现的。

    如改变匹配元素的背景的函数

    jQuery.fn.extend({
    
              colorize: function(color) {
    
                return this.each(
    
                    function() {
    
                        $(this).css("background", color);
    
                    }
    
                );
    
              }
    
            }); 

    调用方式,使用普通的jQuery对象即可调用

     $(".first").colorize("red");

     

  • 相关阅读:
    zookeeper学习笔记
    wsl笔记
    SSDB数据库笔记
    spring笔记
    redis笔记
    openresty配置
    openresty安装笔记
    mybatis笔记
    nginx配置
    STM32F373(青风)+CUBEMX快速上手
  • 原文地址:https://www.cnblogs.com/shudonghe/p/2859897.html
Copyright © 2020-2023  润新知