JavaScript案例

JavaScript案例

前置知识

1.DOM操作

1.DOM(document object model)文档对象模型：

		标签名获取对象：document.getElementsByTagName('标签名');//返回的是一个数组，单双引号皆可

		类名获取对象：document.getElementsByClassName('类名’);//返回的是一个数组

		id获取(id唯一):document.getElementById("id");

		获取内容标签：innerText,innerHTML，区别：innerHTML可以把标签写进html

基本操作：

		创建标签：var h1=document.createElement('h1');

		给标签追加标签:var div=document.getElementsByTagName('div')[0]　　//获取第一个div

		div.appendChild(h1);　　//这样就把h1标签添加到了div中

类名操作：

		对象.className='类名';

标签已经有类名的情况下：

		标签对象.classList.remove('移除的类名');

		标签对象.classList.add('追加的类名');

		标签对象.classList.contains('是否包含的类名');　　 //判断：返回true或者false

js动态添加文本:

  		let li = document.createElement('li');//创建li标签
  		let text = document.createTextNode("我是文本");//创建一个文本
  		li.appendChild(text)//将文本添加到li标签

js动态添加属性:

  		var div = document.createElement('div'); //创建div
  		var did = document.createAttribute("id"); //创建属性
  		did.value = 'name'; //设置属性值
  		div.setAttributeNode(did); //给div添加属性

标签对象属性操作：

		标签对象.setAttribute('属性名','属性值');　　　　    //设置属性

		标签对象.setAttribute('属性名');　　　　            //获取属性

查找子节点：

		firstElementChild;　　　　　　　　　　　　　　　//第一个子节点

		lastElementChild;    　　　　　　　　　　　　　//最后一个子节点

		children;　　　　　　　　　　　　　　　　　　　  //返回的是数组

查找父节点：
	
		parentNode;　　　　　　　　　　　　　 		  //父节点

查找兄弟节点：

		previousElementSibling　　　　　　　　　　　　//查找上一个兄弟

		nextElementSibling　　　　　　　　　　　　　　//查找下一个兄弟


因为var的变量提升特性，在for循环中获取到的值永远是最大值。在es6中，let解决了这个问题

2.BOM操作

2.BOM(Browser objece model):浏览器对象模型

		window(打印，打开窗口，关闭窗口等)

		location(跳转页面和截取浏览器地址信息等)

		history（历史，回退和前进等）

			如：go(n)和back(),n表示前进到第几张网页，设为-1表示back()

		navigator（可以看浏览器的信息）

			如:navigator.userAgent（可以获取到浏览器的一些基本信息）

		screen（屏幕）

			screen.height、screen.width（屏幕宽高 可以单电脑的分辨率）

			clientWidth(标签对象的宽度：width+padding)

			offsetWidth(标签对象的宽度：width+padding+border)

			scorllWidth(标签对象的宽度,内容如果超出了盒子也算：width+padding)

			document.documentElement.clientHeight;(可视区域的高)

			document.documentElement.clientWidth;(可视区域的宽)

3.JOM

3.JOM（javascript object model）

	内置对象

			Math:sqrt()-->(开平方)、abs()-->(绝对值)、random()-->(随机数)、
			PI-->(π)、floor(n)-->（向下取整）、ceil(n)-->（向上取整）

	Array（数组）

	String（字符串）

1) length

2) substr(下标，下标)-->(截取字符：包左不包右) 

3) charAt(n)-->(提取：第n个）

4）indexOf('值')-->(查找值的下标)

4.Date

4.Date(日期)

创建对象 new Date();

获取：

1) getYear()　　　　-->es3以前的单位，1999之后返回四位数字，可加上1900,数值可以准确

2) getFullYear()        -->获取的是当前的年份

3) getMonth()           -->月（0-11）

4) getDay()               -->星期（1-7）

5) getDate()              -->天数（1-31）

6) getHours()            -->时（0-23）

7) getMinutes()         -->分（0-59）

8) getseconds()        -->秒（0-59）

9) getTime()              -->（1970到现在的毫秒值）

注意：获取时分秒后面都有一个s

5.定时器

5.定时器

定时器：setTimeout(操作,毫秒数);-->只执行一次

间隔定时器：setInterval(操作,毫秒数);-->间隔执行

6.事件

6.事件（event）

鼠标：

onmousedown(鼠标按钮被按下)     onmousemove(鼠标被移动)   
onmouseout(鼠标从某元素移开)    onmouseover(鼠标移到某元素上)

键盘：

onkeydown(某个键盘按键被按下)   onkeypress(某个键盘按键被按下并松开)    onkeyup(某个键盘按键被松开)

其他事件：

onclick(单击)    ondelclick(双击)

注意：事件的所有单词被当做一个单词处理，所以不遵循驼峰规范

7.变量的7种基本类型

9.变量的7种基本类型

number（数字）、string（字符串）、boolean（布尔）、
undefined（未定义）、null（空）、array（数组）、object（对象）

其中对象是一种特殊的类型

8.正则表达式

9.闭包

闭包的定义：在一个函数的内部有一个返回的函数，内部的函数使用外部函数的变量，
通过returnf返回，内部函数被抛到外部，导致这个变量没有被释放回收。（相当于全局变量）。

首先函数有三种基本调用的方式：

第一种：基本调用（函数名加括号调用）

第二种：变量调用

		如：var fun=function methedName(){
   };

		   fun();

第三种：强制调用，把一个函数用括号包裹起来，再写一对括号强制调用一次

如：(function fun(){
   

　    alert(1);

   })();

匿名函数调用也是这调用法

如：(function(){
   

　　alert(1);

})();

特殊：有时可以省略这种包裹的括号，比如在定时器内，点击事件内，就不用包裹的括号，

注意：一个函数return（返回）什么，该函数就代表什么

如：function fun(){
   

　　return {
   };

}

var funobj=fun();

实际上变量funobj={
   };

那么，返回的既然是一个对象，就可以按照对象的使用方法，用变量funobj去操作对象。

 

再比如：function fun(){
   

        	return function(){
   

　　　　		alert(1);

　　	   	   }
      }

var funMe=fun();

分析：fun()返回的是一个函数，funMe();就这样调用即可

如果没有变量funMe;要想使用内部的匿名函数，fun()();这样调用即可

10.ajax

ajax是处理前端和后端数据的通讯，是一种无须加载完整个页面实现网页部分刷新的技术，
同时和定时器、框架、一样也是实现异步的一种方式。在客户端请求ajax时，ajax处理数据有可能会失败，
所以有一种失败的状态，在jquery框架中ajax更加的清晰。

js中写ajax的步骤

	1.声明一个xhr对象

	2.打开发射器open

	3.声明请求头

	4.发射（发射器发射）

	5.处理状态（等待ajax处理）

1.全选案例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选练习</title>
    <style type="text/css">
        table {
     
            border: 1px solid #000;
            width: 400px;
        }
    </style>
    <script type="text/javascript">
        function change() {
     
            let all = document.getElementById("checkbox_all");
            let cb = document.getElementsByName("personid");
            // 判断是否选中全选按钮，checked 属性设置或返回 checkbox 是否应被选中。
            if (all.checked) {
     
                for (let i = 0; i < cb.length;