jquery 高级

最新推荐文章于 2021-08-22 09:12:50 发布

原创最新推荐文章于 2021-08-22 09:12:50 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery 高级

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍使用JQuery实现表格排序功能的方法，包括通过点击表头进行排序，并讲解了JQuery的动画效果，如显示、隐藏、滑动及淡入淡出等，适用于网页动态效果的快速开发。

Jquery对表格排序

 (function($){
        $.fn.extend({
            "makeSortable":function(){
                var table=$(this),
                    headers=table.find('th');
                for(var i=0,len=headers.length;i<len;i++){
                    (function(n){
                        var flag=false;
                        headers.eq(n).click(function() {
                            var tbody=table.children('tbody').eq(0);
                            var rows=tbody.children('tr');
                            rows=Array.prototype.slice.call(rows,0);

                                3代表第几列 从0开始
                            rows.sort(function(row1,row2){
                                var val1=$(row1).children('td').eq(3).text();  
                                var val2=$(row2).children('td').eq(3).text();
                                if(val1>val2){
                                    return 1;
                                }else if(val1<val2){
                                    return -1;
                                }else{
                                    return 0;
                                }
                            });

                            if(flag){
                                rows.reverse();
                            }

                            tbody.append(rows);
                            flag=!flag;
                        });
                    }(i));
                }

                return this;
            }
        });
    })(jQuery);

    $(function(){
        $(".table").makeSortable();   table为表格class属性
    });

1. 动画

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

2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])

        function hideFn(){
            $("#showDiv").hide("slow","swing",function(){      慢速 变换
                alert("隐藏了...")
            });
        function hideFn(){
            $("#showDiv").toggle(1000,"linear",function(){   匀速  10s
                alert("隐藏了...")
            });

2. 滑动显示和隐藏方式
               1. slideDown([speed],[easing],[fn])
               2. slideUp([speed,[easing],[fn]])
               3. slideToggle([speed],[easing],[fn])

            滑动方式
            $("#showDiv").slideDown("slow");

           3. 淡入淡出显示和隐藏方式
               1. fadeIn([speed],[easing],[fn])
               2. fadeOut([speed],[easing],[fn])
               3. fadeToggle([speed,[easing],[fn]])

    $("#showDiv").fadeToggle("slow");
       }

2.遍历

第一种方法

<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
var citys = $("#city li");
citys.each(function () {
    alert(this.innerHTML);  3.1 获取li对象 第一种方式 this
});

获取li对象第二种方式在回调函数中定义参数 index（索引）遍历的到的 element（元素对象）

回调函数中 : 如果当前function返回为false，则结束循环(break)。如果返回为true，则结束本次循环，继续下次循环(continue)

        citys.each(function (index,element) {
                alert(index+":"+$(element).html());
                if("上海" == $(element).html()){    
                        return true;                         
                    }
                    alert(index+":"+$(element).html());
               });

第二,三种方法

        $.each(citys,function () {
                    alert($(this).html());
                });
     for(li of citys){
                    alert($(li).html());
                }