js基础知识带点汇总

最新推荐文章于 2021-09-17 01:54:05 发布

久伴慕随心

最新推荐文章于 2021-09-17 01:54:05 发布

阅读量379

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_51559620/article/details/112791503

版权

1、定时器

定时器：
在js中定时器有两种

            1、setInterval()
            2、setTimeout()

1、setInterval()
格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);
【注意】可以写执行的代码，也可以直接传入函数。
返回值：启动定时器时，系统分配的编号
关闭定时器的方式：
1.关闭页面。
2.clearInterval();
【注意】 clearInterval函数需要一个参数：定时器的编号。
2、setTimeout（）
只在指定时间后执行一次。
关闭：clearTimeout();
【注意】 clearTimeout函数需要一个参数：定时器的编号。

2、时钟

显示实时动态时钟
在这里插入图片描述

3、秒表

秒表完整代码：

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 10px auto;
            width: 400px;
        }
        span{
            font-size: 60px;
        }
        button{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            font-size: 24px;
            margin:  0 48px;
            border: 0;
            outline: none;
            cursor: pointer;
        }
        #showTime{
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
    <script>
        window.onload = function(){
            // 分钟数
            var min  = 0;
            // 秒数
            var sec = 0;
            // 毫秒数*10
            var ms = 0;
            // 定时器ID
            var timer = null;
            // 获取页面上所有span标签，返回类数组（伪数组）
            var spans = document.getElementsByTagName("span");
            // 复位按钮 点击事件
            $("resetBtn").onclick = function(){
                // 把分钟，秒，毫秒都清零
                min = 0;
                sec = 0;
                ms = 0;
            
                spans[0].innerHTML = "00";
                spans[2].innerHTML = "00";
                spans[4].innerHTML = "00";
            }
            // 第二个按钮
            $("startBtn").onclick = function(){
                //点击了开始按钮
                // 1.启动定时器，
                // 2.将按钮的文本修改为停止
               if ($("startBtn").innerHTML == "开始") {
                    $("startBtn").innerHTML = "停止";
                    // 防止出现bug，最好在启动定时器之间，先清除定时器。
                    clearInterval(timer);
                    timer = setInterval(show,10);
               }else{
                //    点击停止按钮
                // 1.停止计时器
                // 2.将按钮的文本修改为开始、
                    $("startBtn").innerHTML = "开始";
                    clearInterval(timer);
               }
               
            }
            function $(str){
            return document.getElementById(str);
        }
        // 生成时间,（每10毫秒执行一次。）
        function show(){
            // ms加一
            ms++;
            // 如果等于100，则秒数进1
            if(ms == 100){
                sec++;
                ms=0;
            }
            // 秒数等于60，则分钟数进1，秒数等于0
            if(sec == 60){
                min++;
                sec = 0;
            }
            // 为了给小于10的补0
            var msStr = ms;
            if(ms<10){
                msStr = "0"+ms;
            }
            var secStr = sec ;
            if(sec<10){
                secStr = "0"+sec;
            }
            var minStr = min;
            if (min<10) {
                minStr = "0"+min;
            }
            spans[0].innerHTML = minStr;
            spans[2].innerHTML = secStr;
            spans[4].innerHTML = msStr;
        }
        }
        
    </script>
</head>
<body>
    <div class="box">
        <div id="showTime">
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>
        <div class="bnt">
            <button id="resetBtn">复位</button>
            <button id="startBtn">开始</button>
        </div>
    </div>
</body>
</html>

效果：

4、BOM

JavaScript 由三大部分组成：

        ES：语法标准，函数，对象。
        BOM：borwser object model  浏览器对象模型 操作浏览器部分功能的
        DOM：文档对象类型， 操作网页上的元素。

window对象：
1.是JavaScript中的顶级对象
2.全局变量，自定义函数都属于window的属性或方法。
3.我们在使用window对象下的属性或方法时，可以省略window.
常见的BOM对象：

1.window 代表整个浏览器窗口，window对象是BOM中的顶级对象。
2.Navigator 表示浏览器的一些信息。
3.Location 表示浏览器当前的地址信息。
4.History 浏览器的历史记录信息。
5.Screen 表示用户的屏幕信息。

window对象的常用方法：
1.弹出系统对话框。
(1) alert()
(2) prompt()
(3) confirm()
2.打开窗口
window.open(url,target,param)
url :要打开的地址
target:新窗口的位置。 _blank,_self,_parent(父框架下)
param:新窗口的一些设置。
name：新窗口的名字，可以为空
【注意】name需要写在target前面。
返回值：新窗口的句柄。
3.关闭窗口
window.close(); 关闭当前窗口
open返回值.close(); 关闭新窗口

5、小米活动倒计时代码

