前端学习笔记04-JavaScript

一、引入方式

JS 有3种书写位置，分别为行内、内嵌和外部。

1.行内式 JS

< input type=“button” value=“点我试试” οnclick=“alert(‘Hello World’)” />
优缺点：
1.可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick。
2.注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号。
3.可读性差， 在html中编写JS大量代码时，不方便阅读。
4.引号易错，引号多层嵌套匹配时，非常容易弄混。
特殊情况下使用

2. 内嵌 JS

例：
< script>
alert(‘Hello World~!’);
< /script>
1.可以将多行JS代码写到 < script> 标签中。
2.内嵌 JS 是学习时常用的方式。

3. 外部 JS文件

< script src=“my.js”>< /script>
1.利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用。
2.引用外部 JS文件的 script 标签中间不可以写代码。
3.适合于JS 代码量比较大的情况。

二、获取元素

获取页面中的元素可以使用以下几种方式:
1.根据 ID 获取。
2.根据标签名获取。
3. 通过 HTML5 新增的方法获取。
4.特殊元素获取。

2.1根据 ID 获取元素

使用 getElementById() 方法可以获取带有 ID 的元素对象。

语法：document.getElementById(‘id’);

例：
    <div id="time">123456789</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

2.2根据标签名获取元素

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

语法： document.getElementsByTagName(‘标签名’);

例：
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>

    </ol>
        <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>

    </ul>
        <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
         
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
   
            console.log(lis[i]);
        }
        // 3.还可以获取某个元素(父元素)内部所有指定标签名的子元素
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

2.3通过 HTML5 新增的方法获取元素

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合。
2. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象。
3. document.querySelectorAll(‘选择器’); // 根据指定选择器返回。

注意：
querySelector 和 querySelectorAll里面的选择器需要加符号, 比如:document.querySelector(’#nav’);

例：
y>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');       
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');       
        var nav = document.querySelector('#nav');        
        var li = document.querySelector('li');      
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');         
        var lis = document.querySelectorAll('li');
        
    </script>

2.4获取特殊元素（body，html）

获取body元素：

doucumnet.body // 返回body元素对象

获取html元素：

document.documentElement // 返回html元素对象

三、事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发Java Script的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

事件三要素
1.事件源 （谁）
2.事件类型 （什么事件）
3.事件处理程序 （做啥）

执行事件的步骤:
1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

例：
<div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
   
            console.log('我被选中了');

        }
    </script>

四、操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。

4.1 改变元素内容

改变元素内容的方法有两种：

1.element.innerText；从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉。
2.element.innerHTML；起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行。

例：
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

4.2 常用元素的属性操作

1. innerText、innerHTML 改变元素内容；
2. src、href；
3. id、alt、title;

例：
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="images/ldh.jpg" alt="" title="刘德华">

    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function() {
   
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }
        ldh.onclick = function() {
   
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>

4.3 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：
type、value、checked、selected、disabled

例：
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
                
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';            
            // btn.disabled = true;