1.对象概念

js中的所有对象
image.png
DOM -> Document Object Model 文档对象模型
DOM 对象 -> 宿主对象

3种对象 ： ECMAScript
1.本地对象：Native Object
Object Function Array String Number Boolean Error EvalError SyntaxError RangeError ReferenceError TypeError URIError
Data RegExp
2.内置对象 Built-in Object
Global Math

ECMA -> isNaN() parseInt() Number decodeURI encodeURI Infinity NaN undefined
本地对象和内置对象都是ES的内部对象
3.宿主对象 Host Object
执行JS脚本的环境提供的对象，浏览器对象，兼容性问题
浏览器对象windows(BOM)和document(DOM)-> w3c
DOM不同的浏览器不同
image.png

DOM操作XML

文档类型DOM（Document Object Model）主要用于HTML文档和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过节点的操作，来实现对文档内容进行增删改查。
image.png

  1. <body>
  2.     <person>
  3.         <name>张三</name>
  4.         <sex>男</sex>
  5.         <age>18</age>
  6.     </person>
  7.     <person>
  8.         <name>李四</name>
  9.         <sex>女人</sex>
  10.         <age>23</age>
  11.     </person>
  12.     XML -> XHML ->HTML
  13.     <script type="text/javascript">
  14.         var person = document.getElementsByTagName('person')[0];
  15.         console.log(person);
  16.     </script>
  17. </body>

能获取xml的元素
image.png
image.png
image.png

有些标签属性最好别用，像name，很有可能与内置的名字有冲突
image.png
image.png

image.png
打印：张三
username可以打印，与name时的情况不同

添加样式

image.png
image.png
不是操作css，而是给内联样式的style赋值，内联样式优先级高，覆盖了之前的样式
dom是无法操作样式表的，操作不了
image.png

image.png
image.png
也是修改了样式

2.标签与元素的区别同

  1.     <person>
  2.         <name></name>
  3.         <sex></sex>
  4.         <age></age>
  5.     </person>
  6.       <!--<person></person>标签  -->
  7.     <person>
  8.         <name></name>
  9.         <sex></sex>
  10.         <age></age>
  11.     </person>
  12.     <!-- <person>
  13.         <name></name>
  14.         <sex></sex>
  15.         <age></age>
  16.     </person>  --> 元素

