JS 三_查找任意字符开头,然后第二个字符为3-CSDN博客

本文链接：https://blog.csdn.net/weixin_51398691/article/details/116133834

包装类

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

var a = 123;
console.log(typeof a);number

string

可以将基本类型字符串转换为String对象

Number

可以将基本类型数字转换为Number对象

Boolean()

可以将基本数据的类型值转换为Boolean对象

//创建一个number类型的对象
var num = new Number(3);
console.log(typeof num);object

var str = new String("hello");
console.log(typeof str);object

var bool = new Boolean(true);
console.log(typeof bool);object

//向num中添加一个属性
num.hello = "abcdefg";
console.log(num.hello);abcdefg

var a = 3;
a.hello = "你好";
console.log(a.hello);undefined

var num = new Number(3);
var num2 = new Number(3);
console.log(num == num2);false

方法和属性能添加给对象，不能添加给基本数据类型，当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法

var s = 123;
s = s.toString();//将数字转换为字符串
s.hello = "你好";undefined未报错
console.log(s);123
console.log(typeof s);string

字符串的相关方法

在底层字符串是以字符数组的形式保存的
[“H”,“e”,“l”]

//创建一个字符串
var str = "Hello Atguigu";
console.log(str.length);13
console.log(str[5]);" "

Length属性

可以用来获取字符串的长度
charAt()
可以返回字符串中指定位置的字符
根据索引来索取指定的字符

var str = "Hello Atguigu";
var result = str.charAt(0);
console.log("result = "+result);H

charCodeAt()

获取指定位置字符的字符编码（Unicode编码）

result = str.charCodeAt(0);
console,log(result);20013

String.formCharCode()

可以根据字符编码去获取字符

result = String.fromCharCode(20025);
console.log(result);丹

concat()

可以用来连接两个或多个字符串
作用和+一样

result = str.concat("你好"，"再见");
console.log(result);Hello Atguigu你好"，"再见

indexOf()

该方法可以检索一个字符串中是否含有指定内容
如果字符串中含有该内容，则会返回其第一次出现的索引
如果没有找到指定的类容，则返回-1
可以指定一个第二个参数，指定开始查找的位置

var str = "Hello Atguigu";
result = str.indexOf("a");
console,log(result);6

var str = "Hello Atguigu";
result = str.indexOf("h"，7);
console,log(result);-1

LastIndexOf()

该方法的用法和indexOf（）一样；
不同的是indexOf是从前往后找
而LastIndexof是从后往前找
也可以指定开始查找的位置
slice
可以从字符串中截取指定的类✌容
不会影响原字符串，而是将截取到内容返回
参数：
1.第一个：开始位置的索引（包括开始位置）
2.第二个：结束位置的索引（不包括结束位置）
3.如果省略第二个参数，则会截取到后边所有的
4.也可以传递一个参数作为负数，负数的话将会从后面计算

str = "abcdefg";
result = str.slice(1,4);bcd
result = str.slice(1,-1);bcdef

substring

可以用来截取一个字符串，与slice（）类似
参数：
1.第一个：开始位置的索引（包括开始位置）
2.第二个：结束位置的索引（不包括结束位置）
3.不同的是这个方法不能接受负值作为参数，如果传递了一个参数，则默认使用0
4.而且他还自动调整参数的位置,第一个大于第二个，自己交换

result = str.substring(1,0);a

substr

用来截取字符串
参数
1.截取开始位置的索引
2.截取的长度

str = "abcdefg";
result = str.substr(3,2);
console.log(result);de

split

可以将一个字符串拆分为一个数组
参数：
- 需要一个字符串作为参数，将会根据该字符串去拆分数组
- 如果要传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

str = "abc,bcd,efg";
result = str.split(",");abc,bcd,efg
console.log(Array.isArray(result));true
console,log(result[0]);abc
console,log(result.length);4

toUpperCase()

将一个字符串转化为大写并返回

toLowerCase()

将一个字符串转化为小写并返回

正则表达式

正则表达式用于定义一些字符串的规则
计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来
使用typeof检查正则对象，会返回object
创建正则表达式的对象
语法：var 变量 = new RegExp(“正则表达式”，“匹配模式”);
var reg = new RegExp(“a”);这个正则表达式可以来检查一个字符串中是否含有a,在构造函数中可以传递一个匹配模式作为第二个参数
可以是：
i:忽略大小写
g 全局匹配模式

//创建正则表达式的对象
 var reg = new RegExp("a");
 console.log(reg);/a/
 console.log(typeof reg);object

正则表达式的方法：
test（）
- 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则。如果符合则返回true，否则返回false

//这个正则表达式可以来检查一个字符串中是否含有a
var reg = new RegExp("a");
var str = "a";
var result = reg.test(str);
console.log(result);true

var reg = new RegExp("a","i");
var str = "A";
var result = reg.test(str);
console.log(result);true

正则语法