完整代码：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    <style>
	        .flashSale{
	            width: 234px;
	            height: 300px;
	            margin: 0 auto;
	            margin-top: 100px;
	            background-color: #f1eded;
	            text-align: center;
	            padding-top: 39px;
	            border-top: 1px solid #e53935;
	        }
	        .round{
	            color: #ef3a3b;
	            font-size: 21px;
	            padding-top: 15px;
	        }
	        .flashSale img{
	            margin: 25px auto;
	        }
	        .desc{
	            font-size: 15px;
	            color: rgba(0, 0, 0, .54);
	        }
	        .countDown{
	            margin: 28px auto 0;
	            width: 168px;
	        }
	        .clearfix::after{
	            display: block;
	            content: "";
	            clear: both;
	        }
	        .countDown span{
	            width: 46px;
	            height: 46px;
	            background-color: #605751;
	            color: #fff;
	            font-size: 24px;
	            line-height: 46px;
	            float: left;
	        }
	        .countDown i{
	            float: left;
	            width: 15px;
	            height: 46px;
	            line-height: 46px;
	            color: #605751;
	            font-size: 28px;
	            font-style: normal;
	        }
	    </style>
	    <script>
	        var date = new Date("2021-01-08 9:36:10");
	        // var date = new Date(2021,0,8,12,00,00);
	        var nowDate = new Date();
	        // 差值：总的秒数
	        var dateDiff = parseInt((date.getTime()-nowDate.getTime())/1000);
	        // 小时数
	        var hours = parseInt(dateDiff/3600);
	        // 分钟数
	        var min = parseInt(dateDiff/60)%60;
	        //秒数
	        var sec = dateDiff%60;
	
	        var timer,spans,desc = null;
	
	        
	        window.onload = function() {
	            spans = document.getElementsByTagName("span");
	            desc = document.getElementsByClassName("desc")[0];
	            timer = setInterval(showTime,1000);
	        }
	
	        function showTime() {
	            sec--;
	            if (sec < 0) {
	                sec = 59;
	                min--;
	            }
	            if (min<0) {
	                min=59;
	                hours--;
	            }
	            // 计时结束
	            if (hours<0) {
	                hours = 0;
	                min=0;
	                sec = 0;
	                clearInterval(timer);
	                desc.innerHTML = "该场次已结束";
	            }
	            spans[0].innerHTML = hours<10?"0"+hours:hours;
	            spans[1].innerHTML = min<10?"0"+min:min;
	            spans[2].innerHTML = sec<10?"0"+sec:sec;      
	            
	        }
	    </script>
	</head>
	<body>
	    <div class="flashSale">
	        <div class="round">12:00场</div>
	        <img src="img/flash.jpg" alt="">
	        <div class="desc">距离结束还有</div>
	        <div class="countDown clearfix">
	            <span>00</span>
	            <i>:</i>
	            <span>00</span>
	            <i>:</i>
	            <span>00</span>
	        </div>
	    </div>
	</body>
	</html>

效果图：
在这里插入图片描述

6、location

https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1
http https 传输协议
www.baidu.com 域名
?fr=aladdin 查询字符
#2_1 hash（锚点定位）

location对象：
里面存储了和网页地址所有内容有关的信息。
属性：
href：地址信息。
跳转页面：location.href = “XXX”;
search：查询字符串一般是用于传输数据，需要进行解析。
split(分割字符串)
返回值：分割好的字符串组成的数组：苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐]

解析查询字符
1.""
2.?name=zhangsan&age=18
步骤：
1.需要准备一个函数进行解析，这个函数还需要一个参数。
参数：要解析的字符串
2.开始解析
1.判断如果为空字符串，直接返回空对象。
2.如果不是空字符串，解析字符串，并将结果放入对象中。
（1）截取掉第一个字符。
（2）剩余字符按照&进行分割，得到一个数组。
（3）遍历数组，得到 “属性名=属性值”这样格式的字符串。
（4）对每一个字符串，按照=分割，得到一个属性和属性值组成的数组。
（5）将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
（6）返回对象。
方法：
assign()：改变浏览器地址栏中的地址，并记录到历史中。
【注意】设置location.href 就会调用assign方法。
replace() 替换浏览器地址栏中的地址。
reload() 重新加载 F5
reload(true) 强制加载，不适用缓存。
navigator：获取浏览器客户端的一些信息。

7、history

history:保存当前窗口的历史记录，里面包含了一些操作历史记录的属性和方法
【注意】不是浏览器中的历史记录

1.属性
length:返回历史记录的条数。
- back():
语法：history.back();
作用:类似浏览器上面的后退键，回退到上一条历史记录中。
forward():
语法：history.forward();
作用:类似浏览器上面的前进键，前进到下一条历史记录中。
go(n):
语法：history.go(n); n表示整数
正整数：表示前进
0：刷新当前页面
负整数：表示后退
作用：跳转n条记录记录。

8、浏览器卷去的高度

当页面的宽高比较大时，会出现滚动条，一部分内容会随着页面的滚动而被隐藏。
我们管上面隐藏的叫做卷去的高度
左边隐藏的宽，叫做卷去的宽度。

document.documentElement.scrollTop
获取卷去的高度使用时页面中必须要有DOCTYPE标签。
document.body.scrollTop
获取卷去的高度，使用时，页面中没有DOCTYPE标签。
兼容写法：
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

