jQuery高级

1、动画

三种方式显示与隐藏元素

1.1、默认显示与隐藏方式

  • show([speed], [easing], [fn])：默认方式进行展示

    • 参数speed：动画的速度。
      • 三个预定义的值【"slow", "normal", "fast"
      • 或表示动画时长的毫秒值，比如1000
    • 参数easing：用来指定切换的效果
      • 取值swing：动画执行时效果是先慢、中间块、最后再慢。默认
      • 取值linear：动画执行时速度是一成不变的，匀速
    • 参数fn：在动画完成时执行的函数，每个元素只执行一次

  • hide([speed], [easing], [fn])：默认方式进行隐藏

  • toggle([speed], [easing], [fn])：默认方式进行切换

1.2、滑动显示与隐藏方式

  • slideDown([speed], [easing], [fn])：滑动方式进行展示

  • slideUp([speed], [easing], [fn])：滑动方式进行隐藏

  • slideToggle([speed], [easing], [fn])：滑动方式进行切换

1.3、淡入淡出显示与隐藏方式

  • fadeIn([speed], [easing], [fn])：滑动方式进行展示
  • fadeOut([speed], [easing], [fn])：滑动方式进行隐藏
  • fadeToggle([speed], [easing], [fn])：滑动方式进行切换

2、遍历

2.1、JS的遍历方式

  • for(初始化值;循环结束条件;步长) 
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>

var citys = $("#city li");
 for(var i = 0; i< citys.length;i++){
   alert("i -->>" + i + "<br>li-->>" + citys[i].innerHTML);
}

2.2、jq的遍历方式

  • jq对象.each(callback) 
citys.each(function(index, element){
    // 2.1、第一种，this就代表一个li对象。不能获得索引
    // alert(this.innerHTML);

   if('上海' == $(element).html()){
    // 如果Function中返回false，则结束循环【相当于【普通循环中的break】
    // 如果Function中返回true，则结束循环【相当于【普通循环中的continue】
    return false;
   }

    // 2.2、第二种方式，可以得到索引。在Function中定义两个参数，index + Element
    alert('索引 -->>' + index + 'li对象-->>' + $(element).html());
  • jQuery.each(Object, [callback])
    • 和上一种类似，不过是把对象放在了参数Object的位置，这个位置不只能传递jQuery对象，其他数组对象也能放进来 
$.each(citys, function(index, element){
            alert(element.innerHTML);
        });
  • for..of:：jQuery3.0之后引入的新特性，类似于foreach循环 
// for(变量名 of 对象名){}
for(li of citys){
            alert($(li).html());
        }

3、事件绑定

3.1、jQuery标准绑定方式

  • jq对象.事件方法(回调函数)

3.2、on绑定事件 / off解除绑定

  • jq对象.on("事件名", "回调函数")

  • jq对象.off("事件名")

    实例

<body>
    <input id="btn" type="button" value="使用on绑定点击事件">
    <input id="btn2" type="button" value="使用off解绑点击事件">

    <script type="text/javascript">
    // 使用on绑定双击事件
    // 触发了事件会执行回调函数
    $("#btn").on("dblclick", function(){
        alert("btn被双击了");
    });

    // 点击按钮btn2触发事件解绑btn的双击事件
    $("#btn2").on("click", function(){
        // 解除btn的bdlclick事件注册
        // 如果不传递参数则会接触该元素上的所有的事件
        $("#btn").off("dblclick");
    });
    </script>
</body>

3.3、toggle事件切换

  • jq对象.toggle(fn1. fn2...)：切换轮流执行fn函数

  • ==1.9版本之后，toggle()方法删除，jQuery Migrate(迁移)可以恢复此功能，sript导入[ jquery-migrate-1.0.0.js ]到js目录中即可==

    实例

<body>
    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>

    <script>
            // 按钮单击事件绑定，使用toggle
            $("#btn").toggle(chGreen, chRed, chBlue);

            // 切换为红色的事件
            function chGreen() {
                // myDiv的属性backgroundColor值改变
                $("#myDiv").css("backgroundColor", "green");
            }
            // 切换为绿色的事件
            function chRed() {
                $("#myDiv").css("backgroundColor", "red");
            }

            // 切换为蓝色的事件
            function chBlue() {
                $("#myDiv").css("backgroundColor", "blue");
            }
    </script>
</body>

4、案例

4.1、广告的自动弹出与隐藏

4.2、抽奖案例

  • 详见D:\project\project_IDEA\pro_java\Strengthen -foundation\day19-jquery2\04-jQuery综合案例\抽奖.html

5、插件

5.1、作用

  • 增强jQuery的功能

5.1、两种实现方式

  1. $.fn.extend(Object)
    • 增强jQuery获取的对象的功能 比如$("#id值")获得的对象 
//1、定义jQuery的对象插件
// 下面两个方法将来是被jQuery对象调用的，也就是两个方法被调用时，会传递进来jQuery对象
$.fn.extend({
    // 语法 -->> 方法名:回调函数
    // 这里相当于定义了一个函数check(),当调用check时，{}中的代码内容会被执行
    check: function () {
        // 实现选中所有的复选框
        // 把this这个对象的checked属性赋值为true  this对象 -->> 调用了check方法的jQuery对象
        this.prop("checked", true);
    },
    uncheck: function () {
        // 实现选中所有的复选框
        this.prop("checked", false);
    }
});
function checkFn(){
    // 获得所有的checkbox复选框对象，调用方法check().会传递这个对象到方法中，进而
    $("input[type = 'checkbox']").check();
}
function uncheckFn(){
  1. $.extend(Object)
    • 增强jQuery对象自身（$ / jQuery）的功能。全局级别 
<body>

    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            // 扩展一个max方法
            max:function(a ,b){
                // 返回两个参数中较大的值
                return a > b ? a : b;
            }, 
            min:function(a, b){
                // 返回两个参数中较小的值
                return a < b ? a : b;
            }
        });

        // 全局的方法，所以可以使用$直接调用
        var numOfMax = $.max(23, 98);
        alert("numOfMax -->>" + numOfMax);

        // 用Math调用也可以...
        var numOfMin = Math.min(33, 88);
        alert('numOfMin -->> ' + numOfMin);
    </script>
</body>