使用字面量来创建正则表达式
语法：var 变量 = /正则表达式/匹配模式
var reg = new RegExp(“a”,“i”); reg = /a/i
使用字面量的方式更加简单，使用构造函数创建更加灵活
创建一个正则表达式，检查一个字符串中是否有a或b
-reg = /a|b/;
创建一个正则表达式检查一个字符串中是否含有字母
[]里的内容也是或的关系
reg = /[abcdefg]/
reg = /[a-z]/任意小写字母
reg = /[A-Z]/任意大写字母
reg = /[A-z]/任意字母或者reg = /[a-z]/i
reg = /[0-9]/;任意数字
检查一个字符串中是否含有abc或adc或aec
reg = /a[bde]c/;
[^ ] 除了reg = /[^ab]/;除了ab以外的

reg = /[^ab]/;
console.log(reg.test("abc"));true

字符串和正则相关的方法

split()

可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
这个方法即使即使不指定全局匹配，也会全部拆分

var str = "1a2b3c4d5f";
var result = str.split("d");
console.log(result);1a2b3c4,5f

//根据任意字母来将字符串拆分
var str = "1a2b3c4d5f";
var result = str.split(/[A-z]/);
console.log(result);1,2,3,4,5

可以搜索字符串种是否含有指定内容
如果搜索到指定内容，则会返回到第一次出现的索引，如果没有搜索到返回-1
它可以接受一个正则表达式作为参数，然后根据正则表达式检索字符串
只会查找第一个，即使设置全局也没用

str = "hello abc hello aec afc";
//搜索字符串中是否含有abc或aec或afc
//result = str.search("abc");
result = str.search(/a[bef]c/);
console.log(result);6

match()

可以根据正则表达式，从一个字符串种将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回，即使之查询到一个结果

var str = "1a2b3c4d5f";
result = str.match(/[A-z]/);a

result = str.match(/[a-z]/gi);abcdf
console.log(result);
console.log(Array.isArray(result));true
console.log（result[0]）;

replace()

可以将字符串中指定内容替换为新的内容
参数：
1.被替换的内容，可以接受一个正则表达式作为参数
2.新的内容
默认只会替换第一个

var str = "12s34";
result = str.replace("s","#");
console.log(result);12#34

var str = "12ss4";
result = str.replace(/s/gi,"#");
//使用空号替换就是将原来的删掉
console.log(result);12##4

正则表达式语法

创建一个正则表达式检查一个字符串中是否含有aaa

var reg = /aaa/;
console.log(reg.test("aaabc"));true

创建一个正则表达式检查一个字符串中是否含有1000aaa
量词：
- 通过量词可以设置一个内容出现的次数m,
- 量词只对前面的一个内容起作用
- {n} 正好出现n次
- {m,n}出现m-n次
- {m,}m次以上
- “+” 至少一个，相当于{1，}
- ‘*’ 0个或多个，相当于{0，}
- ‘？’ 0个或一个，相当于{0，1}

var reg = /ab{3}/;
console.log(reg.test("aaabbb"));true

var reg = /（ab）{3}/;
console.log(reg.test("ababab"));true

var reg = /b{3}/;
console.log(reg.test("bbbb"));true

var reg = /ab{1,3}c/;
console.log(reg.test("abbc"));true

检查一个字符串是否以a开头
- ^ 表示开头
- $ 表示结尾

reg = /^a/;//匹配开头的a
reg = /a$/;//匹配结尾的a
console.log(reg.test("bc"));false
console.log(reg.test("abca"));true

reg = /^a$/;
console.log(reg.test("a"));true
//如果在正则表达式中同时使用^$则要求字符串同时完全符合正则表达式
console.log(reg.test("abba"));false
reg = /^a|a$/;
console.log(reg.test("abba"));true

检查一个字符串中是否含有.

练习：创建一个正则表达式，用来检查一个字符串是否是一个合法手机号

手机号的规则
1.以1开头
2.第二位3-9任意数字
3.三位以后任意数字9个
^1 [3-9] [0-9]{9}$
var phonestr = "18772913791";
var phonereg = /^1[3-9][0-9]{9}$/;
console.log(phonereg.test(phonestr));true

检查一个字符串中是否含有.
- .表示任意字符
- 在正则表达式中使用\作为转义字符，.来表示
检查一个字符串中是否含有\
- \\来表示\
注意：在使用构造函数时，由于他的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\来代替

var reg = /\./;
console.log(reg.test("b."));true
reg = /\\/;
console.log(reg.test("b.\\"));true
console.log("b.\\");b.\

reg = new RegExp("\\.");
console.log(reg);/\./

\w
- 任意字母，数字，下划线[A-z0-9_]
\W
- 除了字母，数字，下划线[^A-z0-9_]
\d
- 任意数字
\D
- 除了数字
\s
- 空格
\S
- 除了空格
\b
- 单词边界
\B
- 除了单词边界

reg = /child/;
console.log(reg.test("hello children"));true

reg = /\bchild\b/;
console.log(reg.test("hello children"));false

//接受一个用户的输入
var str = prompt("请输入你的用户名：");
var str = "    hello   ";
//去除掉字符串qianhouzhong中的空格，去除空格就是使用“”来替换空格
console.log(str);
str = str.replace(/\s/g,"");
console.log(str);hello

//去除开头的空格
str = str.replace(/^\s*/,"");
console.log(str);

//去除开头的空格
str = str.replace(/^\s*/,"");
console.log(str);