3.幻灯片展示demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./index.css">
  9. </head>
  10. <body>
  11.     <div class="slider-wrap">
  12.         <div class="slider">
  13.             <ul class="slider-list">
  14.                 <li class="slider-item active">
  15.                     <a href=""></a>
  16.                     <img src="./1.jpg" alt="">
  17.                 </li>
  18.                 <li class="slider-item">
  19.                     <a href=""></a>
  20.                     <img src="./2.jpg" alt="">
  21.                 </li>
  22.                 <li class="slider-item">
  23.                     <a href=""></a>
  24.                     <img src="./3.jpg" alt="">
  25.                 </li>
  26.                 <li class="slider-item">
  27.                     <a href=""></a>
  28.                     <img src="./4.jpg" alt="">
  29.                 </li>
  30.                 <li class="slider-item">
  31.                     <a href=""></a>
  32.                     <img src="./5.jpg" alt="">
  33.                 </li>
  34.                 <li class="slider-item">
  35.                     <a href=""></a>
  36.                     <img src="./6.jpg" alt="">
  37.                 </li>
  38.             </ul>
  39.         </div>
  40.         <div class="thumbs">
  41.             <ul class="thumbs-list">
  42.                 <li class="thumb-item cur">
  43.                     <a href="javascript:;">
  44.                         <img src="./1.jpg" alt="">
  45.                     </a>
  46.                 </li>
  47.                 <li class="thumb-item">
  48.                     <a href="javascript:;">
  49.                         <img src="./2.jpg" alt="">
  50.                     </a>
  51.                 </li>
  52.                 <li class="thumb-item">
  53.                     <a href="javascript:;">
  54.                         <img src="./3.jpg" alt="">
  55.                     </a>
  56.                 </li>
  57.                 <li class="thumb-item">
  58.                     <a href="javascript:;">
  59.                         <img src="./4.jpg" alt="">
  60.                     </a>
  61.                 </li>
  62.                 <li class="thumb-item">
  63.                     <a href="javascript:;">
  64.                         <img src="./5.jpg" alt="">
  65.                     </a>
  66.                 </li>
  67.                 <li class="thumb-item">
  68.                     <a href="javascript:;">
  69.                         <img src="./6.jpg" alt="">
  70.                     </a>
  71.                 </li>
  72.             </ul>
  73.         </div>
  74.     </div>
  75. </body>
  76. <script src="./index.js"></script>
  77. <script type="text/javascript">
  78.     var slider = new Slider({
  79.         sliderItem:'slider-item',
  80.         thumbItem:'thumb-item'
  81.     })
  82. </script>
  83. </html>
  1. *{
  2.     margin: 0px;
  3.     padding: 0px;
  4.     text-decoration: none;
  5.     list-style: none;
  6. }
  7. img{
  8.     width: 100%;
  9.     height: 100%;
  10. }
  11. .slider-wrap{
  12.     width: 996px;
  13.     height: 480px;
  14.     margin: 50px auto;
  15.     border: 1px solid #000;
  16. }
  17. .slider{
  18.     float: left;
  19.     position: relative;
  20.     width: 853px;
  21.     height: 480px;
  22. }
  23. .slider .slider-item{
  24.     display: none;
  25.     position: absolute;
  26.     top:0;
  27.     left: 0;
  28.     height: 480px;
  29. }
  30. .slider .slider-item.active{
  31.     display: block;
  32. }
  33. .thumbs{
  34.     float: left;
  35.     width: 142px;
  36.     height: 480px;
  37. }
  38. .thumb-item{
  39.     height: 80px;
  40.     opacity: .5;
  41. }
  42. .thumb-item.cur{
  43.     opacity: 1;
  44. }
  1. // var thumbItem = document.getElementsByClassName('thumb-item'),
  2. //     sliderItem = document.getElementsByClassName('slider-item');
  3. // console.log(thumbItem);
  4. // console.log(sliderItem);
  5. // for(var i = 0;i<thumbItem.length;i++){
  6. //     (function(j){
  7. //         thumbItem[j].onclick = function () {
  8. //             // console.log(i);
  9. //             for(var k=0;k<thumbItem.length;k++){
  10. //                 thumbItem[k].className = 'thumb-item';
  11. //                 sliderItem[k].className = 'slider-item';
  12. //             }
  13. //             sliderItem[j].className +=' active';
  14. //             this.className += ' cur';
  15. //         }
  16. //     })(i)
  17. // }
  19. ;(function(){
  20.     var Slider = function(opt){
  21.         this.sliderItem = document.getElementsByClassName(opt.sliderItem);
  22.         this.thumbItem  = document.getElementsByClassName(opt.thumbItem);
  23.         this.bindClick();
  24.     }
  25.     Slider.prototype = {
  26.         bindClick: function(){
  27.             var slider = this.sliderItem,
  28.                 thumbs = this.thumbItem;
  29.             for(var i = 0;i<thumbs.length;i++){
  30.                 (function(j){
  31.                     thumbs[j].onclick = function(){
  32.                         for(var k =0;k<thumbs.length;k++){
  33.                             /*给所有设置默认状态*/
  34.                             thumbs[k].className= 'thumb-item';
  35.                             slider[k].className= 'slider-item';
  36.                         }
  37.                         // 给点击的图片单独设置
  38.                         this.className += ' cur';
  39.                         slider[j].className+=' active';
  40.                     }
  41.                 })(i)
  42.             }
  43.         }
  44.     }
  45.     window.Slider = Slider;
  46. })();

image.png

思路

css写好，点击图片，通过在元素上删除类，添加类，从而改变元素上的css代码
小图设置透明度0.5|1，大图设置display：none|block

html、css布局思路
float左右布局，左面的大div中有六张大图片，让它们重合，通过absolute，把li都设置成absolute，就可以让其重合

  1. <div id="box" class="num num1"></div>
  2. <script >
  3.     var div=document.getElementById("box");
  4.     div.className='num';
  5. </script>

image.png
通过给className命名来清空之前的class类

