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>
巴特西

jquery链式原理.html

最新文章

热门文章