//去除结尾的空格
str = str.replace(/\s*$/,"");
console.log(str);

去除开头和结尾的空格
/^\s*|\s*$/g匹配开头和结尾的空格
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);he   llo

邮件的正则

电子邮件
- hello .hihao @ abc .com .cn
- 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位）.任意字母（2-5位）
- \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}

var emailReg = /^\w{3,}(\\.\w+)* @[A-z0-9]+(\\.[A-z]{2,5}){1,2}$/;
var email = "abc@abc.com.123";false
console.log(emailReg.test(email));

DOM简介

浏览器已经为我们提供文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页

<button id = "btn">我是一个按钮</button>
//获取button属性
var btn = document.getElementById（"btn"）;
console.log(btn);object HTMLButtonElement
//修改按钮的文字
btn.innerHTML = "I am button";

事件的简介

事件，就是用户和浏览器之间的交互行为，比如，点击按钮，鼠标移动，关闭窗口，我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行
这种写法我们称为结构和行为藕合，不方便维护，不推荐使用

<button id = "btn"  onclick="alert(‘点我’);">我是一个按钮</button>
onmousemove 碰一下
ondblclick 双击

可以为按钮的对应事件绑定处理函数的形式来响应事件

//写到body中
//获取id按钮对象
var btn = document.getElementById（"btn"）;
//可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时，其对应的函数将会被调用
//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称之为单击响应函数
btn.onclick = function(){
alert("还点--");
};

文档的加载

浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行，就运行一行，如果将script标签写到页面的上面，在执行代码时，页面还没有加载，页面没有加载，DOM对象也没有加载，会导致无法获取到DOM对象
将JS代码编写到页面的下面就是为了，可以再页面加载完毕以后在执行js代码

//onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们得代码执行时所有的DOM对象已经加载完毕了
window.onload = function(){
//获取ID为btn的按钮
var btn = document.getElementById（"btn"）;
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("还点--");
};
};

上面好管理，下面性能好

Dom查询

获取元素节点

