30进阶：把 jQuery 加到简历里

作者: 格林姆大师 | 来源:发表于2018-07-01 09:42 被阅读0次

30进阶：把 jQuery 加到简历里
基础
jQuery基础
H36-把 MVC 的 VC 加到简历里
2018-02-07 把MVC的VC加到简历里
jQuery文档处理
进阶篇：jQuery ajax & jsonp（21-3
jQuery-stickup插件的写法
jQuery基础
jQuery进阶

1. 无缝轮播

实现方法一：

<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <link rel="stylesheet" href="./style.css">   
</head>
<body>
    <div class="window">
        <div class="images" id="images">
          <img src="./image/1.png" alt="图片" width=400>
          <img src="./image/2.png" alt="图片" width=400>
          <img src="./image/3.png" width=400 alt="图片">
          <img src="./image/4.png" alt="图片" width=400>
          <img src="./image/5.png" alt="图片" width=400>
        </div>
        <div class="slideArray"></div> //知识点---1
    </div>
    <span id="button">
        <button>第1张</button>
        <button>第2张</button>
        <button>第3张</button>
        <button>第4张</button>
    </span>  

    <script src="./jquery-3.3.1.js"></script>
    <script src="./main.js"></script>
</body>

.images{
    position: absolute;
    display: none;
  }
  .window{
    border: 1px solid blue;
    width: 400px;
    height: 280px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
  }
  .window .slideArray{
    position: relative;
    width: 300%;
    height: 100%;
    top: 0;
    left: -400px;
    z-index: 1;
  }
  .window .slideArray img{
    position: absolute;
    top: 0;
    transition: all 1s;
  }
  .window .slideArray img:nth-child(1){
    left: 0px;
  }
  .window .slideArray img:nth-child(2){
    left: 400px;
  }
  .window .slideArray img:nth-child(3){
    left: 800px;
  }


// setTimeout(function(){
//   $slideArray.children().eq(0).remove()
//   i_current += 1
//   console.log(i_current)
//   console.log(i_right)
//   $slideArray.append($images.eq(i_right()).clone())
// },3000)
var $slideArray
var $images
var i_current
initialize()
var timerId = setInterval(function(){
  makeCurrent()
  i_current += 1
  makeEnter()
},3000)


function initialize(){
  $slideArray = $('.slideArray')
  $images = $('#images').children()
  i_current = 0
  $slideArray.append($images.eq(i_left()).clone())   //知识点---2
  $slideArray.append($images.eq(0).clone())
  $slideArray.append($images.eq(i_right()).clone())
}
function i_left(){
  return (i_current-1 >= 0) ? i_current : 4
}
function i_right(){
  return (i_current+1)%5
}
function makeCurrent(){
  $slideArray.children().eq(0).remove()    //知识点---3
}
function makeEnter(){
  $slideArray.append($images.eq(i_right()).clone())
}

知识点---1
知识点---2
知识点---3

2. DOM事件模型

DOM事件的开始：

image.png

在W3C指定DOM标准之前的各浏览器DOM事件统一算入 DOM Level 0。

关于DOM Leve 0 的一个小测试,下面代码中，哪些语法是正确的：

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    function print(){
      console.log('hi')
    }
  </script>
</head>
<body>
  <button id=X onclick="print">A</button> <!-- 1 -->
  <button id=Y onclick="print()">B</button> <!-- 2 -->
  <button id=Z onclick="print.call()">C</button> <!-- 3 -->
</body>
</html>

X.onclick = print // --- 4
Y.onclick = print() // --- 5
Z.onclick = print.call() // --- 6

答：2、3、4 可以实现。
解析：HTML 与 JS 是不同的语言，因此写法有可能不一样；
HTML 中：

onclick = "要执行的代码" // 一段代码，类型为字符串。
一旦用户点击，浏览器就 eval("要执行的代码").
------
关于eval：
function print(){
      console.log('hi')
    }
undefined
eval(print)
  ƒ print(){
      console.log('hi')
    }
eval(print())
 hi

JS 中：

