前端学习---(4)js基础-2

事件:

事件的三要素：事件源、事件、事件驱动程序。

事件处理步骤:

（1）获取事件源：document.getElementById("box"); // 类似于Android里面的findViewById

（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };

（3）书写事件驱动程序：关于DOM的操作。

bash 复制代码

<body>
<div id="box1"></div>
<script type="text/javascript">
    // 1、获取事件源
    var div = document.getElementById("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>
</body>

获取事件源的方式;

bash 复制代码

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组
var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，

绑定事件的方式

方式一：直接绑定匿名函数

bash 复制代码

<div id="box1" ></div>
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

方式二：先单独定义函数，再绑定

bash 复制代码

 <div id="box1" ></div>
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

方式三：行内绑定

bash 复制代码

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
    function fn() {
        alert("我是弹出的内容");
    }
</script>

js基础三要素

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

BOM：浏览器对象模型（Browser Object Model），操作浏览器部分功能的API。比如让浏览器自动滚动。

节点:

构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点;

见节点分为四类：

bash 复制代码

文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点（标签）：HTML标签。
属性节点（属性）：元素的属性。
文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。

节点的获取: 跟事件源

bash 复制代码

var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组

获取节点之后可以操作其中的节点(内容,样式等)

绑定事件的方式

onclick

bash 复制代码

<body>
<button>点我</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    //这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的
    btn.onclick = function () {
        console.log("事件1");
    }
    btn.onclick = function () {
        console.log("事件2");
    }
</script>
</body>

addEventListener（高版本浏览器）

bash 复制代码

<body> <button>按钮</button> <script>
    var btn = document.getElementsByTagName("button")[0];
    // addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
    // 这种写法不存在响应函数被覆盖的情况。（更适合团队开发）
    btn.addEventListener("click", fn1);
    btn.addEventListener("click", fn2);
    function fn1() {
        console.log("事件1");
    }
    function fn2() {
        console.log("事件2");
    }
</script> </body>

attachEvent（IE8及以下版本浏览器）

bash 复制代码

<body>
     <button>按钮</button>
     <script>
         var btn = document.getElementsByTagName('button')[0];
         btn.attachEvent('onclick', function() {
             console.log('事件1');
         });
         btn.attachEvent('onclick', function() {
             console.log('事件2');
         });
     </script>
    </body>

DOM事件流

事件传播的三个阶段是：

bash 复制代码

事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。

事件捕获

addEventListener可以捕获事件

捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。

bash 复制代码

  window.addEventListener("click", function () {
        alert("捕获 window");
    }, true);

    document.addEventListener("click", function () {
        alert("捕获 document");
    }, true);

    document.documentElement.addEventListener("click", function () {
        alert("捕获 html");
    }, true);

    document.body.addEventListener("click", function () {
        alert("捕获 body");
    }, true);

    fatherBox.addEventListener("click", function () {
        alert("捕获 father");
    }, true);

    childBox.addEventListener("click", function () {
        alert("捕获 child");
    }, true);

事件冒泡

当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。

子元素的事件被触发时，父元素的同样的事件也会被触发。

冒泡顺序：div -> body -> html -> document -> window

以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。

冒泡也是可以被阻止的;

常见的 BOM 对象

bash 复制代码

Window：代表整个浏览器的窗口，同时 window 也是网页中的全局对象。
Navigator：代表当前浏览器的信息，通过该对象可以识别不同的浏览器。
Location：代表当前浏览器的地址栏信息，通过 Location 可以获取地址栏信息，或者操作浏览器跳转页面。
History：代表浏览器的历史记录，通过该对象可以操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效。
Screen：代表用户的屏幕信息，通过该对象可以获取用户的显示器的相关信息。

定时器

setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）

setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）

setInterval使用

bash 复制代码

第一种方式
  let num = 1;
   setInterval(function () {
       num ++;
       console.log(num);
   }, 1000);

第二种方式
 setInterval(fn,1000);
 function fn() {
       num ++;
       console.log(num);
    }

清理定时器:

定时器的返回值是作为这个定时器的唯一标识，可以用来清除定时器。

clearInterval(唯一标识)

setTimeout() 的使用

bash 复制代码

定义和清除
const timer = setTimeout(function() {
        console.log(1); // 3秒之后，再执行这段代码。
    }, 3000); 
clearTimeout(timer);  //清除

箭头函数的写法
 setTimeout(() => {
        console.log(1); // 3秒之后，再执行这段代码。
    }, 3000);

jQuery

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

jQuery 的两大特点:

（1）链式编程：比如.show()和.html()可以连写成.show().html();链式编程原理：return this。

(2) 隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；

jQuery 的基本选择器

var jqBox1 = $("#box"); // 按ID选择

var jqBox2 = $(".box"); // 按类名选择

var jqBox3 = $("div"); // 按标签名选择

var jqBox3 = $("div,.box"); // 选择多个

基本过滤选择器

$(document).ready(function () {
    // :odd  奇数行选择器
    $("li:odd").css("background", "red"); 
    // :even   / 偶数行选择器
    $("li:even").css("background", "green");
    // :eq(index) 匹配
    $("ul li:eq(3)").css("font-size", "30px");  //设置第四个li的字体
    // :lt(index)  小于
    $("li:lt(6)").css("font-size", "30px");
    // :gt(index)    大于
    $(".ulList1 li:gt(7)").css("font-size", "40px");
    // :first    选择第一个元素
    $(".ulList li:first").css("font-size", "40px");
    // :last    选择最后一个
    $("li:last").css("font-size", "40px");
});