通过document对象调用
- getElementById():通过ID属性获取一个元素节点对象（节点）
- getElementsByTagName():通过标签名获取一组元素节点对象（数组）
- getElementsByName():通过name属性获取一组元素节点对象（数组）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function(){
       //为id为btn01的按钮绑定一个单击响应函数
       var btn01 = document.getElementById("btn01");
       btn01.onclick = function(){
           //查找#bj节点
           var bj = document.getElementById("bj");
           alert(bj);//打出一个结点
           //innerHTML，通过这个属性可以获取到元素的内部的HTML代码
           alert(bj.innerHTML);
       }

       //为id为btn02的按钮绑定一个单击响应函数
       var btn02 = document.getElementById("btn02");
       btn02.onclick = function(){
           //查找所有li节点
           //getElmentsByTagName()可以根据标签名来获取一组元素节点对象
           //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
           //即使查询到的元素只有一个，也会封装到数组中返回
           var lis = document.getElementsByTagName("li");
           //打印lis
           alert(lis);//object HTMLCollection
           //打印长度
           alert(lis.length);11
           //变量lis
           for(var i= 0;i<lis.length;i++)
           {
               alert(lis[i]);//object HTMLLIElement
           }
           for(var i= 0;i<lis.length;i++)
           {
               alert(lis[i].innerHTML);//首尔
           }

           //为id为btn03的按钮绑定一个单击响应函数
       var btn03 = document.getElementById("btn03");
       btn03.onclick = function(){
           //查找name=gender得所有结点
           var inputs = document.getElementsByName("gender");
           alert(inputs.length);//2
          //innerHTML用于获取元素内部的HTML代码的，对于自结束标签，这个属性没有意义，如inputs里面的value
          //如果要读取该元素节点属性，直接使用元素.属性名
          //  例子：元素.id 元素.name 元素.value
          //注意：class属性不能采用这种方式，读取class属性时需要使用元素.className
           for(var i=0;i<inputs.length;i++)
           {
            alert(inputs[i].innerHTML);//打印出来为空
            alert(inputs[i].name);//gender
           }
          
    };
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

获取元素节点的子节点

通过具体的元素节点调用
- getElementsByTagName():方法：返回当前节点的指定标签名后代节点
- childNodes:属性：表示当前节点的所有子节点
- firstChild:属性：表示当前节点的第一个子节点
- lastChild:属性：表示当前节点的最后一个子节点

    //为id为btn04的按钮绑定一个单击响应函数
       var btn04 = document.getElementById("btn04");
       btn04.onclick = function(){
          //获取id为city的元素
          var city = document.getElementsById("city");
          //查找#city下的所有li节点
          var lis = city.getElementsByTagName("li");
          for(var i= 0;i<lis.length;i++)
           {
               alert(lis[i].innerHTML);//首尔
           }

            //为id为btn05的按钮绑定一个单击响应函数
       var btn05 = document.getElementById("btn05");
       btn05.onclick = function(){
           //获取id为city的节点
           var city = document.getElementsById("city");
           //返回#city的所有子节点
           //childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签之间空白也会当成文本节点
           //注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是九个
           var cns = city.childNodes;
           alert(cns.length);

           for(var i=0;i<cnc.length;i++)
           {
               alert(cns[i]);
           }
           //children属性可以获取当前元素的所有子元素
           var cns2 = city.children;
           alert(cns2.length);
         
           
            //为id为btn06的按钮绑定一个单击响应函数
       var btn06 = document.getElementById("btn06");
       btn06.onclick = function(){
           //获取id为phone的元素
           var phone = document.getElementsById("phone");
           //返回#phone的第一个子节点
           //phone.childNodes[0];
           //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
           var fir = phone.firstChild;
           //firstElementchild获取当前元素的第一个子元素，不支持IE8以下的浏览器，如果需要兼容他们尽量不要使用
           fir = phone.firstElementChild;
           alert(fir);

    };

在这里插入图片描述

动态轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
     <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #outer{
        width: 500px;
        margin: 50px auto;
        padding: 10px;
        background-color: chartreuse;
        text-align: center;
    }
    img{
        width: 500px;
        height: 333px;
    }
    </style>
    <script type="text/javascript">
     window.onload = function()
     {
         //点击按钮切换图片
         //获取两个按钮
         var prev = document.getElementById("prev");
         var next = document.getElementById("next");
         //要切换图片就是要修改img标签的src属性
         //获取img标签
         var img = document.getElementsByTagName("img")[0];

         //创建一个数组，用来保存图片的路径
         var imgArr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
         //创建一个变量，来保存当前正在显示的图片的索引
         var index = 0;
         //获取id为info的p元素
         var info = document.getElementById("info");
         //设置提示文字
         info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
         //alert(img);//数组，虽然只有一个，加[0]把数组取出来
         //分别为两个按钮绑定单击函数
         prev.onclick = function(){
             //切换到上一张，索引自减
             index--;
             //判断index是否小于0
             if(index<0)
             {
                index = imgArr.length-1;
                
             }
             //alert("上一张");
             //img.src = "1.jpg";
             img.src = imgArr[index];
             //当点击按钮以后，重新设置信息
            //设置提示文字
         info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
         };
         next.onclick = function(){
             //切换到下一张，索引自加
             index++;
              //判断index是否小于0
              if(index>imgArr.length-1)
             {
                index = 0;
             }
             //alert("下一张");
             //切换图片就是修改img的src属性，要修该一个元素的属性  元素.属性 = 属性值
            // img.src = "../第一周网页/网易云首页/秦霄贤.jpg";
            img.src = imgArr[index];
            //当点击按钮以后，重新设置信息
            //设置提示文字
         info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
         };
     };
    </script>
</head>
<body>
    <div id="outer">
        <p id = "info"></p>
        <img src="./1.jpg" alt="">
        <button class="prev">上一张</button>
        <button class="next">下一张</button>
    </div>
</body>
</html>

dom查询的剩余方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            //获取body标签
            var body = document.getElementsByTagName("body")[0];
            //这里返回是一个数组，所以要用【0】
            console.log(body);

            //在document中有一个属性body，他保存的是body的引用
            var body = document.body;
            console.log(body);//object HTMLBodyElement

            //document.documentElement保存的是HTML根标签
            var html = document.documentElement;
            console.log(html);//object HTMLhtmlElement

            //document.all代表页面中所有的元素
            var all = document.all;
            console.log(all.length);//6
            for(var i=0;i < all.length;i++)
            {
                console.log(all[i]);//object HTMLBodyElement object HTMLhtmlElement object HTMLmetaElement...
            }
            all = document.getElementsByTagName("*");
            console.log(all.length);//6

            //根据元素的class属性值查询一组元素节点对象,getElementsByClassName()可以根据class的属性值获取一组
            //元素节点对象，但是该方法不支持IE8及以下的浏览器
            var box1 = document.getElementsByClassName("box1");
            console.log(box1.length);//1

            //获取页面中所有的div
            var divs = document.getElementsByTagName("div");
            console.log(divs.length);//3

            //获取class为box1中的所有div
            //.box1 div
            //document.querySelector（）需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
            //虽然IE8中没有getElementsByClassName()但是可以使用document.querySelector（）代替
            //使用该方法会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回一个
            var div = document.querySelector(".box1 div");
            console.log(div); 

            //document.querySelectorAll()该方法和document.querySelector（）用法类似，不同的是它会将符合条件的元素
            //封装到一个数组中返回，即使符合条件的元素只有一个,他也会返回数组
            var box1 = document.querySelectorAll(".box1");
            console.log(box1.length);//4
        };
     </script>
</head>
<body>
    
</body>
</html>

dom增删改

 window.onload = function(){
            //创建一个广州节点，添加到#city下
            myClick("btn01",function(){
                //创建广州节点 <li>广州</li>
                //创建一个li元素节点
                //document.createElement()可以用于创建一个元素节点对象，他需要一格表签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
                var li = document.createElement("li");

                //创建一个广州文本节点
                //document.createTextNode()可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本，并将新的节点返回
                var gztext = document.createTextNode("广州");

                //将gztext设置为li的子节点
                //appendChild()向一个父节点中添加一个新的子节点
               //用法：父节点.appendChild(子节点);
               li.appendChild(gztext);

               //将广州添加到city下
               //获取id为city的节点
               var city = document.getElementById("city");
               city.appendChild(li); 
            })

        };


        //将广州节点插入到#bj前面
        myClick("btn02",function(){
            //创建一个广州
            var li = document.createElement("li");
            var gztext = document.createTextNode("广州");
            li.appendChild(gztext);

            //获取id为bj的节点
            var bj= document.getElementById("bj");

            //获取city
            var city = document.getElementById("city");

            //inserBefore()可以在指定的子节点前插入新的子节点
            //语法：父节点.inserBefore(新节点，旧节点)
            city.insertBefore(li,bj);
        })


        //使用广州节点替换#bj节点
        myClick("btn03",function(){
            //创建一个广州
            var li = document.createElement("li");
            var gztext = document.createTextNode("广州");
            li.appendChild(gztext);

            //获取id为bj的节点
            var bj= document.getElementById("bj");

            //获取city
            var city = document.getElementById("city");
            //replaceChild()可以使用指定的子节点替换已有的子节点
            //语法：父节点.replaceChild(新节点，旧节点)
            city.replaceChild(li,bj);
        };


            //删除#bj节点
            myClick("btn04",function(){
            //获取id为bj的节点
            var bj= document.getElementById("bj");

            //获取city
            var city = document.getElementById("city");
            //removeChild()可以删除一个子结点
            //语法：父节点.removechild(子节点);/
            city.removeChild(bj);
            //如果只有bj不知到父元素的话可以使用这样，不用再获取父元素了
            //常用：子节点.parentNode.removeChild(子节点);
            bi.parentNode.removeChild(bj);
            };


            //读取#city内的HTML代码
            myClick("btn05",function(){
                //获取city
                var city = document.getElementById("city");
                alert(city.innerHTML);
            });

            //设置#bj内的HTML代码
            myClick("btn06",function(){
                //获取bj
                var bj = document.getElementById("bj");
                bj.innerHTML = "昌平";
            });

            //向city中添加广州,使用innerHTML也可以完成dom的一些增删改的相关操作，一般我们会两种方法结合使用
            myClick("btn07",function(){
                var city = document.getElementById("city");
                city.innerHTML += "<li>光州</li>"
            });

            //以下这种方法不会动作太大
            //创建一个li
            var li = document.createElement("li");
            //向li中设置文本
            li.innerHTML = "广州";
            //将li添加到city中
            city.appendChild(li);


        function myClick(idstr,fun)
        {
            var btn = document.getElementById(idstr);
            btn.onlick = fun;
        }
     </script>
</head>
<body>
   
</body>
</html>

在这里插入图片描述

删除练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    //点击一个超链接之后，删除一个员工的信息
    //获取所有的超链接
    var allA = document.getElementsByTagName("a");
    
    //为每个超链接都绑定一个单机响应函数
    for(var i=0;i<allA.length;i++)
    {
        allA[i].onclick = function(){
            //点击超链节以后需要删除超链节所在的属性
            //点击哪个超链节，this就是谁
            //获取当前tr
            var tr = this.parentsNode.parentsNode;

            //获取要删除员工的名字,下面两个都可以
            //var name = tr.getElementsByTagName("td")[0].innerHTML;
            var name = tr.children[0].innerHTML;


            //删除之前弹出一个提示框
            //confirm()用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字显示出来
            //如果用户点击确认，则会返回true，如果点击取消，则会返回false
            var flag = confirm("确认删除+"name"+嘛？");


            //如果用户点击确认
            if(flag)
            {
                //删除tr
                tr.parentsNode.removeChild(tr);
            }


            //删除tr
            tr.parentsNode.removeChild(tr);
            //点击超链接以后，超链接会跳转页面，这是超链接的默认行为，但是此时我们不希望出现此行为，可以通过在响应函数
            //的最后return false来取消默认行为，或者在a标签里面的herf属性等于javascript:
            return false;
        }
    }
    </script>
</head>
<body>
    
</body>
</html>

添加练习

使用DOM操作css

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS属性修改的样式往往会立即显示
但是如果在样式中写了！important，则此时样式会有较高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加！important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: burlywood;
        }
        
    </style>
    <script>
        window.onload = function()
        {
            // 点击按钮以后，修改box1的大小
            //获取box1
            var box1 = document.getElementById("box1");
            //为按钮绑定单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function()
            {
              //修改box1的宽度
              //通过JS修改元素的样式
                   //语法：元素 .style .样式名 = 样式值
              //注意：如果css样式名中含有-，这种名称在JS中是不合法的，比如background-color，需要
              //将这种样式名修改为驼峰命名法，去掉-，然后将-后面的字母大写     
                   box1.style.width = "300px";
                   box1.style.backgroundColor = "yellow";
            };
            //点击按钮2以后，读取该元素的样式
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function()
            {
                //读取box1的样式
                //语法：元素.style.样式名
                //通过style属性设置和读取的都是内联样式，无法读取样式表中的样式,所以这里点了第一个按钮之后再点二才会有效果
                alert(box1.style.width);
            };
        };
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <button id="btn02">点我一下</button>
    <br>
    <div id="box1"></div>
</body>
</html>

获取元素地样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function(){
            //点击按钮以后读取box1的样式
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                //读取box1的宽度
                //alert(box1.style.width);


                //获取元素的当前显示的样式
                  //语法：元素.currentStyle.样式名，它可以用来读取当前元素正在显示的样式
                  //如果当前元素没有设置该样式，则获取它的默认值 没有设置width，会获取到auto
                  //currentStyle只有IE浏览器支持，其他浏览器都不支持
                //alert(box1.currentStyle.width);
                //alert(box1.currentStyle.backgroundColor);

                //在其他浏览器中可以使用
                  // getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用
                //需要两个参数
                  //第一个：需获取样式的元素
                  //第二个：可以传递一个伪元素，一般都传null
                //该方法会返回一个对象，对象中封 装了当前元素对应地样式,可以通过对象，样式名来读取样式
                //如果获取地样式没有设置，则会获取到真实的值，而不是默认值，比如，没有设置width，他不会获取到auto，而是一个长度
               //但是该方法不支持IE8以下的浏览器

               //通过currentStyle和ComputedStyle()读取到地样式都是只读，不能修改，如果要修改必须通过style属性
                var obj = getComputedStyle(box1,null);
                //alert(obj);
                alert(obj.width);

                //正常浏览器地方式
                //alert(getComputedStyle(box1,null),backgroundColor);
                //IE8的方式
                //alert(box1.currentStyle.backgroundColor);
            };
        };
           
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <br><br>
    <div id="box1"></div>
</body>
</html>

getStyle()方法

//定义一个函数，用来获取指定元素地当前地样式
        //参数：obj 要获取样式的元素
               // name 要获取地样式名
               var w = getStyle(box1,"width");
               alert(w);
               //前面还有
               function getStyle(obj,name)
               {
                   if(window.getComputedStyle){//加了window就是属性，不是变量，不会报错
                      //正常浏览器地方式
               return getComputedStyle(box1,null)[name];
               //name是width获取到width，是其他获取到其他，灵活
                   }
                   else{
                     //IE8的方式
            return obj .currentStyle[name];
                   }
               }

其他样式相关地属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 10px;
        }
    </style>
    <script>
         window.onload = function(){
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                // clientWidth
                // clientHeight
                // 这两个属性可以获取元素地可见高度和宽度
                // 这些属性都是不带px地，返回一个数字，可以直接进行计算
                //会获取元素地宽度和高度，包括内容区和内边距，不包括边框
                //这些属性都是只读地，不能改box1.clientWidth=300,这样改不了
                alert(box1.clientWidth);

                //offsetParent可以用来获取当前元素地定位父元素
                //会获取到当前元素最近的开启了定位地祖先元素
                //如果所有的祖先元素都没有开启定位，则返回body
                var op = box1.offsetParent;
                alert(op.id);
               
                //offsetLeft当前元素相对于其定位父元素地水平偏移量
                //offsetTop当前元素相对于其定位元素地垂直偏移量
                alert(box1.offsetLeft);
                  
                //clientWidth可以获取元素整个滚动区域地宽度
                //clientHeight可以获取元素整个滚动区域地高度
                alert(box4.clientWidth);
                
                //scrollLeft可以获取水平滚动条的距离
                //scrollTop可以获取垂直滚动条的距离
                alert(box4.scrollLeft);
                alert(box4.scrollTop);
                //当满足scrollHeight - scrollTop ==clientHeight说明垂直滚动条滚动到底了
                //当满足scrollWidth - scrollLeft ==clientWidth说明水平滚动条滚动到底了·

            };
        };
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <br><br>
    <div id="box1"></div>
