面向对象 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link href="css/style.css" rel="stylesheet">-->
    <style>
      div{
        width:100px;
        height:200px;
        margin-top:20px;
      }
      p{
        width:100px;
        height:200px;
        margin-top:20px;
      }
      .className{
        background: #f94 !important;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div class="div2"></div>
    <div id="div3"></div>
    <p></p>
    <p></p>
    <script>
      // 一、面向对象的基本用法，和jquery的基本实现方式
      // 1.需求：给div设置背景颜色
      // 面向过程的基本做法
      // 1.获取元素，2.设置样式（简单来看并没有什么不妥，但是我们现在又要给别的元素设置样式呢，那么是不是代码就会重复？）
      // 下面我们使用面向过程的方式实现一遍
      var divs = document.querySelectorAll('div')
       for (var i = 0; i < divs.length; i++) {
         divs[i].style.backgroundColor = 'pink'
       }
      //  思考：那我们现在还要将所有的p元素的背景颜色做设置呢？是不是又要重新复制一遍上面的代码？

      // 二、为了不重复上面的代码，对于初学者我们第一个也许会想到，函数的封装（其实函数的封装就是面向对象的启蒙）下面我们使用函数的封装来实现一遍上面的需求
      // 获取元素的函数
      var getEles = function (element) {
        return document.querySelectorAll(element)
      }
      // 设置样式的函数
      var setStyle = function (eles, color) {
        for (var i = 0; i < eles.length; i++) {
          eles[i].style.backgroundColor = color
        }
      }
      // 现在我们先对所有的div元素设置背景颜色
      setStyle(getEles('div'), '#333')
      // 现在我们再对所有的p元素设置背景样式
      setStyle(getEles('p'), '#0f4')

      // 思考：加入我现在只要更改其中某一个元素的背景样式呢，显然我们封装的园区元素的函数就不有点不适用了，怎么办呢，在封装一个函数？其实是可行的
      // 但是有一个问题就是，获取dom元素的方式有很多种，哪我们就要封装很多方法，然而这里有一个问题，就是全局变量污染问题
      // 那为了解决这个问题，我们可以将所有的方法封装到一个统一的对象里面
      var jquery = {
        // 这里是获取元素模块
        getEles: {
          selectAll: function (eles) {
            return document.querySelectorAll(eles)
          },
          selectId: function (id) {
            return document.getElementById(id)
          },
          selectClass: function (className) {
            return document.getElementsByClassName(className)
          }
        },
        // 这里是设置样式的模块
        setStyle: {
          setBgColor: function (eles, color) {
            if (eles.length) {
              for (var i = 0; i < eles.length; i++) {
                eles[i].style.background = color
              }
            } else {
              eles.style.backgroundColor = color
            }
          },
          setClass: function (eles, className) {
            for (var i = 0; i < eles.length; i++) {
              eles[i].className = className
            }
          }
        }
      }
      // 设置全部div的背景颜色
      jquery.setStyle.setBgColor(jquery.getEles.selectAll('div'), 'red')
      // 设置全部p的背景颜色
      jquery.setStyle.setBgColor(jquery.getEles.selectAll('p'), 'yellow')
      // 根据id设置背景
      jquery.setStyle.setBgColor(jquery.getEles.selectId('div3'), 'blue')
      // 根据className设置样式
      jquery.setStyle.setClass(jquery.getEles.selectClass('div2'), 'className')
    </script>
  </body>
</html>

面向对象。　　

这个写的不错，拿来存下。可以学习学习。

posted @ 2018-06-21 16:05  \面朝阳光/  阅读(90)  评论(0)    收藏  举报