JavaScript（三收官篇）操作BOM对象、操作DOM对象、操作表单（验证）、jQuery数据库

七、操作BOM对象（重点）

浏览器介绍

JavaScript 和浏览器关系？

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

BOM : 浏览器对象模型

IE 6~11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window （重要）

window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerWidth
919
// 大家可以调整浏览器窗口试试...

Navigator （不建议使用）

Navigator ,封装了浏览器的信息

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

大多数时候，我们不会使用 navigator 对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location （重要）

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.csdn.net/weixin_45677145/')

document （内容： DOM）

document 代表当前的页面， HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='亚瑟'
"小鲁班"

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

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

获取 cookie

document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

劫持 cookie 原理

www.taobao.com

<script src="aa.js"></script>
<!--恶意人员；获取你的cookie上传到他的服务器 -->

服务器端可以设置 cookie：httpOnly

history （不建议使用）

history 代表浏览器的历史记录

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

八、操作DOM对象（重点）

核心

浏览器网页就是一个Dom 树形结构！

更新：更新Dom节点，相当于更新了改dom节点表示的html内容
遍历dom节点：得到改Dom节点下的子节点
删除：删除一个Dom节点，子节点也会删除
添加：添加一个新的节点，相当于动态的增加了一个html节点

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

获得dom节点

//对应 css 选择器	
var h1 = document.getElementsByTagName('h1');//返回一组dom节点
var p1 = document.getElementById('p1');//定位一个唯一的dom节点
var p2 = document.getElementsByClassName('p2');//返回一组dom节点
var father = document.getElementById('father');

var childrens = father.children[index]; //获取父节点下的所有子节点
// father.firstElementChild   第一个子节点
// father.lastElementChild    最后一个子节点

这是原生代码，之后我们尽量都是用jQuery() ;

更新节点

<div id="id1">

</div>

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

操作文本

id1.innerText='456' 修改文本的值
id1.innerHTML='<strong>123</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)
    
    // 删除是一个动态的过程；
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

插入节点

我们获得了某个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>

效果：

在这里插入图片描述

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

<script>

    var js = document.getElementById('js'); //已经存在的节点
    var list = document.getElementById('list');
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');// 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,man';
    // 创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    
    // 可以创建一个Style标签
    var myStyle= document.createElement('style'); //创建了一个空style标签 
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle)

</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

九、操作表单（验证）

表单是什么 form DOM 树

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

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>

    <!--多选框的值，就是定义好的value -->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl"> 女
    </p>

</form>

<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'


    // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中~
    girl_radio.checked = true; //赋值

</script>

提交表单。md5 加密密码，表单优化

<!--
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数， true， false
将这个结果返回给表单，使用 onsubmit 接收！
οnsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">

    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
</form>


<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;
    }
</script>

十、jQuery

什么是jQuery?

获取jQuery

在这里插入图片描述
jquery-3.4.1.js提取链接
提取码：7ah2
公式：$(选择器).事件(事件函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>

<a href="" id="test-jquery">点我</a>

<script>

    //选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })

</script>

</body>
</html>

选择器

    //原生js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery  css 中的选择器它全部都能用！
    $('p').click(); //标签选择器
    $('#id1').click(); //id选择器
    $('.class1').click() //class选择器

文档工具站：传送门

事件

鼠标事件，键盘事件，其他事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.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>
    //当网页元素加载完毕之后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    });
</script>


</body>
</html>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值

css的操作

 $('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质 display ： none；

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

未来ajax（）；

$('#from').ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

小技巧

1、如果巩固JS （看jQuery 源码, 看游戏源码！）

2、巩固HTML。CSS （扒网站，全部down下来，然后对应修改看效果~）

Layer 弹窗组件

Element-ui

下篇见ヾ(￣▽￣)Bye_Bye