</body>
</html>

练习：阅读完成才可以注册

这块减法有一点小问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info{
            width: 300px;
            height: 500px;
            background-color: burlywood;
            overflow: auto;
        }
    </style>
    <script>
       window.onload = function()
    {
    //        当垂直滚动条滚动到底时可用
    //        onscroll
    //        该事件会在元素的滚动条滚动时触发

    //        获取id为info的p元素
           var info = document.getElementById("info");
           //获取两个表单项，以数组形式
           var inputs = document.getElementsByTagName("input");
        //    为info绑定一个滚动条滚动的事件
        info.onscroll = function()
        {
            
            //检查垂直滚动条是否滚动到底
            if(info.scrollHeight-info.scrollTop == info.clientHeight)
            {
                //滚动条滚动到底，使表单可用
                // disabled属性可以设置一个元素是否禁用
                // 如果设置为true，则元素禁用
                // 设置为false，则元素可用
                alert("kk");
                inputs[0].disabled = false;
                inputs[1].disabled = false;
           }
        };
       };
    </script>
</head>
<body>
    <h3>欢迎用户注册</h3>
    <p id="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, ipsum velit? Eos molestias dignissimos, quia culpa officia similique est voluptatem maiores amet voluptate sit nihil commodi debitis sunt tempore natus!
    Obcaecati, quasi? Officiis porro repellat, cumque fugit asperiores laudantium incidunt magni earum! Ipsum animi nemo deleniti sequi eaque quam provident aut, nostrum sed et, voluptatem illum sit mollitia? Temporibus, nobis!
    Fugiat tempore numquam dolorem dolore explicabo, maxime earum odio quam porro architecto? Harum corrupti iure quo iste a cum amet voluptates eos sed. Assumenda perferendis magnam aspernatur laboriosam eaque? Fuga.
    Laudantium velit perspiciatis placeat aut reiciendis adipisci laborum, corporis impedit, nam delectus incidunt officiis quasi cupiditate voluptate ipsum pariatur qui! Aliquid velit repellat ducimus hic non autem assumenda beatae facilis.
    Et facere rem neque suscipit. Laborum voluptatem asperiores fugit natus consequuntur ut ea dolor ratione sint non quaerat sed veniam esse magni incidunt, quia possimus rem recusandae reprehenderit. Expedita, cumque.
    Iste non laborum nisi corporis suscipit, ipsam consequuntur obcaecati maxime voluptates voluptate assumenda temporibus! Soluta, enim veniam. Aliquid quam dignissimos similique dolorum odit explicabo deserunt error reiciendis ullam, veritatis fuga!
    Neque minus facilis libero! Optio totam iusto unde similique voluptatem aliquid eligendi consequuntur, laboriosam eos ut eveniet ipsa esse alias qui cupiditate illum minus saepe assumenda officia? Dolorem, tempora dolores?
    Excepturi, enim placeat vero consectetur modi, rem iste sunt velit aut ducimus doloremque reprehenderit? Architecto velit qui maxime deleniti in, libero ab explicabo vitae, iste eius voluptate cumque voluptatem tempora.
    Ea eos totam iusto quae minima recusandae eveniet architecto. Corporis ratione commodi voluptatibus placeat animi impedit quos corrupti in cum iusto sunt, unde soluta iure facilis, repudiandae expedita sint et.
    
    
    Deleniti recusandae maiores non odio eveniet laudantium facilis tempore nemo, odit facere, pariatur consequatur perspiciatis voluptatum enim! Consequuntur ut doloribus at? Perspiciatis cupiditate harum praesentium ducimus vitae nisi aspernatur quae?</p>
    <!-- 如果为表单添加disabled="disabled",则表单变成不可用的状态 -->
    <input type="checkbox" disabled="disabled">我已经仔细阅读
    <input type="submit" value="注册" disabled="disabled">
