1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title></title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!--<link href="css/style.css" rel="stylesheet">--> 8 <style> 9 div{ 10 100px; 11 height:200px; 12 margin-top:20px; 13 } 14 p{ 15 100px; 16 height:200px; 17 margin-top:20px; 18 } 19 .className{ 20 background: #f94 !important; 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 <div class="div2"></div> 27 <div id="div3"></div> 28 <p></p> 29 <p></p> 30 <script> 31 // 一、面向对象的基本用法，和jquery的基本实现方式 32 // 1.需求：给div设置背景颜色 33 // 面向过程的基本做法 34 // 1.获取元素，2.设置样式（简单来看并没有什么不妥，但是我们现在又要给别的元素设置样式呢，那么是不是代码就会重复？） 35 // 下面我们使用面向过程的方式实现一遍 36 var divs = document.querySelectorAll('div') 37 for (var i = 0; i < divs.length; i++) { 38 divs[i].style.backgroundColor = 'pink' 39 } 40 // 思考：那我们现在还要将所有的p元素的背景颜色做设置呢？是不是又要重新复制一遍上面的代码？ 41 42 // 二、为了不重复上面的代码，对于初学者我们第一个也许会想到，函数的封装（其实函数的封装就是面向对象的启蒙）下面我们使用函数的封装来实现一遍上面的需求 43 // 获取元素的函数 44 var getEles = function (element) { 45 return document.querySelectorAll(element) 46 } 47 // 设置样式的函数 48 var setStyle = function (eles, color) { 49 for (var i = 0; i < eles.length; i++) { 50 eles[i].style.backgroundColor = color 51 } 52 } 53 // 现在我们先对所有的div元素设置背景颜色 54 setStyle(getEles('div'), '#333') 55 // 现在我们再对所有的p元素设置背景样式 56 setStyle(getEles('p'), '#0f4') 57 58 // 思考：加入我现在只要更改其中某一个元素的背景样式呢，显然我们封装的园区元素的函数就不有点不适用了，怎么办呢，在封装一个函数？其实是可行的 59 // 但是有一个问题就是，获取dom元素的方式有很多种，哪我们就要封装很多方法，然而这里有一个问题，就是全局变量污染问题 60 // 那为了解决这个问题，我们可以将所有的方法封装到一个统一的对象里面 61 var jquery = { 62 // 这里是获取元素模块 63 getEles: { 64 selectAll: function (eles) { 65 return document.querySelectorAll(eles) 66 }, 67 selectId: function (id) { 68 return document.getElementById(id) 69 }, 70 selectClass: function (className) { 71 return document.getElementsByClassName(className) 72 } 73 }, 74 // 这里是设置样式的模块 75 setStyle: { 76 setBgColor: function (eles, color) { 77 if (eles.length) { 78 for (var i = 0; i < eles.length; i++) { 79 eles[i].style.background = color 80 } 81 } else { 82 eles.style.backgroundColor = color 83 } 84 }, 85 setClass: function (eles, className) { 86 for (var i = 0; i < eles.length; i++) { 87 eles[i].className = className 88 } 89 } 90 } 91 } 92 // 设置全部div的背景颜色 93 jquery.setStyle.setBgColor(jquery.getEles.selectAll('div'), 'red') 94 // 设置全部p的背景颜色 95 jquery.setStyle.setBgColor(jquery.getEles.selectAll('p'), 'yellow') 96 // 根据id设置背景 97 jquery.setStyle.setBgColor(jquery.getEles.selectId('div3'), 'blue') 98 // 根据className设置样式 99 jquery.setStyle.setClass(jquery.getEles.selectClass('div2'), 'className') 100 </script> 101 </body> 102 </html>