JavaScript 关于对象与表单剩余的部分

标准对象

用typeof可以判断一个对象的类型

typeof 123;
"number"
typeof '123';
"string"
typeof true;
"boolean"
typeof NaN;
"number"
typeof [];
"object"
typeof {};
"object"
typeof Math.abs;
"function"
typeof undefined
"undefined"

五、内部对象

5.1、Date

      let now = new Date();
      now.getFullYear();
      now.getMonth();//0~11
      now.getDate();
      now.getDay();
      now.getHours();
      now.getMinutes();
      now.getSeconds();

      now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00
      console.log(new Date(1639613343699));//时间戳转化为时间

转换

      let now = new Date(1639613343699);
      now.toLocaleString();//"2021/12/16 上午8:09:03"
      now.toDateString()//"Thu Dec 16 2021"

5.2、JSON

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：number，String…

对象·都用 {}

数组都用 []

所有的键值对 都是用 key:value

JSON 字符串和 JS 对象的转换

var user = {
    name: 'liusx',
    age: 3,
    sex: '男'
}
//对象转换json字符串:{"name":"liusx","age":3,"sex":"男"}
var jsonuUer = JSON.stringify(user);
console.log(jsonuUer);

//json  字符串转换为对象，参数为json字符串
var obj = JSON.parse('{"name":"liusx","age":3,"sex":"男"}');
console.log(obj);

5.3.Ajax

原生的Javascript写法，xhr异步请求

jQuery封装好的方法

axios请求

6、面向对象编程

原型

Javascript、Java、C#…面向对象：Javascript有些区别

• 类：模板
• 对象：具体实例

在Javascript这个需要大家换一下思维

原型：

//面向对象
var Student = {
    name: 'liusx',
    age: 3,
    run:function () {
        console.log(this.name+"run.....")
    }
}

var xiaoming = {
    name: '小明'
}
//小明的原型 是Student
xiaoming.__proto__ = Student;
xiaoming.run();

var Bird = {
    fly: function () {
        console.log(this.name + "fly......")
    }
}
//小明的原型 是Bird
xiaoming.__proto__ = Bird;

如果想给对象增加方法，就要指向它的

//class继承
function Student(name) {
    this.name = name;
}
//给student新增一个方法
Student.prototype.hello = function () {
    alert('hello');
}

class继承：class关键字，ES6引入 

1、定义一个类，属性，方法

//ES6 之后======
class Student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}

var xiaoming = new Student('小明');
var xiaoming = new Student('小红');
xiaoming.hello();

2、继承

//ES6 之后======
class Student{
    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello');
    }
}

class XiaoStudent extends Student {
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小学生');
    }
}

var xiaoming = new Student('小明');
xiaoming.hello();
var xiaohong = new XiaoStudent('小红',1);
xiaohong.myGrade();

原型链 

7、操作BOM对象（重点）

浏览器介绍

Javascript 和 浏览器关系？

Javascript 诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型（内核）

• IE 6~11
• Chrome
• Safari
• FireFox

第三方：

• QQ浏览器
• 360浏览器

window（重要）：代表浏览器窗口 

window.alert(1)
undefined
window.innerHeight
722
window.innerWidth
1148
window.outerHeight
824
window.outerWidth
1536
// 大家可以调整浏览器窗口试试

Navigator：封装了浏览器信息 

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用：Navigator 对象，因为会被认为修改！不建议使用这些属性判断和编写代码 

screen：代表屏幕尺寸 

screen.width
1536
screen.height
864

location（重要）：代表当前页面的URL信息 

host:"www.baidu.com"
href:"https://www.baidu.com/"
proticlo:"https"
reload:f reload()// 刷新网页
// 设置新的地址
location.assign('https://liusuixing.gitee.io/')

document（内容：DOM）：代表当前页面，HTML DOM文档树 

document.title
"百度一下，你就知道"
document.title = 'liusx'
'liusx

获取具体的文档数节点：

<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaScript</dt>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

获取：cookie

document.cookie
"UM_distinctid=170f629069832c-0dda87d408271d-b383f66-144000-170f629069986b"

服务器端可以设置cookie：httpOnly 

history（不建议使用）：代表浏览器的历史记录

histor.forward();//前进
history.back();//后退

 8、操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器页面就是一个DOM 树形结构

• 更新：更新Dom节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

要操作一个Dom节点，就必须要获得这个Dom节点

获得Dom节点

<div id="father">
    <h1>标题一</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 childrens = father.children;
    //father.firstChild;
    //father.lastChild;
</script>

这些都是原生代码，之后我们尽量都使用jQuery

更新节点

<div id="id1">

</div>
<script>
    var id1 = document.getElementById('id1');
    id1.innerText='456';//修改文本的值
    id1.innerHTML='<strong>456</strong>';//可以解析HTML文本标签
</script>

操作文本：

• id1.innerText='456'：修改文本的值
• id1.innerHTML='<strong>456</strong>'：可以解析HTML文本标签

操作CSS：

id1.style.color = 'yellow';// 属性使用 字符串 包裹
id1.style.fontSize = '20px';// - 转 驼峰命名问题
id1.style.padding = '2em'

 删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己 

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById("p1")
    var father = p1.parentElement;
    father.removeChild(self);
    
    //删除是一个动态的过程，先删除0，在删除2会找不到2节点
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    按照逻辑上面的是对的，但是因为删除是一个动态的过程，所以里面的数组下标是变化的
</script>

插入节点 

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个DOM节点已经存在元素了，就不能这么干了，会产生覆盖。

所以出现了追加操作：]

<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    //追加到后面
    list.appendChild(js);