</body>
</html>

事件对象

显示坐标成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #da{
            width: 200px;
            height: 100px;
            border:2px solid burlywood;
        }
        #xiao{
            width: 200px;
            height: 50px;
            border:2px solid burlywood;
        }
    </style>
    <script>
        //   当鼠标在da中移动时，在xiao中显示鼠标的坐标

        window.onload = function()
        {
        //   获取两个div
        var da = document.getElementById("da");
        var xiao = document.getElementById("xiao");
        //onmousemove该事件将会在鼠标在元素中移动时被触发
        //事件对象，当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
        //在事件对象中封装了当前事件相关的一切信息，比如，鼠标的坐标，键盘那个按键被按下 鼠标滚轮滚动的方向
        da.onmousemove = function(event){
            // 在IE8中，响应函数被触发时，浏览器不会传递事件对象
            // 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

            if(!event)
            {
                event = window.event;
            }
            //解决事件的兼容性问题
            //或者event = event || window.event;

            // clientX可以获取鼠标指针的水平坐标
            //clientY可以获取鼠标指针的垂直坐标

            var x = event.clientX;
            var y = event.clientY;

            //在xiao中显示鼠标的坐标
            //alert("x = "+x + ", y = "+y);
            xiao.innerHTML = "x = "+x + ", y = "+y;

           
        };
        };
    </script>
