渚漪Day08——web前端入门【JavaScript03】

5、内部对象

Date 日期的对象

Json 对象

  • 对象都用{}
  • 数组都用[]
  • 所有键值对 都是用 key:value

JSON.stringify()讲对象转化为字符串

JSON.parse()解析字符串变为对象

6、面向对象编程

6.1 什么是面向对象

JavaScript，Java，c# 面向对象

JavaScript有些区别

  • 类：模板

  • 对象：具体实例

在JavaScript这个需要换一下思维方式

原型：__ proto __

ES6有class，和java一样 本质是原型

7、操作BOM对象（重点）

浏览器的介绍

JavaScript和浏览器的关系？

JavaScript诞生就是为了让他在浏览器中运行

BOM：浏览器对象模型

  • IE6~11
  • Chrome
  • Safari
  • Firefox
  • Opera

三方

  • QQ浏览器
  • 360浏览器

可以安装内核

window

window代表浏览器窗口

Navigator

Navigator 封装了浏览器的信息

screen

代表屏幕尺寸

location

location代表当前页面的URL信息

history

history.back()//后退

history.forward()//前进

8、操作DOM（重点）

DOM：文档对象模型

核心

  • 更新：更新Dom节点
  • 变量Dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个Dom节点
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

</div>

<script>
    //对应选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var childs = father.children;//获取父节点的所有子节点
</script>

更新节点

var p1 = document.getElementById('p1');
p1.innerText="123";
p1.innerHTML='<strong>123</strong>';
p1.style.color='yellow';

删除节点

先获取父节点，再删除自己

var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)

插入节点

var list = document.getElementById('p1');

list.appendChild(js)

insertBefore(newNode,TargetNode)

新建节点

var NP = document.CreateElement('p');
NP.id = 'NP1';//或者   NP.setAttribute('id','NP1');
NP.innerText="123";
list.appendChild(NP)

9、操作表单（验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <form action="https://www.baidu.com/" method="post" id="user" onsubmit="return aaa()">
        <p>
            <span>用户名：</span><input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码：</span><input type="password" id="password">
        </p>
        <input type="hidden" id="md5-password" name="password">

        <button type="submit">提交</button>
    </form>

    <script>
        function aaa() {
            alert(1);
            var username = document.getElementById('username');
            var pwd = document.getElementById('password');
            var mpwd = document.getElementById('md5-password');
            mpwd.value=md5(pwd.value);
            return true;
        }
    </script>
</body>
</html>
posted @ 2020-04-16 10:32  渚漪  阅读(156)  评论(0)    收藏  举报