</script>

-----
追加后效果为：
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
    <p id="js">Javascript</p>
</div>

 上面的操作会把在外面的id = “js”的标签移动到list标签里面。

创建一个新的标签，实现插入 

<body>

<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');

    //追加到后面
    //list.appendChild(js);

    //通过JS 创建一个新的节点 这里是创建一个p标签
    let newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'Hello,Sam';
    list.appendChild(newP);

    //创建一个标签节点
    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');

    //给body标签创建样式1
    let body = document.getElementsByTagName('body')[0];
    body.setAttribute('style', 'background-color: yellow;');

    //给body标签创建样式2
    //let myStyle = document.createElement('style');//创建一个style标签
    //myStyle.setAttribute('tyle', 'text/css');
    //myStyle.innerHTML = 'body{background-color: chartreuse;}';//设置样式
    //document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
</body>
----
追加后效果为：
<body style="background-color: yellow;">
    <p id="js">Javascript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
        <p id="newP">Hello,Sam</p>
        <script type="text/javascript"></script>
    </div>
</body>

<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');
    //要包含的节点. insertBefore(newNode,targetNode)
    list.insertBefore(js, ee);
</script>
----
追加后效果为：
<body>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="js">Javascript</p><p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
</body>

9、操作表单（验证） 

表单：form DOM树 

• 文本框：text
• 下拉框：select
• 单选框：radio
• 多选框：checkbox
• 隐藏域：hidden
• 密码框：password
• …

表单的目的：提交信息 

获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
    <script>
        var input_text = document.getElementById('username');
        //得到输入框的值：input_text.value
        //修改输入框的值：input_text.value = yangyang
        
        var boy_radio = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');
        //对于单选框、多选框等等固定的值
        boy_radio.value;//这样只能获得它的值，无论它有没有被选中，所以由检查被选中之后在取值
        //所以要进行
        boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
        girl_radio.checked = true;//赋值
    </script>
</form>
</body>
</html>

 提交表单：MD5加密，表单优化

一般MD5加密： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>

    <!--绑定事件 onlick 被点击-->
    <button type="submit" onclick="sub()">提交</button>
    <script>
        function sub() {
            let username = document.getElementById('username');
            let password = document.getElementById('password');
            console.log(username);console.log(password);

            // MD5 算法    方案一：
            password.value = md5(password.value);
            console.log(password.value);
        }
    </script>
</form>
</body>
</html>

隐藏密码框+MD5加密： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    表单绑定提交事件
    onsubmit = 绑定一个提交检查的函数，true，false
    将这个结果返回给表单，使用 onsubmit 接收！
    οnsubmit="return sub();"
-->
<form action="#" method="post" onsubmit="return sub();">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
        <input type="hidden" id="md5-password" name="password">
    </p>
    <button type="submit" >提交</button>
    <script>
        function sub() {
            let username = document.getElementById('username');
            let password = document.getElementById('password');
            let md5password = document.getElementById('md5-password');

            //MD5 算法：隐藏表单域提交表单密码
            md5password.value = md5(password.value);

            //可以校验判断表单内容，true：通过提交，false：阻止提交
            return true;
        }
    </script>
</form>
</body>
</html>

10、jQuery 

jQuery库：里面封装大量JavaScript方法.

**jQuery API：**http://jquery.cuishifeng.cn/

初始jQuery

$(selector).action();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <a href="" id="test-jquery">点我</a>
<script>
    $('#test-jquery').click(function () {
        alert('hello,jQuery')
    })
</script>
</body>
</html>

选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<script>
    //原生js，选择器少，麻烦且不好记
    //id、标签、类
    document.getElementById();
    document.getElementsByTagName();
    document.getElementsByClassName();

    //jQuery 就是 css中的选择器
    $('#id').click();//id选择器
    $('div').click();//标签选择
    $('.className').click();//class选择器
</script>
</body>
</html>

操作DOM 

• 节点文本操作
• css操作
• 元素的显示和隐藏：本质 display=none;
• …等等更多查看API

  $("#test-ul li[name='python']").text();这个是先选中ul的id 在绑定ul下面的li中[name='python']的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
    <li id="js" class="js">Javascript</li>
    <li name="python">Python</li>
    <li id="sh">show_hide</li>
</ul>

<script>
    $("#test-ul li[name='python']").text();//获得值与下面html()作用一样
    $("#test-ul li[name='python']").text('Python_new');
    $('#test-ul').html();//获得值
    $('test-ul').html('<strong>html_new</strong>');//设置值

    $('#js').css('color':'red');//设置样式

    $('#sh').show();//显示
    $('#sh').hide();//隐藏
    
    $(window).width();
    $(window).height();
    $(document).width();
    $(document).height();
</script>
</body>
</html>

具体分析上面的：

  $('#js').css('color':'red');//设置样式

用jquery操作css，用一个键值对形式，如果要改变多个，可以设置多个键值对 ,之间可以用逗号隔开。
 元素的显示和隐藏: 本质 display ：none

$('#sh').show();//显示

$('#sh').hide();//隐藏

下面是使用jquery写一个鼠标移动事件的程序

小tips：写的时候最好$()里面搞选择器的时候用单引号，包含某个东西的时候用双引号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当前网页元素加载完毕之后，响应事件
    //之前的操作
    //$(document).ready(function (){
    //
    //})
    //因为大量应用，所以简化：
    //function里面参数随意命名，一般用e，$符号里面最好用单引号，要是有其他的在单引号外面用双引号
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x'+e.pageX + 'y'+e.pageY);
        })
    });
</script>

</body>
</html>