</head>
<body>
    <div id="da"></div>
    <br><br>
    <div id="xiao"></div>
</body>
</html>

div跟随鼠标移动

成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
        }
    </style>
    <script>
        //使div跟随鼠标移动
        window.onload = function(){
          //获取box1
          var box1 = document.getElementById("box1");
          //绑定鼠标移动事件这里绑定box1只能向下移，所以应该绑定document
          document.onmousemove = function(event)
          {
            //解决兼容性问题
            event = event || window.eventh;

            //获取滚动条滚动的距离
            //chorme认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
            //火狐等浏览器认为浏览器的滚动条是HTML的
            var st = document.body.scrollTop||document.documentElement.scrollTop;
            var sl =document.body.scrollLeft||document.documentElement.scrollLeft;

          //获取到鼠标的坐标
          //clientX和clientY用于获取鼠标在当前的可见窗口的坐标，div的偏移量，是相当于整个页面的
          var left = event.clientX;
          var top = event.clientY;

        // pageX和pageY可以获取鼠标相对于当前页面的坐标，但是这两个属性在IE8中不支持，所以如果要兼容IE8，则不要使用
        // var left = event.pageX;
        //   var top = event.pageY;
          //设置div的偏移量
          box1.style.left = left + sl +"px";//这里加是解决鼠标和div之间有距离问题
          box1.style.top = top  + st +"px";
          };

        };
    </script>
</head>
<body style="height: 1000px;width: 2000px;">
    <div id="box1"></div>
</body>
</html>


取消冒泡
  var box2 = document.getElementById("box2");
        box2.onmousemove = function(event)
        {
            event = event || window.eventh;
            event.cancelBubble = true;
        };
    };
    </script>
