• jquery链式原理.html


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .redbg{
                    background: pink;
                }
            </style>
            <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <h1>helloworld</h1>
            <h1>helloworld</h1>
            <script type="text/javascript">
    //            document.querySelector('h1').css({backgroud:'pink'})
    //            
    //            $('h1').style.background = 'pink'
    
    
    //            var $h1 = $('h1')
    //            var h1 = document.querySelector('h1')
                
    //            $('h1').addClass('tt').html('hello').addClass('yy')
                
                //通过this,将上一层对象返回出去,那么将可以实现链式的函数调用
                (function(w){
                    w.laochen = function(selector){
                        domObj = document.querySelectorAll(selector)
                        domObj.__proto__.addClass = function(addName){
    //                        console.log(this)
                            this.forEach(function(a){
                                a.className = a.className + ' ' + addName        
                            })
                            return this
    //                    }
    //                    domObj.__proto__.html = function(htmlContent){
    //                        if(!htmlContent){
    //                            return this[0].innerHTML
    //                        }else{
    //                            this.forEach(function(item){
    //                                item.innerHTML = htmlContent
    //                            })
    //                            return this
    //                        }
    //                    }
                        return domObj
                    }
                    
                    
                    
    //                w.$ = w.laochen
    //                
    //            })(window)
            </script>
        </body>
    </html>
  • 相关阅读:
    科技小论文
    一线架构—细化架构
    python20.04.10
    软件架构总结
    信息领域热词分析
    架构即未来阅读笔记二
    构架即未来阅读笔记一
    科技小论文之软件质量
    Pre-architecture的需求
    软件质量
  • 原文地址:https://www.cnblogs.com/wwthuanyu/p/10555131.html
Copyright © 2020-2023  润新知