Jquery高级操作

前端

发布日期: 2020-07-09

文章字数: 1.2k

阅读时长: 5 分

阅读次数:

JQuery 高级

动画

三种方式显示和隐藏元素
1. 默认显示和隐藏方式
  1. show([speed,[easing],[fn]])
    1. 参数：
      1. speed：动画的速度。三个预定义的值(“slow”,”normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
      2. easing：用来指定切换效果，默认是”swing”，可用参数”linear”
        
        swing：动画执行时效果是先慢，中间快，最后又慢
        
        linear：动画执行时速度是匀速的
    2. fn：在动画完成时执行的函数，每个元素执行一次。
  2. hide([speed,[easing],[fn]])
  3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
4. 淡入淡出显示和隐藏方式
  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed,[easing],[fn]])

遍历

js的遍历方式
- for(初始化值;循环结束条件;步长)
jq的遍历方式
jq对象.each(callback) 1. 语法：
jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象 2. 回调函数返回值：
- true:如果当前function返回为false，则结束循环(break)。
- false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

``` html
<ul id="address">
<li>北京</li>
<li>上海</li>
</ul>
<script>
    $("#address li").each(function(){
        alert(this.innerHTML());
    });
    //第二种写法
    $("#address li").each(function(index,element){
        //判断如果是北京，跳过
        if("上海"==element.innerHtml()){
            //function返回false，(break)
            //function返回true，(continue)
            return true;
        }
        //alert(index+":"+element.innerHtml());
        //alert(index+":"+$(element).html());
    });
</script>
```

$.each(object, [callback])

$.each($("#address li"),funtion(){
    //逻辑相同
    alert(this.innerHtml());
});

for..of: jquery 3.0 版本之后提供的方式（因为版本太新，不推荐使用）
for(元素对象 of 容器对象)

``` 
for(li of $("#address li")){
    alert(li.innerHtml());
}
```

事件绑定

jquery标准的绑定方式
- jq对象.事件方法(回调函数)；
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
  - 表单对象.submit();//让表单提交
on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
  - 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
事件切换：toggle
- jq对象.toggle(fn1,fn2…)
  - 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…..
- 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
```
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
```

案例

广告显示、隐藏：
<div id="div1">
    <img src="xx.jpg">
</div>
<script>
$(function(){
    //定时器
    setTimeout(div1Show,3000);
    setTimeout(div1Hide,3000);
})
function div1Show(){
    $("#div1").show("slow");
}
function div1SHide(){
    $("#div1").hide("slow");
}
</script>

抽奖：
<div id="xiaodiv">
    <img src="xx.jpg">
</div>
<input type="button" id="start" value = "开始">
<input type="button" id="stop" value = "停止">
<div id="dadiv">
    <img src="xx.jpg">
</div>
<script>
    var imgs={
        src="1.jpg";
        src="1.jpg";
        src="1.jpg";
    }
    var startId;//开始按钮的定时器
    var index;//随机角标
$(function(){
    //刚开始，停止不可用
    $("#start").prop("disabled","false");
    $("#start").prop("disabled","true");
    $("#start").click(function(){
        //点击开始，开始不可用
        $("#start").prop("disabled","true");
        $("#start").prop("disabled","false");
        //数组角标随机0-3
        index = Math.floor(Math.random()*4);
        //设置循环定时器
        startId=setInterval(function(){
            //设置小相框里img标签下的src属性为随机src
            $("#xiaodiv" img).prop("src",imgs[index]);
        },20);
    })
    $("#stop").on("click",function(){
        //点击停止，停止不可用
        $("#start").prop("disabled","false");
        $("#start").prop("disabled","true");
        //小相框停止——停止循环定时器
        clearInterval(startId);
        //设置大相框里img标签下的src属性为小相框的src
        $("#dadiv" img).prop("src",imgs[index]);
    })
})
    
</script>

插件：增强JQuery的功能

实现方式：
1. $.fn.extend(object)
  - 增强通过Jquery获取的对象的功能 $(“#id”)
2. $.extend(object)
  - 增强JQeury对象自身的功能 $/jQuery

定义jq对象的功能
<script>
$.fn.extend({
    //定义了一个check方法，所有的jq对象都可以调用此方法
    check:function(){
        this.prop("checked",true)
    }
})
//调用
$(function(){
    $("btn_check").click(function(){
        $("input[type="checkbox"]").check();
    })
})
</script>
定义全局的功能
<script>
$.extend({
    //定义一个取两值之间最大数的方法
    max:function(var a,var b){
        return a >=b ? a:b;
    },
    //两个方法之间用“，”连接
    min:function(var a,var b){
        return a <=b ? a:b;
    }
})
//调用
$(function(){
    var maxValue = $.max();
})
</script>