9、浏览器滚动和自定义滚动的速度

可以通过js代码来指定浏览器滚动到什么位置上。

第一种方式：

格式：window.scroll(横坐标，纵坐标)；
【注意】不需要书写单位，瞬间定位。

第二种方式：

window.scroll({
left:200,
top:600,
behavior:‘smooth’
});
behavior:可以决定滚动的方式，默认为 auto 瞬间定位，可以设置为smooth 平滑过渡。
在这里插入图片描述
自定义滚动的速度：

滚动时可以停止：
在这里插入图片描述

10、DOM

dom:docment object model 文档对象模型
DOM 都是由节点组成的。

节点可以分为三大类：
元素节点 html标签
文本节点标签中的文字（空格，换行）
属性节点标签的属性

学习dom，就是学习对节点的操作
修改：修改DOM节点的内容。
遍历：遍历DOM节点下的子节点，方便下一步操作。
添加：在DOM节点下添加一个子节点。
删除：将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。

DOM可以做什么：
1.找对象（元素节点）
2.设置元素节点的属性值、
3。动态删除和创建节点。
4.事件的响应触发

11、获取元素节点的方法

1.getElementById
格式：document.getElementById(“ID”)
功能：从document节点开始，通过ID查找节点。
2.getElementsByTagName
通过标签名查找元素节点
格式：node.getElementsByTagName(“标签名”);
3.getElementsByClassName
通过类名去查找元素节点
格式：node.getElementsByClassName(“类名”);
4.getElementsByName()
通过name属性值去获取元素节点
最常用在表单元素中。
--------------------------------------------------
低版本的IE不支持。
5.querySelector()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回第一个元素。
如果没找到，则返回null
6.querySelectorAll()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回全部。
如果没找到，则返回null
```
 nodelist 伪数组 常规的数组方法对伪数组是无效的  length  【下标】 
```

【注意】getElementsByTagName/getElementsByClassName 获取到的是元素节点，元素节点中没有getElementById方法
document对象中是可以使用getElementById的。
在这里插入图片描述

12、DOM节点

我们的页面是由节点组成的，每一个组成部分都是一个节点。
节点的分类：
元素节点 html标签 img body input div
文本节点文字部分
属性节点标签内的属性
注释节点
1.document
页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。根节点。
2.html
页面中最大的元素节点。根元素节点。
3.元素节点
html标签
4.文本节点
每一段文本内容都是一个文本节点
包含换行和空格
一般来说作为元素节点的子节点存在。
5.属性节点：
属性节点不能单独存在，必须依赖于元素节点。
6.注释节点
页面中的注释，作为说明文本使用户。

13、自定义获取元素节点

在这里插入图片描述

14、操作元素节点的属性&类名&内容&样式

操作元素节点的属性

标签上的属性分类：

1.原生属性
2.自定义属性
3.H5 自定义属性

1.原生属性

语法：元素.属性名
修改/新增：
元素.属性名 = “值”
获取：
元素.属性名
【注意】class属性是例外，不能直接通过属性名获取，而是用className
2.自定义属性
不能直接使用元素. 这个语法来获取。
三个方法去操作：
获取
getAttribute(“属性名”);
返回值：字符串
设置
setAttribute(“属性名”,“属性值”)
删除
removeAttribute(“属性名”)
【注意】这三个方法也可以操作原生属性
3.H5 自定义属性
每一个元素节点上都有一个属性：dataSet
里面包含了所有的H5自定义属性。
键值对结构：例子;data-id =“idBox”
key：data-XXX xxx的内容。
value:属性值
获取：
元素.dataset.key
设置：
元素.dataset.key = “值”
删除
delete 元素.dataset.key
类名

1。按照原生属性的方式来操作

     获取：
         元素.className
     设置：
         元素.className = "值"
     追加：
         元素.className += " 值";
     【注意】 追加时，值的前面要加一个空格。
     删除：
         1.重新设置一遍。
         2.
             2.1 获取classname属性值、
             2.2 按照空格去分割字符串
             2.3 遍历数组，将要删除的字符串删除
             2.4 数组的join方法

2.H5标准给我们一个API
元素节点都有一个属性叫做：classList
里面包含了所有的class值。

     获取：
         元素.classList 获取class值的集合。
         想要获取单个，使用下标。
     新增：
         元素.classList.add("新增的类名") 
     删除：
         元素.classList.remove("删除的类名") 
     替换：
         元素.classList.replace("旧类名","新类名") ;
     toggle() 切换
         语法：元素.classList.toggle(类名)
         当元素拥有这个类名时，将类名删除
         当元素没有这个类名时，将类名添加

内容
1.innerHTMl

获取元素节点中除了本身的标签外，所有的HTML代码。
获取：
元素.innerHTML
设置：
元素.innerHTMl = “新的内容”
【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。
2.innerText

获取元素节点中的文本内容,会覆盖原有的内容，不会解析内容中的标签。
获取：
元素.innerText
设置：
元素.innerText = “新的内容”;
3.value

