今日学习内容总结

      在昨日的学习中，我们对JavaScript中的相关操作进行了学习与使用，其实我们发现，理论上的知识与理解，在学习python的时候我们就已经学习了。而现在主要学习这些知识在JavaScript中的使用方法而已。

节点操作

DOM操作标签

      在起变量名的时候，如果该变量指向的是一个标签，那么建议写 xxxEle 的形式。

      动态创建标签并添加到页面指定位置

    var aEle = document.createElement('a')  // 创建a标签
    aEle.href = 'https://www.sogo.com/'  // 设置href属性
    aEle.innerText = '点我去搜狗'  // 设置文本内容
    var divEle = document.getElementById('d1')  // 查找标签
    divEle.append(aEle)  // 内部追加标签

      标签的默认属性

      比如 id class 等，设置的时候可以直接通过点的方式。

    divEle.id = 'd1'

      标签的自定义属性属性

      比如 username password 等，设置的时候需要使用。

    setAttribute
    	divEle.setAttribute('username','jason')
    		
    setAttribute()  // 既可以设置自定义属性也可以设置默认属性

    divEle.getAttribute("age")	// 获取指定属性
    divEle.removeAttribute("age")  // 移除指定属性

      innerText与innerHTML

    获取值的时候 
  	innerText只会获取文本内容
        innerHTML获取文本和标签
    设置值的时候 
        innerText不识别标签语法 
        innerHTML识别标签语法

获取值操作

      获取值操作的语法：elementNode.value 。适用标签：input、option、textarea…

      获取普通值数据

    // 标签对象  .value
    var iEle = document.getElementById("i1");
    console.log(iEle.value);

      获取文件数据

  标签对象.value  # 只能获取到文件路径 没啥用
  标签对象.files  # 结果是一个数组 可以通过索引获取具体文件对象

属性操作

      类属性操作

    标签对象.classList  # 查看所有的类属性
    标签对象.classList.add()  # 添加类属性
    标签对象.classList.remove()  # 移除类属性
    标签对象.classList.contains()  # 判断是否含有某个类属性
    标签对象.classList.toggle()  # 有则移除 无则添加

      样式操作

    标签对象.style.属性名 #获取属性 使用=可以修改属性值
    divEle.style.height = ‘800px’

事件

      HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

      给标签绑定事件

    // 方式1
      <p onclick="showMsg()">点我有惊喜</p>
  <script>
       function showMsg() {
          alert('没有惊喜')
       }
  </script>

    // 方式2
  <p>快来点我 点我 点我!!!</p>
  <script>
  var pEle = document.getElementsByTagName('p')[0];
        pEle.onclick = function () {
            alert('好了')
        }
  </script>

      在事件函数中有一个固定的关键字 this 指代当前被操作对象本身。

      常用事件类型

      事件案例

      1.数据校验，获取用户名和密码，校验是否符合，并暂时相应提示。给普通按钮绑定一个点击事件，触发校验动作。

  <p>username:
    <input type="text" id="username">
      <span style="color: red" id="username_error"></span>
  </p>
  <p>password:
      <input type="text" id="password">
      <span style="color: red" id="password_error"></span>
  </p>
  <input type="button" value="提交" id="btn">
  <script>
      // 1.查找按钮标签
      let btnEle = document.getElementById('btn');
      // 2.绑定点击事件
      btnEle.onclick = function () {
          // 3.获取用户名和密码
          let userNameVal = document.getElementById('username').value;
          let passWordVal = document.getElementById('password').value;
          // 4.判断
          if (userNameVal === 'jason'){
              // 给用户名下面的span标签设置文本内容
              let userSpanEle = document.getElementById('username_error')
              userSpanEle.innerText = '用户名不能是jason!!!'
          }
          if (passWordVal === '123'){
              // 给密码下面的span标签设置文本内容
              let userSpanEle = document.getElementById('password_error')
              userSpanEle.innerText = '密码不能是123!!!'
          }
      }
  </script>

      2.搜索框案例

    <input type="text" id="d1" value="默认搜索的内容">
    <script>
    // 1.查找input标签对象
    var inputEle = document.getElementById('d1')
    // 2.绑定一个聚焦事件
    inputEle.onfocus = function () {
        // 3.清空value值
        this.value = ''
    }
    // 4.绑定一个失焦事件
    inputEle.onblur = function () {
        // 5.添加一个全新的value值
        this.value = '小霸王游戏机'
    }
    </script>

      3.省市联动

    <p>省市:
    <select name="" id="pro">

    </select>
	</p>

	<p>市区:
    <select name="" id="city">

    </select>
	</p>
	<script>
    let proEle = document.getElementById('pro');
    let cityEle = document.getElementById('city');
    // 1.自定义数据(以后有现成的组件实现)
    let data = {
        "河北": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["合肥市", "芜湖市"],
        "上海": ["静安", "黄埔"],
        "深圳": ["龙湖", "罗湖"]
    };
    // 2.获取自定义对象中所有的key并添加到省市下拉框中
    for (let proVal in data) {
        // 2.1.创建option标签
        opEle = document.createElement('option');
        opEle.innerText = proVal;
        opEle.value = proVal
        // 2.2.添加到第一个下拉框中
        proEle.append(opEle)
    }
    // 3.文本域变化事件
    proEle.onchange = function () {
        // 3.0.先清空市区下拉框中的内容
        cityEle.innerHTML = '';
        let currentPro = this.value;
        let currentCityList = data[currentPro];
        // 3.1.循环获取市区数据
        for (let i=0;i<currentCityList.length;i++){
            // 3.2.创建option标签
            opEle = document.createElement('option');
            opEle.innerText = currentCityList[i];
            opEle.value = currentCityList[i]
            // 2.2.添加到第一个下拉框中
            cityEle.append(opEle)
        }
    }
    </script>

jQuery

jQuery简介

      1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

      2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery优点

    1. 占用空间少：
        缩小并压缩后的jQuery文件只有30KB。

    2. 符合CSS3规范：
        支持CSS3选择器查找元素以及样式属性操作。

    3. 跨浏览器：
        jQuery兼容各种主流浏览器，如IE、Chrome、Firefox、Safari、Opera等。

jQuery 特点

      快速获取文档元素

      jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

      提供漂亮的页面动态效果

      ​ jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

      创建AJAX无刷新网页

      ​ AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页。

      提供对JavaScript语言的增强

       jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

      增强的事件处理

      ​ jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

      更改网页内容

      jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

版本区别

      1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)。

      2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)。

      3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

jQuery使用

      jQuery必须先导入才可以使用。

    // 下载地址:https://jquery.com/

    // 导入方式
    1. 本地jQuery文件
        不会收到网络影响
    2. CDN加速服务
        需要确保有互联网
        min.js 压缩之后的文件 容量更小
        .js 没有压缩的文件 容量稍大

      使用js代码与不使用的区别

    // 将页面上的两个p标签文本内容一个变成红色 一个变成绿色
    // 原生的js代码
      let p1Ele = document.getElementsByTagName('p')[0]
      let p2Ele = document.getElementsByTagName('p')[1]
      p1Ele.style.color = 'red'
      p2Ele.style.color = 'green'

    // jQuery代码
    $('#d1').css('color','red').next().css('color','green')

查找标签

jQuery链式操作

      由于jQuery会在使用完方法后返回对象自身，所以可以再次调用方法。

      $(‘#d1’).parent().parent().parent()
      $(‘#d1’).parent().parent().next().parents()