</head>
<body style="height: 1000px;width: 2000px;">

    <div id="box2"  style="width: 500px;height: 500px;background-color: rgb(39, 52, 165);"></div>
    <div id="box1"></div>
</body>
</html>

冒泡

成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: burlywood;
        }
    </style>
    <script>
       window.onload = function(){
        //  事件的冒泡（Bubble）
        //  所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
        //在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
           
        //为sl绑定一个单机响应函数
        var sl = document.getElementById("sl");
        sl.onclick = function(event){
            event = event||window.event;
            alert("我是span的单机响应函数");
            //取消冒泡
            //可以将事件对象的cancelBubble设置为true，即可取消冒泡
            event.cancelBubble = true;
        };
        
        //为box1绑定一个单击响应函数
        var box1 = document.getElementById("box1");
        box1.onclick = function(event)
        {
            event = event||window.event;
         alert("我是div的单击响应函数");
         event.cancelBubble = true;
        };

        //为body绑定一个单击响应函数
        document.body.onclick = function()
        {
            alert("我是body的单击响应函数");
        };
       };
    </script>
</head>
<body>
    <div id="box1">
        我是box1
        <span id="sl">我是span</span>
    </div>
</body>
</html>

事情的委派

成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function()
        {

            //点击按钮以后添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function()
            {
              //创建一个li
              var li = document.createElement("li");
              li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接一</a>";
              //将li添加到u1中
              u1.appendChild(li);
            };

            //为每一个超链接都绑定一个单击响应函数
            //这里我们为每一个超链接都绑定了一个单机响应函数，这种操作比较麻烦，而且这些操作只能为已有的超链接
            //设置事件，而新添加的超链接必须重新绑定

            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //遍历
            // for(var i = 0;i<allA.length;i++)
            // {
            //     allA[i].onclick = function()
            //     {
            //         alert("我是a的单击响应函数");
            //     };
            // }

            //我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同
            //的祖先元素

            //事情的委派
            //指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而
            //通过祖先元素的响应函数来处理事件
            //时间委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

            //为ul绑定一个单击响应函数
            u1.onclick = function(event)
            {
               event = event||window.event;
               //target
               //event中的target表示的触发事件的对象
               //如果触发事件的对象是我们期望的元素，则执行否则不执行
               if(event.target.className == "link")
               {
                       alert("我是u1的单击响应函数");
               }

            };
            
            
        };
    </script>
</head>
<body>
    <button id="btn01" >添加超链接</button>
    <ul id="u1" style="background-color: chartreuse;">
        <li>
         <p>
             我是p元素
         </p>
        </li>
        <li><a href="javascript:;" class="link" >超链接一</a></li>
        <li><a href="javascript:;" class="link" >超链接二</a></li>
        <li><a href="javascript:;" class="link" >超链接三</a></li>
    </ul>
</body>
</html>

事情的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function()
        {
            //点击按钮以后弹出一个内容
            //获取按钮对象
            var btn01 = document.getElementById("btn01");


            //使用对象.事件 = 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定单击响应函数，不能绑定多个
            //如果绑定了多个，则后面会覆盖前面的。例：
            //为btn01绑定一个单击响应函数
            // btn01.onclick = function()
            // {
            //   alert(1);
            // };
            //为btn01绑定第二个单击响应函数
            // btn01.onclick = function()
            // {
            //   alert(2);//2会将一覆盖
            // };

            // addEventListener()
            // - 通过这个方法也可以为元素绑定响应函数
            // - 参数：
            //      1.事件的字符串，不要on
            //      2.回调函数，当事件触发时该函数会被调用
            //      3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

            // 使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时
            // ，响应函数将会按照函数的绑定执行

        // btn01.addEventListener("click",function(){
        //     alert(1);
        // },false);
        // btn01.addEventListener("click",function(){
        //     alert(2);
        // },false);

        // 这个方法不支持IE8以下的浏览器
        // attachEvent()
        // 在IE8中可以使用 attachEvent()来绑定事件
        // 参数：
        //    1，事件的字符串，要on
        //    2.回调函数
        //  这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反
        
        
        //  btn01.attachEvent("onclick",function(){
        //      alert(1);
        //  });
        //  btn01.attachEvent("onclick",function(){
        //      alert(2);
        //  });

        // 定义一个函数，用来指定元素绑定函数
        // addEventListener()中的this,是绑定事件的对象
        // attachEvent()中的this,是window
        // 需要统一两个方法this
        // 参数:
        //   obj 要绑定事件的对象
        //   eventStr 事件的字符串
        //   callback 回调函数
          function bind(obj,eventStr    ,callback){
              if(obj.addEventListener){
                  //大部分浏览器兼容的方式
                  obj.addEventListener(eventStr,callback,false);
              }else{
                  //this是谁由调用方式决定
                  //callback.call(obj)
                  //IE8以下
                  obj.attachEvent("on"+eventStr,function(){
                      //在匿名函数中调用回调函数
                      callback.call(obj);
                  });
              }
          };




        };
    </script>
</head>
<body>
   <button id="btn01">点我</button>
</body>
</html>