Javascript - Jquery - 插件

Posted 2020-09-21

Ajax函数

$.ajax(url, type, success, error)
//url：请求的页面路径
//type：请求方式
//success：请求成功的回调，该函数有两个参数：服务器返回数据（data）和返回状态（textStatus）
//error：请求失败的回调，该函数有三个参数：XMLHttpRequest、 返回状态（textStatus），可能的捕获的错误对象（errorThrown）
//beforeSend：发送请求前的回调函数
//data：发送给服务器的数据 如果是get请求 那么将自动转换为http查询字符串附加到url?之后
//dataType：提交数据的类型，一般不需要指定，如果发送请求时附加的数据不是dataType指定的类型，则会出现错误
//async：bool，设为false时，可设置Ajax外部的变量的值。默认true，如果为true，外部变量的值将不能被修改
//示例：
$.ajax({
    url: "test.ashx",
    type: "post",
    dataType:"json",
    data: { msg: "hello" }, //服务器用request接收msg
    success: function (data, status) {       
        var simpleJson = eval("(" + data + ")");//将服务端简易Json字符转化Json对象
    }
});

函数参数

多参数

当一个函数具有多个参数时，如果我们在调用该函数时传递一大堆参数进去，而有些参数并不是必须的，代码看起来就有点混乱，此时可以使用匿名对象来解决。将参数作为匿名对象的属性，然后将匿名对象作为函数的参数即可。

参数替换

function aa(options) {
    //配置默认参数
    var param = { gender: \'man\', age: 18 };
    //extend函数：merge两个参数，用传递的参数替换默认参数，没传递的参数以默认值替代
    $.extend(param, options);
    alert(param.age);
}

aa();//调用aa，不提供参数会使用默认参数
aa("woman");//提供一个参数，另一个会使用默认参数
aa("woman", 20);//提供两个参数，不再使用默认参数

深度替换

如果函数的参数（对象）的某个属性也是对象，是否进行全部合并需要为extend提供一个布尔值。

function aa(options) {
    var op = $.extend(true, { gender: "man", job: { Salary: \'1000\', typesWork: \'scientist\', age: 30 } }, options);
    return op;
}

var test = aa({ name: \'leo\', job: { Salary: \'100000\', typesWork: \'Programmer\' } });
for (var i in test) {
    var jobObj = test[i];
    if (typeof jobObj == "object") {
        for (var z in jobObj) {
            alert(z + "：" + jobObj[z]);
        }
    }
    else {
        alert(i + "：" + test[i]);
    }
}
//参数替换的结果为：{name: \'leo\' { gender: "man", job: { Salary: \'100000\', typesWork: \'Programmer\', age: 30 }}
//如果指定第一个参数为false则结果会忽略age

插件

livequery插件

比如如果为页面上的所有div绑定了click事件，那么之后如果再动态创建一个div插入文档，这个div则不会有click事件，livequery插件能使后来动态创建的元素也能自动注册事件。

livequery(type, event, callBack)
//为元素绑定事件（包括使用javascript动态插入的元素）
//使用livequery绑定事件
$(\'a\').livequery(\'click\', function (e) {
    e.preventDefault()
    alert($(this).text());
})
//之后动态创建的a元素也被自动绑定了事件
$("<a href=\'\'>4</a>").appendTo(document.body);

JQuery UI插件

//一整套基于web UI的插件，此插件大体分为三个部分 如下：
//交互{ 拖动、置放、缩放、选择、排序  }
//微件{ 手风琴导航、自动完成、拾色器、对话框、滑块、标签、日历、放大镜、进度条、微调控制器、历史、布局、表格、菜单、工具提示、树、工具栏、上传组件  }
//效果{ 丰富的动画 无需animate方法 实现更强大的动画 }

自定义插件

为JQuery添加静态方法

$.extend(obj)
//将自定义的方法作为obj的属性，就完成了为JQuery添加静态方法
//定义一个trace函数
//示例：
function trace() {
alert(\'hello\');
}
//将其作为JQuery的静态方法
$.extend({
trace: trace
});
//使用JQuery的静态方法
$.trace();

为JQuery原型添加方法

使用fn.extend方法可以为JQuery对象添加原型方法，原型方法属于JQuery对象，属于实例对象，所以调用时使用$的实例.方法名即可。 

$.fn.extend(x)
//将自定义的方法作为obj的属性，就完成了为JQuery添加静态方法
//定义一个trace函数
//示例：
function trace(obj) {
alert(\'hello\');
}
//将其作为JQuery的静态方法
$.extend({
    trace: trace
});
//使用JQuery的静态方法
$.trace();

为JQuery编写插件

以上两种方式都可以为JQuery增加静态或实例方法，但用起来不如自定义一个插件库来得方便。你只需要定义一个匿名函数，匿名函数需要接收一个参数，参数=$。使该函数可自运行，将JQuery作为参数传递给它，使用运行起来。接着只需要将我们编写的自定义方法全部放入该匿名函数内就可以了。

(function ($) {
    //定义一个JQuery的静态方法trace
    $.extend({
        trace: trace
    });
    //定义一个trace函数
    function trace() {
        alert(\'hello\');
    }
})(jQuery)


$.trace();


(function ($) {
    //定义一个JQuery的原型方法trace
    $.fn.extend({
        trace: trace
    });
    //定义一个trace函数
    function trace() {
        alert(\'hello\');
    }
})(jQuery)

$(document).trace();

 

Javascript - 学习总目录