主要使用在表单元素中。
操作表单元素节点的value属性。
获取：
表单元素节点.value

设置：
表单元素节点.value = “值”

样式
元素节点的样式：
样式：

         行内
         内嵌
         外链

行内样式：

原生属性的方式获取
元素.style.样式的属性名
【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。
该方法只能获取行内。

获取元素的有效样式

 标准浏览器：
     getComputedStyle(要获取样式的元素)
 IE低版本：（IE8以下）
     元素.currentStyle.样式属性名  box.currentStyle.width 
 设置样式
     语法：元素.style.样式名 = "值";

在这里插入图片描述

15、函数的执行

函数的执行
里面若涉及到了变量
在定义的时候不解析变量，而是按照变量名保存，
只有在函数调用时，才会解析变量

- this:

在函数中，this保存的是函数调用者的地址信息。
谁调用了当前的函数，this就表示谁。

16、全选练习

完整代码：

			<!DOCTYPE html>
			<html lang="en">
			<head>
			    <meta charset="UTF-8">
			    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			    <title>Document</title>
			    <style>
			        *{
			            margin: 0;
			            padding:0;
			        }
			        .box{
			            width: 160px;
			            padding: 5px;
			            border: 1px solid #333;
			            margin: 100px auto 0px;
			        }
			        .box>div{
			            padding: 15px;
			        }
			    </style>

需求分析：

1.点击全选时，让所有的按钮都选中若全选已经选中，则是全不选
2.点击单个的复选框时，判断，若全部都已选中，全选则应该选中，否则不选中。

      <script>
          window.onload=function(){
 
              //1.获取全选和选项
             var allBtn = document.querySelector(".all>input");
             var itemBtns = document.querySelectorAll(".items>input");
             // console.log(allBtn.checked);   
             allBtn.onclick = function(){
                 // 2.获取all本身的选中状态,遍历item,将值赋值给所有的item
                 for (var i = 0; i < itemBtns.length; i++) {
                     itemBtns[i].checked = allBtn.checked;
                 }   
             }
             // 3.给itemBtn 添加点击事件，每次点击时判断是否已经全部选中
             for (var i = 0; i < itemBtns.length; i++) {
                itemBtns[i].onclick = function(){
                 //    4.定义一个变量，假设所有的item都已经选中
                     var flag = true;
                    for (var j = 0; j < itemBtns.length; j++) {
                        // 5.当item未选中时
                       if(!itemBtns[j].checked){
                         flag = false;
                         break;
                       }
                    }
                    allBtn.checked = flag;
                }
             }
          }
      </script>
 </head>
 <body>
     <div class="box">
         <div class="all">
             全选：<input type="checkbox">
         </div>
         <hr>
         <div class="items">
             选项一：<input type="checkbox"><br>
             选项一：<input type="checkbox"><br>
             选项一：<input type="checkbox"><br>
             选项一：<input type="checkbox"><br>
         </div>
     </div>
 </body>
 </html>
 **效果图：**
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210118195210857.png)

17、属性节点

属性节点：

获取元素节点的属性节点
元素.attributes
单个属性节点：

元素.attributes.getNamedItem(“属性名”)；

18、通过节点关系来获取节点

DOM节点不是孤立存在，我们可以通过节点之间的关系去获取他们。
节点的关系，是以属性的方式存在的。
获取父节点。
节点.parentNode
获取兄弟节点
1.下一个节点
node.nextSibling
对于标准浏览器，标签，空文档，换行都属于节点。
IE低版本：指下一个元素节点。
2.下一个元素节点
node.nextElementSibling
下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling
3.上一个节点
node.previousSibling
4.上一个元素节点
node.previousElementSibling
获取单个子节点

1.第一个子节点
node.firstChild
2.获取第一个元素节点
node.firstElementChild
3.获取最后一个子节点
node.lastChild
4.获取最后一个元素节点
node.lastElementChild

获取所有子节点

1.获取所有子节点
语法：node.childNodes
返回的是子节点的伪数组（元素节点，文本节点，注释节点）
2.获取所有的元素子节点
语法：node.children
返回元素节点。使用最多的方法。

节点的属性
属性：事物的特征
nodeName: 节点名称

         注释节点： #comment
         文本节点： #text
         元素节点： 大写的标签名
         属性节点： 属性名

nodeType：节点类型

            注释节点：8
            文本节点：3
            元素节点：1
            属性节点：2

nodeValue：节点的值

            注释节点：注释内容
            文本节点：文本内容
            元素节点：null
            属性节点：属性值

点名器
点名器style部分样式代码

效果图：

19、节点操作

创建节点

元素节点：document.createElement(“标签名”);
返回值：新的元素节点
创建完成后，需要插入到页面中才能看到
文本节点

document.createTextNode(内容);
插入节点

node.appendChild
在父节点的最后添加一个新的子节点。
node.insertBefore(新节点，参考节点)
在父节点的参考节点前添加一个新的子节点。
如果参考节点为null，则在父节点的最后添加新的子节点
删除节点

