JavaScript（3）

6、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

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

BOM:浏览器对象模型

浏览器内核：

IE 6~11
Chrome
SAfari
FireFox

第三方浏览器（使用上述内核）：

QQ浏览器
360浏览器

window （重要）

window代表了浏览器窗口

 window.alert()//弹窗
 window.innerHeight//获得浏览器内框的高度
 window.innerWidth
 window.outerHeight//获得浏览器外框的高度
 window.outerWidth
 //调整浏览器窗口上述结果会变

Navigator

Navigator,封装了浏览器的信息

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

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

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

screen

代表屏幕尺寸,单位是像素，是一个只读变量

其实是浏览器分辨率，要比屏幕分辨率低

 screen.width
 1536
 screen.height
 864

location （重要）

代表当前页面的URL信息

 host: "www.bilibili.com"
 hostname: "www.bilibili.com"
 href: "https://www.bilibili.com/"
 protocol: "https:"
 reload: ƒ reload()
 location.reload()//刷新网页
 //设置新的网址（页面跳转！）
 location.assign('https://www.baidu.com/')

document (内容->DOM)

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

 document.title//获取标题
 "百度一下，你就知道"
 document.title = "哈哈哈"//修改！
 "哈哈哈"

获取具体的文档树节点

<dl id = "app">
     <dt>java</dt>
     <dt>javaSE</dt>
     <dt>javaEE</dt>
 </dl>
 
 <script>
     var dl = document.getElementById('app')//获取上述列表
 </script>

获取cookie

 document.cookie
 "route=1fb8a952e95b44bc50eb8319f785b770; org.springframework.web.servlet.i18n.CookieLocaleResolver.LOCALE=zh_CN; _ga=GA1.3.588156644.1585707123"

劫持cookie原理

页面内置一段js代码，用于获取你的cookie

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

比如淘宝和天猫，你在淘宝上登陆后，在天猫上也会自动帮你登录！

在服务器端设置cookie：httpOnly 就不会窃取了

history

不建议使用了，现在使用Ajax

history代表了浏览器的历史记录

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

7、操作DOM对象（重点）

这一块都是底层代码，比较繁琐，所以后面才会引入jQuery！

核心

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

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个DOM节点

要添加一个DOM节点，就必须先获得这个DOM节点

获得DOM节点

整个页面就是一个DOM树，所有标签就叫做DOM节点

<body>
    <div id = "father">
        <h1>标题一</h1>
        <p id = "p1">p1</p>
        <p class = "p2">p2</p>
    </div>
    
    <script>
    //对应css选择器
        var h1 = document.getElementsByTagName('h1');//获取标签为h1的DOM节点
        var p1 = document.getElementById('p1');//id选择器
        var p2 = document.getElementByClassName('p2');//类选择器
        var father = document.getElementById('father');
        
        var children = father.children;//获取父节点下的所有子节点
        //father.firstChild
        //father.lastChild
    </script>
</body>

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

更新节点

<div id = "id1">

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

操作文本

id1.innerText = '456':修改文本的值，把所有值变成了这个

id1.innerHTML = '<strong>123</strong>':加标签

操作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]) 
</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);//把js代表的p标签追加到list的子节点中（剪切、复制）
</script>

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

<script>
	//通过js创建一个新的节点
    var newp = document.creatElement('p');//创建一个p标签
    newp.id = 'newp';
    newp.innerText = 'hello';//给标签增加id和内容
    //设置标签的属性（万能写法！）
    var myScript = document.creatElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以创建一个style标签
    var myStyle = document.creatElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:red}';//s设置标签内容
    //要把样式加到head标签去,注意：按照标签名获取节点是一个数组！！！要加下表！
    document.getElementByTagName('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)//把js放到ee后面

8、操作表单（验证）

获得要提交的信息

<form action = "" method = "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 = "woman" 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;//查看返回的结果，Boolean类型，如果为true，则被选择
    girl_radio.checked = true;//修改用户的选择结果
    
</script>

获取表单信息除了按照id，还有表单的独特方法：

配合forms和name属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类，这个类的md5()方法用于对密码加密-->
    <script src = "md5.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接受！
格式：onsubmit = "return function()"
-->
<form action = "https://www.baidu.com/" method = "post" onsubmit="return test()">
    <p><!--表单没有name属性，抓包抓不到！-->
        <span>用户名：</span><input type = "text" id = "username" name = "username">
    </p>
    <p>
        <span>密码：</span><input type = "password" id = "input-password">
    </p>
    <!--当使用MD5进行加密时，会瞬间改变输入密码的长度，所以我们设置一个隐藏域，不影响用户的输入！-->
    <input type = "hidden" id = "md5-password" name = "password">
    <p>
        <input type = "submit" value = "提交">
    </p>
    <!--按钮级别的表单拦截onclick，建议使用表单级别的onsubmit-->
<!--    <button type="button" onclick=""></button>-->
</form>
<script>
    let test = function () {
        //获取三个节点
        let userName = document.getElementById("username");
        let password = document.getElementById("input-password");
        let md5pass = document.getElementById("md5-password");
        // 将输入的密码通过MD5加密后，放到隐藏域
        md5pass.value = hex_md5(password.value);
        //可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }
</script>
</body>
</html>

9、jQuery

初始jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用jQueryCDN在线引入-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
    <!--下载js文件引入-->
    <script src = "jquery-3.4.1.js"></script>

</head>
<body>
<a href="" id = "test-jQuery">点我</a>

<!--jQuery公式！：$(selector).action()  注意：选择器要用引号括起来-->
<script>
<!--    选择器就是css的选择器-->
    $('#test-jQuery').click(function () {
            alert('hello');
    })
</script>
</body>
</html>

选择器！

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

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

关于jQuery选择器的其他内容，查文档！文档要用起来！啥都有还方便！

http://jquery.cuishifeng.cn/index.html

jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获得鼠标当前的坐标-->
mouse:<span id = "mouseMove"></span>
<div id = "divMove">
    在这里移动鼠标试试！
</div>


<script>
    //当网页元素加载完毕之后，响应事件，这里把公式简化了！记住就行！
    $(function () {
        //想要获取鼠标移动事件
        $('#divMove').mousemove(function (e) {
            //把获取的鼠标位置输出到span标签
            $('#mouseMove').text('x:'+e.pageX+" "+'y'+e.pageY);
        })
    })
</script>
</body>
</html>

同理，更多事件查看文档！

jQuery操作DOM元素

要对应源码看，注意理解

节点文本操作

$('#test-ul li[name =python]').text();
//获得id为test-ul的ul列表下的name为python的li的值
$('#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");
})});

posted @ 2021-02-05 21:50 yyComeOn 阅读(154) 评论(0) 收藏举报

刷新页面返回顶部

yyComeOn