X.onclick = print //  值的类型为 函数对象
Y.onclick = print() //   值的类型为 undefined
Z.onclick = print.call() //  值的类型为 undefined

一旦用户点击，那么浏览器就执行：
X.onclick.call(X,{})，.onclick 是对象 X 的一个属性，
X.onclick = print 就是一对键值，

2.1 DOM Leve 1

DOM Leve 1有两个版本，1998年与2000年；
DOM Leve 1（2000）中只有两个章节，Events 并没有单独作为一章说明。

2.2 DOM Leve 2

DOM Leve 2 对 Events 做了单独的说明，并且说明的特别详细，在DOM Leve 3 中没有在单独成章再次说明，因此，目前的DOM Events 主要还是以DOM Leve 2的标准为主。

DOM Leve 2 小测试，两种 Event 语法的区别：

<body>
  <button id=xxx onclick="print">xxx</button>
</body>

// DOM Leve 2 语法
xxx.addEventListener('click',function(){
  console.log(1)
})
xxx.addEventListener('click',function(){
  console.log(2)
})
//xxx 拥有一个队列 addEventListener ，队列里面可以随时增加 Event 而不会覆盖之前已有的 Event。
---------------------------------------------------------------------------------------
// DOM Leve 0 语法
xxx.onclick = function(){
  console.log(3)
}
xxx.onclick = function(){
  console.log(4)
}
// onclick 只是 xxx 的一个属性，而属性的值只会指向一个，后来的会覆盖以前的。

addEventListener 用法的进一步演示：

function f1(){
  console.log(1)
}
function f2(){
  console.log(2)
}
function f3(){
  console.log(3)
}
xxx.addEventListener('click',f1)
xxx.addEventListener('click',f2)
xxx.removeEventListener('click',f1)
xxx.addEventListener('click',f3)
xxx.removeEventListener('click',f3)
----------------------------------
点击时，打印结果为：2。
每一种事件都有一个自己的单独的队列，click 有自己的；mouseLeave 也有自己的；

.one('click',function(){}) 是怎么实现的？

function f1(){
  console.log(1)
  xxx.removeEventListener('click',f1)
}

xxx.addEventListener('click',f1)

多层容器下，事件的执行，例：

<body>
<div id="grand1">
  爷爷
  <div id="father1">
    爸爸
    <div id="child1">儿子</div>
  </div>
</div>
</body>


grand1.addEventListener('click',function f1(){
    console.log('爷爷')
},undefined)
father1.addEventListener('click',function f2(){
    console.log('爸爸')
},)
child1.addEventListener('click',function f3(){
    console.log('儿子')
},)

1. 点击儿子时，是否也点击了爸爸和爷爷？？？
答：是。

2. 点击儿子时，三个函数是否调用？？？
答：是。

3. 点击儿子时，三个函数的调用顺序是 1 2 3  or 3 2 1？？？
答：默认情况下是 3 2 1。
w3c: 都可以。有第3个参数决定
false: undefined null '' 0 NaN
当第3个参数为 false值 时，顺序为 3 2 1，为true 时，顺序 1 2 3 。

child1.addEventListener('click',function f3(){
    console.log('儿子1')
},)
child1.addEventListener('click',function f4(){
    console.log('儿子2')
},)

4. 对同一个元素，执行顺序按队列来，先进先出。

画个图来理解：

image.png
事件模型：先捕获，后冒泡；即从捕获 -> 冒泡；
哪一次事件的第3个参数为 true 则在捕获阶段执行，为 false 则在冒泡阶段执行。
那么,看下例：

方式1：
child1.addEventListener('click',function f3(){
    console.log('儿子-捕获')
},true)
child1.addEventListener('click',function f3(){
    console.log('儿子-冒泡')
},false)
--------------------------------------
方式2：
child1.addEventListener('click',function f3(){
    console.log('儿子-冒泡')
},false)
child1.addEventListener('click',function f3(){
    console.log('儿子-捕获')
},true)

方式1 与方式2 的执行顺序相同吗？？？？
答：不同，What the fuck......
w3c：在事件的最内层元素上，不区分捕获与冒泡，按队列规则来干。