父节点.removeChild(子节点);
在父节点中移除该子节点
node.remove();
在父节点中移除自身。
替换节点：

用一个节点去替换另外一个节点
父节点.replaceChild(新节点,旧节点);
复制节点

node.cloneNode([true]);
复制节点，克隆节点
如果参数为true，则将其所有子节点也克隆。

20、带有删除和添加的表格&自动生成数据

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            margin: 100px auto 0px;
        }
        form{
            width: 400px;
            padding: 20px;
            border: 10px solid #2980b9;
            margin: 20px;
            text-align: center;
        }
        form>button{
            width: 100%;
            height: 30px;
            margin: 10px auto;
        }
        table{
            width: 400px;
            margin: 30px;
            border: 2px solid #e67e22;
            text-align: center;
            font-size: 20px;
        }
        table td,th{
            height: 50px;
        }
        tbody tr:nth-child(2n+1){
            background-color: #1abc9c;
        }
        tbody tr:nth-child(2n){
            background-color: #2ecc71;
        }
        thead tr:first-child{
            background-color: #2c3e50;
        }
        button{
            font-size: 18px;
        }
    </style>
    <!-- 
        1.分析需求：
            1-1：表单内容填写完成后，点击添加，添加到表格中
            1-2：点击删除后，该记录应该在表格中删除。
        2.步骤：
            1.先拿到表单元素，再获取输入的内容。
            2.创建表格中元素节点，将输入内容使用innerHTML 添加新增的元素节点中。
            3.再将新建的元素节点，添加到表格中。
            4.给button添加点击事件，获取tr元素节点。、
            5.将元素节点从父节点中删除。
     -->
    <script>
        var dataList = [
            {
                userName:"亚索",
                userTitle:"疾风剑豪",
                userSkill:"狂风绝息斩"
            },
            {
                userName:"劫",
                userTitle:"影流之主",
                userSkill:"瞬狱影杀阵"
            },
            {
                userName:"薇恩",
                userTitle:"暗夜猎手",
                userSkill:"猎杀时刻"
            }];
            
        window.onload = function(){

            // 1.获取表单元素
            var userName = document.querySelector(".userName");
            var userTitle = document.querySelector(".userTitle");
            var userSkill = document.querySelector(".userSkill");

            // 2.获取添加按钮
            var add = document.querySelector(".add");

            var tbody = document.querySelector("tbody");
            var dels = document.querySelectorAll(".del");
            // // 获取表单
            // var form = document.querySelector("form");
            // // 阻止表单提交
            // form.addEventListener("submit",function(event){
            //     event.preventDefault();
            // })
            // 1.找到相同的代码
            // 2.找到相同代码中不同的变量，定义为参数
            // 3.定义返回值
            function createTr(userName,userTitle,userSkill) {
                 // 1 创建元素节点、 1个tr 4个td 1个button
               var tr = document.createElement("tr");
               var td1 = document.createElement("td");
               var td2 = document.createElement("td");
               var td3 = document.createElement("td");
               var td4 = document.createElement("td");
               var btn = document.createElement("button");
               // 2 将内容添加到元素节点中
               td1.innerHTML = userName;
               td2.innerHTML = userTitle;
               td3.innerHTML = userSkill;
               btn.innerHTML = "删除";
               // 3组装成一个tr元素节点
               tr.appendChild(td1);
               tr.appendChild(td2);
               tr.appendChild(td3);
               tr.appendChild(td4);
               td4.appendChild(btn);
               // 4 给新的按钮添加一个点击事件
               btn.onclick = function(){
                //  this 表示函数的调用者。
                    this.parentNode.parentNode.remove();
               }
               // 5.将tr插入到表格中
               tbody.appendChild(tr);
            }

            for (var i = 0; i < dataList.length; i++) {
                // console.log(dataList[i]);
                // console.log(dataList[i].userName);
                // console.log(dataList[i].userTitle);
                // console.log(dataList[i].userSkill);
                createTr(dataList[i].userName,dataList[i].userTitle,dataList[i].userSkill);
                
            }
           
            add.onclick = function(){
                //3.获取文本框中的内容
               var uname = userName.value;
               var utitle = userTitle.value;
               var uskill = userSkill.value;
               // 4.添加非空验证
               if (uname === "" || utitle === "" || uskill === "") {
                   return;
               }
               // 5 将内容组装成tr>td 元素节点
                // 5.1 创建元素节点、 1个tr 4个td 1个button
               var tr = document.createElement("tr");
               var td1 = document.createElement("td");
               var td2 = document.createElement("td");
               var td3 = document.createElement("td");
               var td4 = document.createElement("td");
               var btn = document.createElement("button");
               // 5.2 将内容添加到元素节点中
               td1.innerHTML = uname;
               td2.innerHTML = utitle;
               td3.innerHTML = uskill;
               btn.innerHTML = "删除";
               // 5.3组装成一个tr元素节点
               tr.appendChild(td1);
               tr.appendChild(td2);
               tr.appendChild(td3);
               tr.appendChild(td4);
               td4.appendChild(btn);
               // 5.4 给新的按钮添加一个点击事件
               btn.onclick = function(){
                //todo  删除功能  this 表示函数的调用者。
                    this.parentNode.parentNode.remove();
               }
               // 6.将tr插入到表格中
               tbody.appendChild(tr);
               // 将表单元素置空
               userName.value = "";
               userTitle.value = "";
               userSkill.value = "";
            }
            // 7.给每一个按钮都添加删除功能
            // item 表示dels中的一个元素，当前正在遍历的元素
            dels.forEach(function(item){
                item.onclick = function(){
                    // 8 找到自己所属的tr元素，将其删除
                    item.parentNode.parentNode.remove();
                }
            });
        }
    </script>
