JQuery高级

动画

三种方式显示/隐藏/切换元素：（切换：如果实现，则变为隐藏；如果隐藏，则显示）

1. 默认方式
   • show([speed], [easing], [fn])
   • hide([speed], [easing], [fn])
   • toggle([speed], [easing], [fn])
2. 滑动方式
   • slideDown([speed], [easing], [fn])
   • slideUp([speed], [easing], [fn])
   • slideToggle([speed], [easing], [fn])
3. 淡入淡出方式
   • fadeIn([speed], [easing], [fn])
   • fadeOut([speed], [easing], [fn])
   • fadeToggle([speed], [easing], [fn])

参数说明：

• speed: 速度，有三个预定义值（slow, normal, fast）；还可以设置为毫秒值。
• easing: 切换效果，默认swing(先慢中间快最后慢)，可用参数linear(匀速)
• fn: 动画完成后的执行函数

function showClick(){
	$("#test").show("slow", "swing", function(){
		alert("显示动画");
	});
}
function hideClick(){
	$("#test").hide("slow", "swing");
}

遍历

既可以使用js的方式（类似于Java），也有自己特有的方式：

1. 对象.each(callback)
2. $.each(object, [callback])
3. for..of （jquery3.0版本才支持）

// id=city下面的li列表---------------------------------------
var citys = $("#city li");
// js方式
for (var i=0;i<citys.length; i++){ 
	alter(citys[i].innerHTML); 
}
// 对象.each------------------------------------------------
citys.each(fucntion(){
	alert(this.innerHTML);
});
citys.each(fucntion(index, element){
	alert(index+": "+element.innerHTML);
});
// $.each--------------------------------------------------
$.each(citys, function(){
	alert(this.innerHTML);
});
// for..of-------------------------------------------------
for(city of citys){
	alter(city.innerHTML);
}

事件绑定

三种方式：

1. jquery标准的绑定方式：
   • jq对象.事件方法(回调函数)；
2. on绑定方式/off接触绑定
   • jq对象.on("事件名称", 回调函数);
   • jq对象.off("事件名称");
3. 事件切换：toggle (1.8之后的高版本不能使用，如果要用，需要使用jquery-migrate-1.0.0.js)
   • jq对象.toggle(fn1, fn2);

// 第一种-----------------------------------------
$("#btn").click(function () {
    alert("我被点击了...");
});
// 第二种-----------------------------------------
$("#btn").on("click", function () {
    alert("我被点击了...");
});
// 第三种-----------------------------------------
$("#btn").toggle(function () {
    $("#div1").css("backgourdColor", "red");
}, function () {
    $("#div1").css("backgourdColor", "blue");
});

插件

插件：增强jquery的功能

实现方式：

1. $.fn.extend(object) 增强通过jquery获取的对象的功能，如 $("#div1")
2. $.extend(object) 增强jquery对象本身的功能，jquery本身就是$符号

<script>
    // 定义插件
    $.fn.extend({
        // 定义了一个check方法，所有的jq对象都可以调用
        check: function () {
            alert("执行check方法");
        },
        test: function () {
            alert("执行uncheck方法");
        }
    });
    $.extend({
       test2: function () {
           alert("执行test2方法");
       }
    });
    // 使用插件中的方法
    $("#btn1").check();
    $("#btn2").test();
    $.test2();
</script>