jq封装插件

作者: LorenaLu | 来源:发表于2017-06-24 09:24 被阅读0次

    读代码-梳理步骤(文字记录)-实现代码-学会调试
    http://hemin.cn/jq/ jq工具
    http://caniuse.com 查找兼容浏览器版本
    右键菜单、
    手风琴菜单、模态化窗口
    1、封装$插件

        $.fn.extend({
            changeColor:function(){
                return this.each(function(m,n){
                    var defalutColor = '';
                    var trs = $(n).children('tbody').children('tr');
                    defalutColor = trs.length>=5?'red':'green';
                    trs.hover(function(){
                        $(this).css('backgroundColor',defalutColor)
                    },function(){
                        $(this).css('backgroundColor','white')
                })
            })
        }
    })
        $('table').changeColor();
    

    $.fn.extend将插件封装进$函数原型中,使用return使其支持链式语法,$.extend()是将工具封装进$中。

    $()的三种参数类型
    1、字符串 1.html 标记 2、选择器
    2、函数 页面加载完成后的回掉函数
    3、DOM对象 将DOM对象转换为jQueryElements
    console.log()可以取代alert()或document.write(),在网页脚本中使用console.log()时,会在浏览器控制台打印出信息。
    console.dir()可以显示一个对象所有的属性和方法。

    相关文章

      网友评论

        本文标题:jq封装插件

        本文链接:https://www.haomeiwen.com/subject/xwjzqxtx.html