</head>
<body>
    <div class="box">
        <form action="">
            姓名：<input type="text" class="userName"><br>
            称号：<input type="text" class="userTitle"><br>
            大招：<input type="text" class="userSkill"><br>
            <button type="button" class="add">添加</button>
        </form>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>称号</th>
                    <th>大招</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>亚索</td>
                    <td>疾风剑豪</td>
                    <td>狂风绝息斩</td>
                    <td><button class="del">删除</button></td>
                </tr>
                <tr>
                    <td>劫</td>
                    <td>影流之主</td>
                    <td>瞬狱影杀阵</td>
                    <td><button class="del">删除</button></td>
                </tr>
                <tr>
                    <td>薇恩</td>
                    <td>暗夜猎手</td>
                    <td>我去洗个澡</td>
                    <td><button class="del">删除</button></td>
                </tr> -->
            </tbody>
        </table>
    </div>
</body>
</html>

自动版本

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .box{
             width: 400px;
             margin: 100px auto 0px;
         }
         form{
             width: 400px;
             padding: 20px;
             border: 10px solid #2980b9;
             margin: 20px;
             text-align: center;
         }
         form>button{
             width: 100%;
             height: 30px;
             margin: 10px auto;
         }
         table{
             width: 400px;
             margin: 30px;
             border: 2px solid #e67e22;
             text-align: center;
             font-size: 20px;
         }
         table td,th{
             height: 50px;
         }
         tbody tr:nth-child(2n+1){
             background-color: #1abc9c;
         }
         tbody tr:nth-child(2n){
             background-color: #2ecc71;
         }
         thead tr:first-child{
             background-color: #2c3e50;
         }
         button{
             font-size: 18px;
         }
     </style>
     <!-- 
         1.分析需求：
             1-1：表单内容填写完成后，点击添加，添加到表格中
             1-2：点击删除后，该记录应该在表格中删除。
         2.步骤：
             1.先拿到表单元素，再获取输入的内容。
             2.创建表格中元素节点，将输入内容使用innerHTML 添加新增的元素节点中。
             3.再将新建的元素节点，添加到表格中。
             4.给button添加点击事件，获取tr元素节点。、
             5.将元素节点从父节点中删除。
      -->
     <script>
         var dataList = [
             {
                 userName:"亚索",
                 userTitle:"疾风剑豪",
                 userSkill:"狂风绝息斩"
             },
             {
                 userName:"劫",
                 userTitle:"影流之主",
                 userSkill:"瞬狱影杀阵"
             },
             {
                 userName:"薇恩",
                 userTitle:"暗夜猎手",
                 userSkill:"猎杀时刻"
             }];
             
         window.onload = function(){
 
             // 1.获取表单元素
             var userName = document.querySelector(".userName");
             var userTitle = document.querySelector(".userTitle");
             var userSkill = document.querySelector(".userSkill");
 
             // 2.获取添加按钮
             var add = document.querySelector(".add");
 
             var tbody = document.querySelector("tbody");
             var dels = document.querySelectorAll(".del");
            
             // 1.找到相同的代码
             // 2.找到相同代码中不同的变量，定义为参数
             // 3.定义返回值
             function createTr(userName,userTitle,userSkill) {
                  // 1 创建元素节点、 1个tr 4个td 1个button
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                var td4 = document.createElement("td");
                var btn = document.createElement("button");
                // 2 将内容添加到元素节点中
                td1.innerHTML = userName;
                td2.innerHTML = userTitle;
                td3.innerHTML = userSkill;
                btn.innerHTML = "删除";
                // 3组装成一个tr元素节点
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                td4.appendChild(btn);
                // 4 给新的按钮添加一个点击事件
                btn.onclick = function(){
                 //  this 表示函数的调用者。
                     this.parentNode.parentNode.remove();
                }
                // 5.将tr插入到表格中
                tbody.appendChild(tr);
             }
 
             for (var i = 0; i < dataList.length; i++) {
                 // console.log(dataList[i]);
                 // console.log(dataList[i].userName);
                 // console.log(dataList[i].userTitle);
                 // console.log(dataList[i].userSkill);
                 createTr(dataList[i].userName,dataList[i].userTitle,dataList[i].userSkill);
                 
             }
            
             add.onclick = function(){
                 //3.获取文本框中的内容
                var uname = userName.value;
                var utitle = userTitle.value;
                var uskill = userSkill.value;
                // 4.添加非空验证
                if (uname === "" || utitle === "" || uskill === "") {
                    return;
                }
               createTr(uname,utitle,uskill);
                // 将表单元素置空
                userName.value = "";
                userTitle.value = "";
                userSkill.value = "";
             }
             // 7.给每一个按钮都添加删除功能
             // item 表示dels中的一个元素，当前正在遍历的元素
             dels.forEach(function(item){
                 item.onclick = function(){
                     // 8 找到自己所属的tr元素，将其删除
                     item.parentNode.parentNode.remove();
                 }
             });
         }
     </script>
 </head>
 <body>
     <div class="box">
         <form action="">
             姓名：<input type="text" class="userName"><br>
             称号：<input type="text" class="userTitle"><br>
             大招：<input type="text" class="userSkill"><br>
             <button type="button" class="add">添加</button>
         </form>
         <table cellspacing="0">
             <thead>
                 <tr>
                     <th>姓名</th>
                     <th>称号</th>
                     <th>大招</th>
                     <th>操作</th>
                 </tr>
             </thead>
             <tbody>
                
             </tbody>
         </table>
     </div>
     
 </body>
 </html>

