原生JS 代码和用 jQuery 实现效果各有什么优劣势

JavaScript010

原生JS 代码和用 jQuery 实现效果各有什么优劣势,第1张

jq最终还是要通过js来实现效果的，所以在效率上肯定是原生js代码要高一些，jq主要是用起来比较方便。jq实际上就是把一些比较复杂的js代码封装起来做成函数或方法，编程者只需调用这些方法和函数就能实现原来要用一大堆代码才能实现的目的，这就跟吃纯手工面条和吃方便面的差别一样。

如果是朝左翻页，就把当前页朝左偏移100%的宽度，让下一页同样朝左偏移100%宽度。以下是代码部分：

<html><head lang="en"><meta charset="UTF-8"><title></title><style>.banner{ width:300pxheight:250pxposition: relativez-index: 100background: skybluemargin:100px autooverflow:hidden } .banner .first{ left:0} .banner a{ width: 100%height: 100%position: absolutedisplay:blocktop:0left:100%} .banner a img{ width: 100%height: 100%} .banner .pre{ position: absoluteleft:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .banner .next{ position: absoluteright:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .

CSS里面增加这段代码

.subA,

.subB {

    display: none

}

然后增加这段JS，大功告成

<script>

    var ul = document.getElementById('box')

    ul.addEventListener('click', function (evnet) {

        if(evnet.target && evnet.target.nodeName == 'BUTTON'){

            var parent = evnet.target.parentNode

            var element = parent.getElementsByClassName('sub' + evnet.target.textContent)[0]

            if (element.style.display == 'none'|| !element.style.display) {

                element.style.display = 'block'

            } else {

                element.style.display = 'none'

            }

        }

    })

</script>