JavaScript（1）：元素获取，简单事件，数据类型

一，基本使用，元素获取与修改

---

1. Js是什么？JavaScript原名liveScript，是一门动态类型，弱类型基于原型的脚本语言

2. Js有什么作用？

   1. 页面特效
   2. 前后交互
   3. 后台开发（node）

3. Js写在哪里

   1. Script标签里

      <script>
      	alert("中奖了")
      </script>	// 可以写在head内，也可以写在body内
      

   2. 外部的.js文件内，使用 src="路径" 导入

      <script src="我的js文件.js"></script>
      

4. Js的一些注意事项

   1. 严格区分大小写
   2. 每一行完整语句后面加分号;
   3. 不能使用关键字和保留字
   4. 代码要缩进，保持可读性

5. 获取Js元素（元素可以理解成标签）

   1. 通过id获取元素

      <p id="p1">我是一个p标签</p>
      <script>
          var a = document.getElementById("p1");  
      		// 把id为p1的标签赋值给a，var是js定义变量的关键字
          a.onclick = function () {	// 定义单击事件，相当于python里def了一个函数
              alert("你中奖了")		 // 单击出现弹窗
          }
      </script>
      

   2. 通过class名字获取元素

      <p id="p1" class="pp1">我是一个p标签</p>
      <script>
          var b = document.getElementsByClassName("pp1")[0];
      		// 把class为pp1的标签赋值给b，必须加上索引值，不然Js不知道选哪个
          b.onclick = function () {
          	alert("你中奖了")
          };
      </script>
      

   3. 通过标签名（tagname）获取元素

      <p id="p1" class="pp1">我是一个p标签</p>
      <p>我也是一段话</p>
      <script>
          var  c = document.getElementsByTagName("p");
      		// 把p标签赋值给b，必须加上索引值，不然Js不知道选哪个
          c[0].onclick = function () {	// 可以在定义函数的时候加上索引
              alert("你中奖了")
          };
      </script>
      

   4. 通过name的属性获取元素，一般用于input

      <span name="span1">我是一个span标签</span>
      <script>
      	var d = document.getElementsByName("span1");
      		// 把name值为span1的标签赋值给b，必须加上索引值，不然Js不知道选哪个
          d[0].onclick = function () {	// 可以在定义函数的时候加上索引
          	alert("你中奖了")
          };
      </script>
      

   5. 通过css原则器获取

      1. 获取一个

         <p class="p1">我是一个p标签</p>
         <p class="p1">我也是一段话</p>
         <span class="p1">我是一个span标签</span>
         <script>
             var e = document.querySelector(".p1");
         		// 默认获取class名为p1的标签，不需要加索引
             e.onclick = function () {
             	alert("你中奖了")
             };
         </script>
         

      2. 获取所有

         <p class="p1">我是一个p标签</p>
         <p class="p1">我也是一段话</p>
         <span class="p1">我是一个span标签</span>
         <script>
             var e = document.querySelectorAll(".p1")[0];
             	// 获取所有class名为p1的标签，需要加索引
             e.onclick = function () {
             	alert("你中奖了")
             };
         </script>
         

6. 修改元素内容

   1. 鼠标滑入滑出出发事件时，改变被选中元素的文本内容

      <div>
          <p>人生苦短</p>
      </div>
      <script>
          var d = document.getElementsByTagName("div")[0];
      
          d.onmouseenter = function () {
              d.innerText = "我用python"
          };
      
          d.onmouseleave = function () {
              d.innerText = "人生苦短"
          };
      </script>
      

   2. 鼠标滑入滑出出发事件时，改变被选中元素的html

      <div>
          <p>人生苦短</p>
      </div>
      <script>
          var d = document.getElementsByTagName("div")[0];
      
          d.onmouseenter = function () {
              d.innerHTML = "<b>我用python</b>"
          };
      
          d.onmouseleave = function () {
              d.innerHTML = "<b>人生苦短</b>"
          };
      </script>
      

二，简单事件

---

1. onclick ：单击事件

2. ondblclick : 双击事件

3. onmouseenter : 鼠标滑入事件

   <script>
   	var d = document.getElementsByTagName("div")[0];
   	
       d.onmouseenter = function () {
       alert(111)
       };
   </script>
   

4. onmouseleave : 鼠标滑出事件

   <script>
   	var d = document.getElementsByTagName("div")[0];
   
       d.onmouseleave = function () {
       alert(222)
       };
   </script>
   

5. onresize : 窗口变化（浏览器大小的变化）

   <script>
       onresize = function () {
       	alert("改变了窗口大小")
       }
   </script>
   

6. onchange : 改变下拉框

   <select name="" id="">
       <option value="">北京</option>
   	<option value="">南京</option>
   </select>
   ...
   <script>
       var f = document.getElementsByTagName("select")[0];
   
       f.onchange = function () {
           alert("你改变了选项")
       };
   </script>
   

三，修改样式

---

1. 修改样式

   <script>
       var a = document.getElementsByClassName("div1")[0];
   
       a.onclick = function () {
           a.style.width = "200px";		// 修改宽度
           a.style.height = "200px";		// 修改高度
   
       };
   
       a.ondblclick = function () {
           a.style.lineHeight = "200px";	// 修改行高
           a.style.margin = "300px auto"	// 修改外边距
       }
   </script>
   

三，基本数据类型

---

1. string : 字符串

   <script>
   	var a = "Witcher";      // 字符串
   	
   	console.log(typeof a); // string，在控制台的console下面可以看到
   </script>
   

2. number : 数字

   <script>
       var b= 123;             // 数值
   
       console.log(typeof b); // number
   </script>
   

3. boolean : 布尔值

   <script>
   	var c = true;           // 布尔值
   	
   	console.log(typeof c); // boolean
   </script>
   

4. undefined : 未定义

   <script>
   	var d;                  // 未定义
   	
   	console.log(typeof d); // undefined
   </script>
   

5. null : 空

   <script>
   	var f = null;           // 空值，类似于基类
   	
   	console.log(typeof f); // 复杂型 object
   </script>
   

6. object : 对象

   <script>
   	var e = [1, 2, 3, 4]    // 数组
   	
   	console.log(typeof e); // 复杂型 object
   </script>