作业 选项卡demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./indexdemo.css">
  9. </head>
  10. <body>
  11.     <div class="tab-wrap">
  12.         <div class="tab clearfix">
  13.             <div class="tab-item cur">
  14.                 <a href="javascript:;">选项卡1</a>
  15.             </div>
  16.             <div class="tab-item">
  17.                 <a href="javascript:;">选项卡2</a>
  18.             </div>
  19.             <div class="tab-item">
  20.                 <a href="javascript:;">选项卡3</a>
  21.             </div>
  22.         </div>
  23.         <div class="page">
  24.             <div class="page-item active">1</div>
  25.             <div class="page-item">2</div>
  26.             <div class="page-item">3</div>
  27.         </div>
  28.     </div>
  29. </body>
  30. <script src="./indexdemo.js">
  31. </script>
  32. <script>
  33.         var tab = new Tab({
  34.         tabItem: 'tab-item',
  35.         pageItem: 'page-item',
  36.         cur: 'cur',
  37.         active : 'active'
  38.     })
  39. </script>
  40. </html>
  1. *{
  2.     margin: 0px;
  3.     padding: 0px;
  4.     list-style: none;
  5.     text-decoration: none;
  6. }
  7. .clearfix::after,.clearfix::before{
  8.     content: '';
  9.     display: table;
  10.     clear: both;
  11. }
  12. /* 19 22 */
  13. .tab-wrap{
  14.     width: 500px;
  15.     margin: 50px auto;
  16. }
  17. .tab .tab-item{
  18.     float: left;
  19.     width: 100px;
  20.     height: 50px;
  21.     line-height: 50px;
  22. }
  23. .tab .tab-item.cur{
  24.     background-color: #000;
  25.     /* color: #fff; */
  26. }
  27. .tab .tab-item a{
  28.     display: block;
  29.     height: 100%;
  30.     text-align: center;
  31.     color: #000;
  32. }
  33. .tab .tab-item.cur a{
  34.     color: #fff;
  35. }
  36. .page{
  37.     position: relative;
  38.     height: 450px;
  39.     border: 1px solid #000;
  40. }
  41. .page .page-item{
  42.     display: none;
  43.     position: absolute;
  44.     top: 0;
  45.     left: 0;
  46.     width: 100%;
  47.     height: 100%;
  48.     text-align: center;
  49.     line-height: 450px;
  50.     font-size: 100px;
  51. }
  52. .page .page-item.active{
  53.     display: block;
  54. }
  1. // var tabsItem = document.getElementsByClassName('tab-item'),
  2. //     pageItem = document.getElementsByClassName('page-item');
  3. //     console.log(tabsItem,pageItem);
  4. // for (var i = 0; i < tabsItem.length; i++) {
  5. //     (function(j) {
  6. //         tabsItem[j].onclick = function() {
  7. //             for (var k = 0; k < tabsItem.length; k++) {
  8. //                 tabsItem[k].className = 'tab-item';
  9. //                 pageItem[k].className = 'page-item';
  10. //             }
  11. //             pageItem[j].className += ' active';
  12. //             this.className += ' cur';
  13. //         }
  14. //     })(i);
  15. // }
  16. ;(function () {
  17.     var Tab = function (opt) {
  18.         this.tabs = document.getElementsByClassName(opt.tabItem);
  19.         this.pages = document.getElementsByClassName(opt.pageItem);
  20.         this.bindClick(opt.tabItem, opt.pageItem, opt.cur, opt.active);
  21.     }
  22.     Tab.prototype = {
  23.         bindClick: function (tabItem, pageItem, cur, active) {
  24.             var tabs = this.tabs;
  25.             var pages = this.pages;
  26.             for (var i = 0; i < tabs.length; i++) {
  27.                 (function (j) {
  28.                     tabs[j].onclick = function () {
  29.                         for (var k = 0; k < tabs.length; k++) {
  30.                             tabs[k].className = tabItem;
  31.                             pages[k].className = pageItem;
  32.                         }
  33.                         this.className = tabItem + ' ' + cur;
  34.                         pages[j].className = pageItem + ' ' + active;
  35.                     }
  36.                 })(i);
  37.             }
  38.         }
  39.     }
  40.     window.Tab = Tab;
  41. })();