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 width:100px;
11 height:200px;
12 margin-top:20px;
13 }
14 p{
15 width: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>