效果图:
在这里插入图片描述

21、js事件

1.什么是事件
一件事情发生了，对其进行处理或者响应。
2. 事件的三要素

        事件源，事件类型，事件处理  
        比如：点击右上角的X，页面关闭。 事件源：X，事件类型：点击  事件处理：页面关闭。
        谁引发的后续事件，谁就是事件源。
        事件源：DOM节点（一般为元素节点）
        事件类型 
        事件处理  函数（代码块）

事件类型：

         1.鼠标事件
         2.键盘事件
         3.浏览器事件
         4.表单事件

- 1.鼠标事件

            click ==  鼠标左键单击
            dbclick == 鼠标左键双击
            contextmenu  ==  鼠标右键单击
            mousewheel == 鼠标滚动
            mousedown  == 鼠标单击事件  不管是左键还是右键，还是滚动都可以触发
            mouseup == 鼠标抬起
            mousemove == 鼠标移动
            mouseover == 鼠标移入
            mouseout == 鼠标移出
            mouseenter == 鼠标移入
            mouseleave == 鼠标移出

- 2.键盘事件
键盘事件
不是所有的元素都能触发
表单元素(选中效果)，document ,window

        keydown
            键盘按下
        keyup
            键盘抬起
        keypress 
            键盘按下
            在文本框中输入的内容必须与你按下的键是一致的

- 3.浏览器事件
浏览器事件 window事件

        load  页面加载完毕
        scroll  页面滚动
        resize  窗口尺寸改变
        offline  网络断开
        online   网络恢复

- 4.表单事件
表单事件主要是表单元素和form标签的

    change   表单内容发生改变时，而且已经失去焦点时触发。
    input  表单输入事件  
    focus 获取焦点 
    blur  失去焦点
    submit 表单提交
    reset 表单重置

22、事件绑定方式

1.行内式

在标签中直接通过on+事件类型属性去绑定事件
2.内联式

（1）直接绑定匿名函数
（2）先定义函数，再去绑定
3.监听

addEventListener
语法：事件源.addEventListener(“事件类型”,事件处理函数);
使用监听，可以给同一个事件类型绑定多个事件处理函数。
多个事件处理函数执行顺序是按照绑定顺序来的
先绑定先执行
在IE低版本不支持
attachEvent()
IE低版本支持
语法：事件源.attachEvent(“on+事件类型”,事件处理函数);
多个事件处理函数的执行顺序是按照绑定顺序的倒序来的
先绑定后执行

对于非监听方式，可以直接将null赋值。
对于监听方式绑定

        标准浏览器
            removeEventListener("事件类型",事件处理函数)；
            【注意】 如果你想要解绑事件，那么你在绑定事件时，一定要将函数单独定义。使用函数名的方式去绑定事件。

        IE低版本
            detachEvent("on+事件类型",事件处理函数);

ele 事件源
type 事件类型
handler 事件处理函数

23、事件对象

对象可以看成属性的集合函数也是属性的一种。（属性和函数的集合）
事件对象主要包含一些事件的信息。

事件绑定：

元素节点.on+事件类型 = 匿名函数；
事件对象的产生：在事件绑定完成后，就自动生成了一个事件对象。
事件绑定函数，因为不是在代码中直接调用函数，所以没有办法直接传参.
浏览器会给咱们一个默认的参数，这个参数就是事件对象。

获取事件对象：

     在标准浏览器中。
         直接在事件处理函数上定义一个形参。
         会在事件触发的时候，由浏览器自动传递实参。

     IE低版本
         window.event
         在标准浏览器下也可以使用

     兼容写法：
         var event = event || window.event;

