day16_js补充、dom补充

最新推荐文章于 2022-06-21 23:18:47 发布
最新推荐文章于 2022-06-21 23:18:47 发布
阅读量360 收藏
点赞数
分类专栏： python_web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyanan8514/article/details/79478773
版权

后台管理页面布局

之前我们练习的都是主页面，用的套路都差不多，今天我们来学习一下 后台管理页面布局。

position: fixed的布局

1、布局图

说明：这种是左侧菜单跟随滚动条
这里写图片描述

2、代码
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height: 48px;
            background: #2459a2;
            color: white;
        }
        .fl{
            float: left;
        }

        .fr{
            float: right;
        }

        .pg-content .menu{
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background: pink;
            overflow: auto;  //加滚动条
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu fl">a</div>
        <div class="content fl">
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

这边补充一个知识点 min-width这个关键字：表示最小宽度，当你20%的宽度小于200px的时候，我就用min-width，但是当你min-width大于200px，应用width。

.pg-content .menu{
            width: 20%;
            background: red;
            min-width: 200px;
        }

position: absolute 布局 *

1、布局图

说明：左侧以及上下不动，用的比较多

这里写图片描述

2、代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height: 48px;
            background: #2459a2;
            color: white;
        }
        .fl{
            float: left;
        }

        .fr{
            float: right;
        }

        .pg-content .menu{
            position: absolute; /* 改成 absolute */
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;  /* 改成 absolute*/
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu fl">a</div>
        <div class="content fl">
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
            <p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p><p>dwqdqw</p>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

实践

1、布局图

这里写图片描述

2、逻辑代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height: 48px;
            background: #2459a2;
            color: white;
            line-height: 48px;
        }

        .pg-header .logo{
            width: 200px;
            background-color: cadetblue;
            text-align: center;
        }

        .pg-header .user{
            width: 160px;
            background-color: wheat;
        }

        .pg-header .user:hover{
            background-color: blue;
        }

        .pg-header .user .a img{
            height: 40px;
            width: 40px;
            border-radius: 50%;
            margin-top: 4px;
        }

        .pg-header .user .b{
            z-index: 20;
            position: absolute;
            top: 48px;
            right: 64px;
            background-color: red;
        }

         .pg-header .user .b a{
             display: block;
             width: 96px;
         }


        .fl{
            float: left;
        }

        .fr{
            float: right;
        }

        .pg-content .menu{
            position: absolute; /* 改成 absolute */
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;  /* 改成 absolute*/
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background: pink;
            overflow: auto;
            z-index: 9;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo fl">
            老男孩
        </div>
        <div class="user fr" style="position: relative;">
            <a class="a" href="#">
                <img style="" src="22.jpg">
            </a>
            <div class="b">
                <a>我的资料</a>
                <a>退出</a>
            </div>
        </div>
    </div>
    <div class="pg-content">
        <div class="menu fl">a</div>
        <div class="content fl"></div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

这边有一个知识补充：border-radius属性，这个是用来表示某个块级标签的圆弧度的，这个最多变成一个圆，不能再变小了，如果真的想变成全圆的，就是50%

border-radius: 50%;#全部圆的
border-radius: 50px;局部变成圆的。

hover的补充

之前我们说css样式 ：hover 表示当这个鼠标放在标签上时，此css样式才会生效，那我如果想，当我鼠标放在上面的时候，只为其中的某个标签设置此样式呐。那就用到另外一种方法：

.类名(或者其他标签名):hover  .类名{
          //样式
}

例子

.item{
    background-color: #dddddd;
}

.item:hover{    //只在item标签上生效
    color: red;
}

.item:hover .b{    //当鼠标放在上面的时候，为b加上此样式
    background-color: green;
}

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            background-color: #dddddd;
        }

        .item:hover{
            color: red;
        }

        .item:hover .b{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">123</div>
        <div class="b">456</div>
    </div>
</body>
</html>

所以我在上面的实践代码中加上这么一小段，就能实现我鼠标一放在用户名上，就能显示出我想要的模块：
这里写图片描述

这里写图片描述

Font-Awesome使用

以后我们需要的小图标不需要我们自己直接开发，fontawesome已经帮我做好了，只需要直接引用就行了。网址：http://fontawesome.dashgame.com/，或者在百度里面搜fontawsome就出来了。

1、具体使用方法

①先下载
这里写图片描述

②再导入
这里写图片描述
③使用某个样式
这里写图片描述

JavaScript函数

之前我们只是简单说了一下js的函数，但是我们没有细细的去了解js的函数，今天我们就来全面的了解一下Javascript的函数。

普通函数

普通函数定义

function func(args){
    //js代码
}
func(123);

普通函数是自己定义，然后调用的时候用函数名+传入实参，这个也属于主动执行。

匿名函数

匿名函数定义
说明：你要创建一个函数，这个函数没有名字，因为没有名字，所以在调用的时候找不到，所以我们只能通过我创建它的时候，我就让它当着参数可以传递给某个东西，它在内部直接去调用。

setInterval(function(){
    //js 代码
},5000);//因为没有名字，被称为匿名函数

自执行函数

自执行函数定义
说明：我定义了一个函数，并且当解说它的时候，函数的内部自动执行。

(function(arg){
            console.log(arg);
        })(1)

自动函数的功能相当于是普通函数的功能相结合，就是普通函数先定义 ，在通过函数名调用 => 定义函数+函数名 = 自执行函数，我们见到的插件几乎都是这种去执行的。就表示程序一旦到来就自动把内部执行了，所以自执行函数就是创建函数，并且自动执行。

小结

1、普通函数 function fun(){}，需要调用函数名去执行。
2、匿名函数，这个函数没有名字，只能通过在创建它的时候，就让它当着参数可以传递给某个东西，在她内部直接去调用，比如：setInterval(function(){ //js 代码 },5000)。
3、自执行函数，创建函数并且自动执行。( function func(arg){}(1) )

JavaScript序列化以及转义

我们在python里面也学过序列化，是用json模块，今天我们就来看看js的序列化和转义是怎么做的。

序列化

1、序列化

说明：将对象转换为字符串，用法：JSON.stringify()

>>>li = [11,22,33,44]
[11, 22, 33, 44]
>>>JSON.stringify(li);
"[11,22,33,44]"
2、反序列化

说明：将字符串转换为对象类型，用法：JSON.parse()

>>>s = "[11,22,33,44]"
"[11,22,33,44]"
>>>JSON.parse(s)
(4) [11, 22, 33, 44]

转义

所谓转义就是把你的中文转换为特殊格式。

1、encodeURI()

说明：URI中的转义字符

http = "https://www.sogou.com/web?query=李亚楠"

"https://www.sogou.com/web?query=李亚楠"
encodeURI(http);
"https://www.sogou.com/web?query=%E6%9D%8E%E4%BA%9A%E6%A5%A0"
2、decodeURI()

说明：URI中未转义的字符

http = "https://www.sogou.com/web?query=李亚楠"

"https://www.sogou.com/web?query=李亚楠"
encodeURI(http);
"https://www.sogou.com/web?query=%E6%9D%8E%E4%BA%9A%E6%A5%A0"
decodeURI(encodeURI(http))
"https://www.sogou.com/web?query=李亚楠"
3、encodeURIComponent()

说明：URI组件中的未转义字符

http = "https://www.sogou.com/web?query=李亚楠"

"https://www.sogou.com/web?query=李亚楠"
encodeURIComponent(http)
"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E6%9D%8E%E4%BA%9A%E6%A5%A0"
4、decodeURIComponent()

说明：URI组件中的未转义字符

http = "https://www.sogou.com/web?query=李亚楠"

"https://www.sogou.com/web?query=李亚楠"
encodeURIComponent(http)
"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E6%9D%8E%E4%BA%9A%E6%A5%A0"
decodeURIComponent(encodeURIComponent(http))
"https://www.sogou.com/web?query=李亚楠"
5、escape()

说明：对字符串转义

http = "https://www.sogou.com/web?query=李亚楠"

"https://www.sogou.com/web?query=李亚楠"
escape(http)
"https%3A//www.sogou.com/web%3Fquery%3D%u674E%u4E9A%u6960"
6、unescape()

说明：给转义字符串解码

http = "https://www.sogou.com/web?query=李亚楠"

"https://www.sogou.com/web?query=李亚楠"
escape(http)
"https%3A//www.sogou.com/web%3Fquery%3D%u674E%u4E9A%u6960"
unescape(escape(http))
"https://www.sogou.com/web?query=李亚楠"
7、URIError

说明：由URI的编码和解码方法抛出
问题：我们在登录的时候，用户名和密码为何保留一个月之久？
客户端登录->服务端 -> 服务端给你发一个字符串过来->拿到字符串->对字符串做处理，然后保存在本地中或者浏览器中(cookie)，这个处理就会用到escape()转义->再给服务器发送的时候unescape()再解码，所以cookie就是把数据经过转义(escape)后，保存在cookie中。

eval以及时间操作

JavaScript中的eval是python中的eval和exec的合集，既可以编译代码也可以获取返回值。还有就是一个时间设置，它是通过Date类来设置的。

eval

1、python中的eval和exec
eval(表达式)   例:eval("1+1")，有返回值
exec(执行代码)   例：exec("for i in i_list")，没有返回值
2、js中的eval

说明：eval是python中的eval和exec的合集，既可以编译代码也可以获取返回值

>>>eval("1+1")
2
>>>eval("var name='liyanan';if(name=='liyanan'){console.log(name);}")
liyanan
3、EvalError

说明：执行字符串中的JavaScript代码

Date类

.1、创建 时间对象
var  对象名  =  new Date()  //创建时间对象
例：
var d = new Date()
2、时间获取和时间设置

说明：时间获取是用 对象.get ， 时间设置 对象.set

>>>var d = new Date()
undefined
>>>d   //修改前的时间
Mon Jan 22 2018 11:09:23 GMT+0800 (中国标准时间)
>>>d.getMinutes()  //获取当前分的数字
9
>>>n = d.getMinutes() + 5  //修改分 数字
14
>>>d.setMinutes(n)   //设置当前的分数字
1516590863977
>>>d    //修改后的数字
Mon Jan 22 2018 11:14:23 GMT+0800 (中国标准时间)

JavaScript作用域

我们今天来聊聊JavaScript的作用域，聊这个之前先卡看看其他语言包括python在内的，作用域的范围是多少，规则是怎么样的。然后再看看JavaScript的作用域。这样就有对比性。

其他语言的作用域

1、其他语言

说明：以代码块作为作用域

public void Func(){
    if(1==1){
        string name = "java";
    }
    console.writeline(name);// 报错，因为是以代码块作为作用域的，所以报错。
}
Func();

正确的代码：

public void Func(){
    if(1==1){
        string name = "java";
        console.writeline(name); //正确，出了if的代码块就报错
    }
}
Func();
2、python的作用域

说明：以函数作为作用域

ef func():
    if 1==1:
        name = "alex"

func()
print(name)  #报错，因为是以函数作为作用域

正确的代码；

def func():
    if 1==1:
        name = "alex"
    print(name)

func()  #正确

JavaScript的作用域特性

1、以函数作为作用域(let除外)
function func(){
    if(1==1){
        var name = 'alex';
    }
    console.log(name);  //作用域是以函数作为作用域
}

func();
2、函数的作用域在函数未被调用之前，已经创建
function func(){
    if(1==1){
        var name = 'alex';
    }
    console.log(name);
} //浏览器在解释它的过程当中，作用域已经创建了
3、函数的作用域存在作用域链，并且也是在被调用之前创建

说明：一个作用域套另外一个作用域，我们称之为作用域链。
示例一：

name = "alex";
function  func(){
    var name = "sgaogao";
    function inner() {
        var name = "sbhong";
        console.log(name)
    }
    inner(); //调inner作用域
}
func();

输出：
sbhong

这里写图片描述
这张图的意思是：name->先找最近的’sbh’->没有就找’sgg’->再没有就‘alex’->再没有就报错了。
示例二：
说明：作用域链在创建之前被创建

name = "alex";
function  func(){
    var name = "sgaogao";
    function inner() {
        //var name = "sbhong";
        console.log(name)
    }
    return inner;
}

var ret = func();
ret(); //跟上面效果是一样的

#输出
sgaogao

注意：就是说在代码在执行之前作用域链就已经生效了，而不是执行的生效，所以在执行之前关系已经建立
示例三：

name = "alex";
function  func(){
    var name = "sgg";
    function inner() {
        console.log(name)
    }
    var name = "tony";
    return inner;
}

var ret = func();
ret();

这里写图片描述
逻辑说明：先在inner函数内部找 - >func 内部找，这个时候发现name的值变化了，找到最新的name值->再找不到，就找最外面的name。

4、函数内部的变量 声明提前

示例一
说明：没有声明变量的情况

function func(){
    console.log(name);
}

func()；//程序直接会报错

示例二
说明：只声明，没有赋值，JavaScript给你默认赋值一个特殊的值，叫undefined。

function func(){
    console.log(name);
    var name = "shuaigaogao";
}

func();

//输出
undefined

因为解释器在解释的过程中，先找到function 内部所有的局部变量，然后执行var name；所以在作用域里面声明了，但是没有赋值，所以这个值就默认为undefined。
这里写图片描述

JavaScript面向对象以及原型

今天来说JavaScript的面向对象以及原型，看看它和python有什么不同，这个Javascript的面向对象是怎么实现的。

JavaScript的面向对象

1、类的定义

说明：用this关键字，来定义一个Javascript的类，同时也是一个构造方法。

//定义类
function 函数名(形参){
           this.属性名= 形参名;
       }

//创建对象
var  对象名 = new 函数名(实参)

实例：

//定义
function Foo(name){
           this.name = name;
       }

//创建对象
var obj = new Foo("shuaigaogao");
obj.name; //获取此对象的属性

小结：
* this 代指对象(类似于 python 中的 self 关键字)
* 创建对象时，用 new + 函数()

原型

1、原型前戏

说明：正常的我们创建一个类，并且在类里面创建函数，然后通过对象调用。

function Foo(name){
   this.name = name;
   this.sayName = function(){
       console.log(this.name);
   }
}
//创建obj1
var obj1 = new Foo("zhangsan");
obj1.sayName()
//创建obj2
var obj2 = new Foo("zhangsan");
obj2.sayName()

这里写图片描述
这样就有一个问题，方法就不能共享了，js是在每个对象里面都保存了一份，所以这样很占内存的，所以怎么办呢？所以我们想要的是把它放到一个公有地方，要用的时候去拿一下，就可以了，不需要占内存。

2、原型

说明：对象调用方法时，自动去找它这个类，然后通过这个类的原型里面再去找对应的方法，如果有就执行一下。

function Foo(name){
   this.name = name;
}
//创建Foo的原型
Foo.prototype = {
   'sayName' : function(){
       console.log(this.name);
   }
};

var obj = new Foo("shuaigaogao");
obj.sayName(); //调原型中的sayName方法

这里写图片描述

小结

  • this 代指对象(类似于 python 中的 self 关键字)
  • 创建对象时，用 new + 函数()
  • 利用类的原型去执行公共方法

Dom选择器以及内容文本操作

之前我们学习了dom的选择器，学习了直接查找和间接查找，我们把每一个标签当作一个对象，然后对这个对象的属性进行处理。下面我们就来研究一下，dom选择器以及内容文本的操作。

Dom选择器

1、根据id直接查找
>>>obj = document.getElementById('i1');
2、间接查找

这个我们之前写了详细的博客，我们只做简单的介绍，就是根据标签的父标签，或者是字标签，或者是兄弟标签等，然后处理。

文本内容操作

操作内容如下：

<body>
    <div id="i1">
        老男孩
        <a>谷<span>歌</span></a>
    </div>
</body>
1、innerText

说明：仅仅只获取文本内容

bj=document.getElementById('i1')
<div id="i1">…</div>
obj.innerText;
"老男孩 谷歌"
obj.innerText='李亚楠';
"李亚楠"
obj
<div id="i1">李亚楠</div>"李亚楠"</div>

那如果我们赋值含有标签内容，效果如何呢？

>>>obj.innerText = "<a href='http://www.baidu.com'>百度一下</a>";
"<a href='http://www.baidu.com'>百度一下</a>"
>>>obj
<div id="i1"><a href='http://www.baidu.com'>百度一下</a></div>
2、innerHTML

说明：获取全部内容

obj.innerHTML;
"
        老男孩
        <a>谷<span>歌</span></a>
    "
obj.innerHTML='李亚楠'
"李亚楠"

那如果我们赋值含有标签内容，效果如何呢？

obj.innerHTML = "<a href='http://wwww.baidu.com'>百度一下</a>"
"<a href='http://wwww.baidu.com'>百度一下</a>"
obj
<div id="i1">…</div>

结果：识别html的标签。

标签值的设置(value)

1、input输入框

操作的html如下：

<body>
    <div id="i1">
        老男孩
        <a>谷<span>歌</span></a>
    </div>
    <input type="text" id="i2"/>
</body>

说明：获取input标签中的value的值。

obj=document.getElementById('i2')
<input type="text" id="i2">
obj.value
""
obj.value='liyanan'
"liyanan"
select选择框

操作的html如下：

<body>
    <select id="i3">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="nj">南京</option>
    </select>
</body>

说明：获取 select标签中选中的value值

>>>obj = document.getElementById("i3");
<select id="i3">…</select>
>>>obj.value;
"bj"
>>>obj.value = "sh";
"sh"
>>>obj.value = "nj";
"nj"
>>>obj.value;
"nj"

select特有的属性selecteIndex
说明：获取select的下标值

>>>obj.selectedIndex;
2
>>>obj.selectedIndex = 1;
1

这里写图片描述

3、textarea多行文本框

操作的代码如下：

<body>
    <textarea id="i4"></textarea>
</body>

说明：获取textare标签中的value的值。

>>>obj = document.getElementById("i4");
<textarea id="i4" style="margin: 0px; width: 266px; height: 133px;"></textarea>
>>>obj.value
""
>>>obj.value = "fgsqijfbqjwb";
"fgsqijfbqjwb"

输入框示例

1、需求说明

当我们点击输入框时，输入框中的 “请输入关键字” 自动为空，移开，又添加 “请输入关键字”
这里写图片描述

2、实现代码
<div style="width: 600px;margin: 0 auto;">
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
</div>

<script>
    function Focus(){
        var tag = document.getElementById("i1");
        var val = tag.value;
        if(val == "请输入关键字"){
            tag.value = "";
        }
    }

    function Blur(){
        var tag = document.getElementById("i1");
        var val = tag.value;
        if(val.length == 0){
            tag.value = "请输入关键字";
        }
    }
</script>

知识点：
onfocus：只要获取光标，就执行这个方法。
onblur：移除光标，执行这个方法。

Dom样式操作

我们之前只是对某个样式做整体的操作，比如说添加某个样式类名，删除某个样式类名，等等。

样式类

1、className

说明：获取和设置样式的类名

>>>obj = document.getElementById("i1");
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
>>>obj.className = "c1 c2";
"c1 c2"
>>>obj.className;
"c1 c2"
2、classList

说明：获取样式名，并且以列表方式返回

>>>obj.classList;
DOMTokenList(2) ["c1", "c2", value: "c1 c2"]
>>>obj.classList.add("c3");
undefined
>>>obj.classList;
DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
>>>obj.classList.remove("c2");
undefined
>>>obj.classList
DOMTokenList(2) ["c1", "c3", value: "c1 c3"]

以上这种只能修改或者添加某个样式类，但是不能修改具体的某个style。

修改具体的style样式

1、操作的html代码
<div style="width: 600px;margin: 0 auto;">
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
</div>
2、style样式操作
>>>obj = document.getElementById("i1");
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
>>>obj.style.color = "red";  //修改字体颜色
"red"
>>>obj.style.fontSize = "16px";  //修改字体大小
"16px"
>>>obj.style.backgroundColor = "pink"; //修改背景色
"pink"

所以，obj.style 表示 标签中的style属性，标签中的style的属性名都是以 - 隔开，但是在js中都是以驼峰标识显示。如图：
这里写图片描述

Dom属性以及创建标签

我们今天来研究一下，利用Dom来设置标签的属性和用dom去创建标签。

Dom属性

1、设置属性(setAttribute)

说明：设置某个标签的属性，用法：setAttribute(key,value)

>>>tag = document.getElementById("i1");
<input id="i1" type="text" value="请输入用户名">
>>>tag.setAttribute("name","sgg");  //设置name属性，值为sgg
undefined
>>>tag
<input id="i1" type="text" value="请输入用户名" name="sgg">  //已经成功设置name属性
2、删除属性(removeAttribute)

说明：删除某个标签的属性，用法：removeAttribute(key)

>>>tag
<input id="i1" type="text" value="请输入用户名" name="sgg">
>>>tag.removeAttribute("name"); //删除name属性
undefined
>>>tag
<input id="i1" type="text" value="请输入用户名" style="color: red;"> //已经成功删除name属性
3、标签所有属性(attributes)

说明：获取标签的所有的属性，用法：对象.attributes

>>>tag
<input id="i1" type="text" value="请输入用户名" style="color: red;">
>>>tag.attributes; //获取标签的所有属性
NamedNodeMap {0: id, 1: type, 2: value, 3: style, id: id, type: type, value: value, style: style, length: 4}
4、获取指定标签的某个属性(getAttribute)

说明：获取指定标签的某个属性，用法：getAttribute(key)

>>>tag
<input id="i1" type="text" value="请输入用户名" style="color: red;" name="sgg">
>>>tag.getAttribute("name"); //获取name标签的属性
"sgg"

小结：
1、setAttribute 设置标签属性
2、removeAttribute 删除标签属性
3、attributes 获取标签所有属性
4、getAttribute 获取标签属性的值

创建标签

1、字符串的形式添加

说明：把需要的添加的标签，直接添加成字符串

var add_tag = "<p><input type='text'/></p><hr />"; //创建一个标签
var tag = document.getElementById("i1");
tag.insertAdjacentHTML("beforeEnd",add_tag); //把标签添加到i1里面

完整的代码如下：

<body>
    <input type="button" onclick="addEle();" value="+">
    <div id="i1">
        <input type="text">
        <hr />
    </div>

    <script>
        function addEle(){
            var add_tag = "<p><input type='text'/></p><hr />";
            var tag = document.getElementById("i1");
            tag.insertAdjacentHTML("beforeEnd",add_tag);
        }
    </script>
</body>

注意：insertAdjacentHTML，第一个参数只能是’beforeBegin’、 ‘afterBegin’、 ‘beforeEnd’、 ‘afterEnd’，他们分别指的什么，如图：
这里写图片描述

2、对象的方式添加

说明：用dom的封装的函数，来创建标签

var add_tag = document.createElement("input"); //创建input标签
add_tag.setAttribute("type","text"); //设置属性
add_tag.style.fontSize = "16px";
add_tag.style.color = "red";
var p_tag = document.createElement("p");  //创建p标签
p_tag.appendChild(add_tag);
var hr_tag = document.createElement("hr");
var tag = document.getElementById("i1");
tag.appendChild(p_tag);  //添加p标签
tag.appendChild(hr_tag);

完整的代码如下：

<body>
    <input type="button" onclick="addEle();" value="+">
    <div id="i1">
        <input type="text">
        <hr />
    </div>

    <script>
        function addEle(){
            var add_tag = document.createElement("input");
            add_tag.setAttribute("type","text");
            add_tag.style.fontSize = "16px";
            add_tag.style.color = "red";
            var p_tag = document.createElement("p");
            p_tag.appendChild(add_tag);
            var hr_tag = document.createElement("hr");
            var tag = document.getElementById("i1");
            tag.appendChild(p_tag);
            tag.appendChild(hr_tag);

        }
    </script>
</body>

小结：
创建标签，并添加到HTML中：
* 以字符串的形式
* 以对象的形式

Dom提交表单以及其他

之前我们学习的是from提交表单，那个是html的提交表单方式，现在我们用dom来提交表单，还有一些其他的方式

dom提交表单

1、html提交表单

说明：form标签跟submit类型的input标签结合

<body>
    <form id="f1" action="http://www.baidu.com">
        <input type="text"/>
        <input type="submit" value="提交"/> //必须是input标签，type必须是submit类型
    </form>
</body>
2、dom提交表单

说明：用dom提交表单，任何标签都可以提交表单，比如说：a标签、div标签都可以。

document.getElementById("from_id").submit();

完整代码：

<body>
    <form id="f1" action="http://www.baidu.com"> //设置表单id
        <input type="text"/>
        <a onclick="submitForm();" style="cursor: pointer;">提交</a>  //注册事件
    </form>

    <script>
        function submitForm(){
            document.getElementById("f1").submit();  //通过dom提交表单
        }
    </script>
</body>

其他

1、输出框
console.log                 输出框
alert                       弹出框
confirm                     确认框

重点强调confirm，例如：

var v = confirm("删除？");
console.log(v);

#输出
确定：true
取消：false
2、url和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载

① location.href
说明：获取当前url

>>>location.href
"http://localhost:63342/51homework/day16/m10.html"

② location.href = “url”

>>>location.href = "http://www.baidu.com"
"http://www.baidu.com"
3、定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

① setInterval和clearInterval
说明：setInterval是定时器，一直执行。clearInterval清除setInterval定时器

var obj = setInterval(function(){
                console.log(1);
                clearInterval(obj);//执行一次就清除定时器
            },5000);

//clearInterval(obj);//一次都不执行

② setTimeout和clearTimeout
说明：setTimeout也是定时器，但是只执行一次

var obj = setTimeout(function(){
                console.log("timeout");
            },5000);  //表示过5s钟之后，才执行上面的函数

实际使用场景：当我删除一个内容的时候，删除信息过几秒钟消失，就跟QQ邮箱，删除信息一样，删除信息过几秒钟消失。

<body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="deleteEle();">

    <script>
        function deleteEle(){
            document.getElementById("status").innerText = "已删除";
            setTimeout(function(){
                document.getElementById("status").innerText = "";
            },5000);  //过5秒钟清空已删除提示
        }
    </script>
</body>

Dom事件操作

之前我们用dom操作都是在标签上做一个事件属性，这个都是dom0的做法，而且很low，今天我们用dom1来实现我们想要实现的东西，而且很简单。从而要做到行为、样式、结构相分离的页面。

Dom事件操作

1、示例一：Dom0的操作

说明：就是在标签上添加一个onclick属性，然后赋值一个函数

<body>
    <div id="i1" onclick="t1();">test</div> //采用在标签上使用onclick属性

    <script>
        function t1(){
            var myDiv = document.getElementById("i1");
            console.log(myDiv);
        }
    </script>
</body>

注意：这样使用，就无法是行为和结构相分离

2、示例一：Dom1的操作

说明：不在标签直接加属性，利用对象的方式，然后定义一个匿名函数的方式，形式调用。这样可以做到行为和结构相分离。

<body>
    <div id="i1" onclick="t1();">test</div>

    <script>
        var myDiv = document.getElementById("i1");
        myDiv.onclick = function(){  //对象的方式，然后定义匿名函数方式实现
            console.log(myDiv);
        }
    </script>
</body>

这样做的好处就是：js和html相分离，耦合度很低。

复杂实例

之前我们没有看出来，用对象的方式有啥好处，而且这两个代码量差不多，下面我们就再举个例子来看看，有啥好处。

1、示例二：Dom0操作

说明：nomouseover：表示鼠标移动到某个标签事件。onmouseout：表示鼠标离开某个标签后的事件。

<body>
    <table border="1" width="300px;">
        <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr>  //定义nomouseover属性和onmouseout属性
        <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
    </table>

    <script>
        function t1(n){
            var myTrs = document.getElementsByTagName("tr")[n];
            myTrs.style.backgroundColor = "red";
        }

        function t2(n){
            var myTrs = document.getElementsByTagName("tr")[n];
            myTrs.style.backgroundColor = "";
        }
    </script>
</body>

你看这样，如果我有1000行，10000行怎么办呐，我是不是应该每一个都添加一个事件属性，然后每一个都创建对应的函数呐。这样的话，就太low了。下面我们来看看，dom1是怎么处理的。

2、示例二：Dom1处理

说明：把nomouseover和nomouseout当做对象。

<body>
    <table border="1" width="300px;">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>

    <script>
        var myTrs = document.getElementsByTagName("tr");
        for(var i=0;i<myTrs.length;i++){
            myTrs[i].onmouseover = function(){
                this.style.backgroundColor = "red"; //这边的this代指的是myTrs[i]
            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>

哇哦，这种方式简直逆天了，简单多了，当然这边注意 this关键字作用： 谁调用这个函数，这个this就指向谁。

3、常用事件
onclick   当用户点击某个对象时调用的时间句柄
onfocus  元素获得某个焦点
onblur    元素失去焦点
onmouseover 鼠标移到某元素上
onmouseout  速表从某元素移开

目前为止我们最常用的就是这几个，其他的几个下面再看。
这里写图片描述

绑定事件方式总结

1、直接绑定
<标签  onclick="函数名()"></标签>

<script>
      function 函数名(){}
</script>
2、先获取对象名绑定
document.getElementById("xx").onclick = function(){}
3、this关键字

说明：代指当前触发事件的标签
实例一：

<body>
    <div onclick="t1(this);">test</div>  //放在这边代指当前div标签

    <script>
        function t1(self){
            //this  放在这里代指全局变量 window
            var myDiv = self; //self代指当前点击标签
            self.style.color = "red";
        }
    </script>
</body>

示例二：

<body>
    <div id="i1" onclick="t1();">test</div>
    <script>
        var myDiv = document.getElementById("i1");
        myDiv.onclick = function(){
            this.style.color = "red";  //thiis 代指当前点击的标签
        }
    </script>
</body>

注意了：这边不能用 myDiv.style.color = “red”;因为函数内部的作用域无法达到，在解释的时候就已经生成，所以只能用this代指当前点击的标签。

另外一种绑定方式

需求：如果一个div标签上已经存在了一个onclick事件，但是我现在想在此div上再添加一个onclick事件，多输出内容，用什么方法呐？

1、传统方式
<body>
    <div id="i1" onclick="t1();">test</div>

    <script>
        var myDiv = document.getElementById("i1");
        myDiv.onclick = function(){
            this.style.color = "red";
        }
        myDiv.onclick = function(){  //如果这样写的话，那上面的功能就会被替换调了，因为变量重新赋值了
            console.log("shuaigaogao")
        }
    </script>
</body>

很显然是不行的，所以我们不能用这种方式。所以我们用w3c给我们提供的函数 addEventListener()

2、另外一种绑定方式

说明：用w3c 提供的函数 addEventListener() 来解决这个问题。addEventListener(事件名，匿名函数，事件模型)

<body>
    <div id="i1">test</div>

    <script>
        var myDiv = document.getElementById("i1");
        myDiv.addEventListener("click",function(){console.log("aaa")},false);
        myDiv.addEventListener("click",function(){console.log("bbb")},false);
    </script>
</body>

#输出
aaa
bbb

我们来说下这个事件模型吧，事件模型，分为true 和 false，分别为冒泡模型和捕捉模型。
这里写图片描述
这里写图片描述

JavaScript词法分析解析

一、JavaScript词法分析解析

1、词法解释顺序

这里写图片描述

2、词法分析实例
function t1(age){
    console.log(age);
    var age = 27;
    console.log(age);
    function age(){}
    console.log(age);
}
t1(3);

//输出
ƒ age(){}
27
27

很显然，我们是怎么得出上面的结果的，我们先来分析一下：
这里写图片描述
所以形式参数age=3被替换掉了

Ali--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用DOM API合集
weixin_34185364的博客
03-07 169
2019独角兽企业重金招聘Python工程师标准>>> ...
jsdom自动补全环境
小龙在线
12-27 2211
jsdom自动补全环境。
dom补充
yanbuxu的博客
05-13 1121
DOM-下 一、操作 属性操作 … 样式操作 设置 什么时候会通过js设置样式？ 默认样式都在css中写了 必然是和用户产生和交互的时候 什么时候会和用户产生交互？ 至少至少是在项目写完了，上线之后，意味着css也写完了 为了保证js（用户控制）的样式能够生效，至少得让js设置的样式，权重高一些 至少，得是内联样式 综上所述，在js中设置的样式，都是行内样式！ 方式 可见的内置属性（html的属性）：style 注意 // 1.不允许出现中划线，改成小驼峰式 obox.style.fontSize = “1
javascript-dom补充
游啊游游啊
05-28 134
Dom补充查看滚动条的滚动位置查看视口的尺寸查看元素的几何尺寸查看元素的尺寸在window上的滚动条滚动 查看滚动条的滚动位置 window.pageXOffset/pageYOffset：返回滚动像素，IE8及IE8以下不兼容 document .body/documentElement . scrollLeft/scrollTop:ie8及以下，兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值，不同版本方法不同 封装兼容性方法，求滚动轮滚动离getScrollOffset() 查看视口
JavaScript——DOM补充
m0_59985125的博客
06-21 698
document object model（文档对象模型）DOM是W3C（万维网联盟）的标准，是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。对网页进行增删改查的操作。HTML DOM 模型被结构化为对象树：通过这个对象模型，JavaScript 可以完成一下工作：DOM API：HTML DO
树懒_day04.1_javascript_DOM笔记
07-22
移动开发小白树懒，正在迈向远大的自己而现在努力的打下基础.JavaScript的DOM的高级部分.
DAY04_BOM_DOM（上）.md
05-22
DAY04_BOM_DOM（上）.md
DAY04_BOM和DOM（上）.md
11-03
DAY04_BOM和DOM（上）.md
树懒_day05.1_xml_DOM4J笔记
07-23
移动开发的小白树懒正在努力的学习移动开发中的web体系中的xml解析，每天提高自己...
JS.rar_day3lb_javascript
09-23
Javascript para la realizacion de un programa de futdraft
DOM补充及节点
qq_38256266的博客
06-21 281
DOM补充及节点一、DOM补充二、节点三、获取非行内样式四、排他思想 一、DOM补充 1、获取页面滚动距离 scrollTop //兼容写法 var oTop = document.body.scrollTop ||document.documentElement.scrollTop; //结合onscroll 使用 window.onscroll = function(){ var oTop = document.body.scrollTop ||document.documentElem
2021-11-06 dom补充
boxiaoking的博客
11-12 899
H5自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute('属性')获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。 设置H5自定义属性 H5规定自定义属性data-开头作为属性名并且赋值，比如<div data-index='1'></div> 获取H5自定义属性 1、兼容性获取element.getAttribute('data-index') ...
DOM补充
ahty的专栏
08-02 4108
 一、节点的创建，插入与克隆 1. createElement("p")   创建一个节点（会自动补齐标签） 2. appendChild(p)       在元素末尾插入节点p 3. insertBefore(btn,p)  在元素内的p元素之前插入btn元素 4. cloneNode            克隆节点 如： var div=docu
dom之高级补充（offset系列，scroll,client）
isxixi的博客
12-07 686
offset系列 offsetWidth和offsetHeight 用来得到对象的大小 offsetHeight和style.height的区别demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取 style.height是字符串（而且带单位），offsetHeight是数值 demo.style.height可以设置行内样式，offsetHe
removeAttribute() 方法删除指定的属性
热门推荐
wys1996625的专栏
05-18 1万+
此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。 参阅 removeAttributeNode() 方法
JS逆向之浏览器补环境(一)
Wxc的Blog
03-16 1万+
JS逆向之浏览器补环境(一) 简介 今天分享是是浏览器环境检测以及node js补环境 我们点击检测设备信息看发出的请求，可以看到是sign和data 这个data看起来像base64,我们试一下，发现不是 分析加密位置 可以看到经过混淆了 我们选中看一下 那我们接下来就知道了，要逆向的两个参数变量 _0x392f2d _0xd9e63f 我们直接把整个文件拷贝到webstrom里，看一下这两个变量在哪里定义的，可以看到在这 由于我们只需要这两个变量，所以下面的代码可以删除了，变成这样
python安装jsdom 环境变量_Python环境安装
weixin_39751453的博客
11-22 799
Python目前已支持所有主流操作系统，在Linux,Unix,Mac系统上自带Python环境，在Windows系统上需要安装一下，超简单Windows安装打开官网 https://www.python.org/downloads/windows/ 下载中心下载安装完成。 配置环境变量我的Python刚才装到C:甥敳獲alexAppDataLocalProgramsPythonPython37 ...
标签移除属性--removeAttribute与removeAttributeNode方法
momDIY的博客
03-07 6782
removeAttribute 移除节点指定名称的属性。示例如下 document.getElementById('riskTypePie').removeAttribute("style"); removeAttributeNode 注：此方法不兼容IE。 使用方法： 获取要删除属性的元素 获取该元素要删除的属性 &lt;元素&gt;.removeAttributeNo...
DAY_OF_WEEK,
最新发布
03-28
DAY_OF_WEEK是一个常见的日期操作，用于获取给定日期的星期几。在不同的编程语言和日期库中，DAY_OF_WEEK的实现方式可能会有所不同，但基本原理是一致的。 在大多数编程语言中，日期通常以特定的格式表示，例如年、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值