24、鼠标事件对象&获取元素尺寸&元素的偏移量

鼠标事件对象

属性：

         button：用来表示咱们按下的是哪一个按键
             0 左键
             1 滚轮
             2 右键

获取当前鼠标的位置（原点不同）

             clienX  可视窗口的左上角为原点
             clienY 
             pageX   整个页面的左上角为原点
             pageY
             screenX  电脑屏幕的左上角为原点
             screenY
             offsetX 以事件触发的元素为原点
             offsetY

获取元素尺寸

元素的占地面积
（宽高+内边距+边框） IE盒模型设置的宽高就是元素的占地尺寸

 offsetWidth 
 offsetHeight
     元素的内容+内边距+边框
 clientWidth
 clientHeight
     元素的内容 + 内边距

偏移量
一个元素对于参考系的坐标位置。

 offsetParent
     语法：元素.offsetParent
     作用：拿到该元素获取偏移量时的参考父级 
         默认以body为参考系，如果父辈里有定位属性，则获取该父辈元素。
 offsetLeft  offsetTop
     语法：元素.offsetLeft  元素.offsetTop
     作用：拿到元素相对于参考系的相对偏移量。

25、获取浏览器窗口尺寸

BOM
innerWidth
innerHeight
DOM 文档 html的元素尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight

26、鼠标跟随

代码：

 <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            background-image: url("img/jl.gif");
            background-size: contain;
            position: absolute;
        }
        body{
            background-color: #000;
        }
    </style>
<!-- 
    1.需求：让div跟随鼠标移动

    分析代码：
        鼠标移动事件
            1 获取鼠标的坐标位置
            2.更改div的坐标位置          
 -->
<script>
    window.onload = function(){
        //1.获取div元素
        var box = document.getElementById("box");
        // 2.添加鼠标移动事件  
        // ？ 鼠标移动事件应该添加给谁
        document.onmousemove = function(event){
            // 3.获取鼠标的位置
            var event = event || window.event;
            var l = event.pageX;
            var t = event.pageY;
            // 让div移动
            //位置：鼠标的位置-自身宽高的一半
            box.style.left = l - box.offsetWidth/2  + "px";
            box.style.top = t - box.offsetHeight/2 + "px";

        }

    }
</script>

## 27、键盘事件对象键盘事件对象判断你按下的是哪个键

属性：

key：你按下的是哪个键区分大小写。
在IE低版本不适用

keycode:

以编码格式返回不区分大小写。
空格 32
回车（Enter） 13

在火狐低版本使用which属性。

尽量用keycode去判断你按下的键位。

     altkey  判断是否按下alt键
     shiftkey  判断是否按下shift键
     ctrlKey  判断是否按下ctrl键
     metaKey 判断是否按下 window  win键  苹果系统（mac）  comment键

以上四个值返回是布尔值，组合键（按下它的同时再按下别的键位） IE低版本不支持。
在这里插入图片描述

28、冒泡和捕获

在事件的对象中，有一个属性叫做 target
表示本次事件触发，准确触发的对象。
事件目标。
事件：事件源，事件类型，事件处理函数
在低版本的IE中不支持

     IE支持：srcElement

     兼容写法：
         var event = event || window.event;
         var target = event.srcElement || event.target;
     
     冒泡：
         从 事件目标 到 window 的顺序来执行所有的事件。
     捕获：
         从 window 到 事件目标 的顺序来执行所有的事件。

     addEventListener 第三个参数为true的话 表示捕获。 false 表示 冒泡。

29、阻止事件传播

在标准浏览器中：

event.stopPropagation();
【注意】书写在事件处理函数中
在IE低版本中：

event.cancelBubble = true;
兼容写法：

if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}

30、事件委托

循环绑定事件：
1.资源浪费
2.新增的节点没有绑定事件，需要手动再绑定一次。

事件委托：

 原理：冒泡
 步骤：
     1.找到要操作的节点的共同的父节点或者祖先节点。
     2.将事件添加到父节点上。
     3.找到事件目标，判断事件目标是否是想要触发的对象，如果是，则触发响应的事件。

     获取焦点：
         元素节点.focus()

| 在这里插入图片描述
效果图：

久伴慕随心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

js基础知识带点汇总

文章目录

1、定时器

2、时钟

3、秒表

4、BOM

5、小米活动倒计时代码

6、location

7、history

8、浏览器卷去的高度

9、浏览器滚动和自定义滚动的速度

10、DOM

11、获取元素节点的方法

12、DOM节点

13、自定义获取元素节点

14、操作元素节点的属性&类名&内容&样式

15、函数的执行

16、全选练习

17、属性节点

18、通过节点关系来获取节点

19、节点操作

20、带有删除和添加的表格&自动生成数据

21、js事件

22、事件绑定方式

23、事件对象

24、鼠标事件对象&获取元素尺寸&元素的偏移量

25、获取浏览器窗口尺寸

26、鼠标跟随

28、冒泡和捕获

29、阻止事件传播

30、事件委托