当前位置：主页 > 查看内容

JavaScript基础入门 续

发布时间：2021-06-25 00:00| 有 位朋友查看

简介：6、操作BOM对象(重点) 浏览器介绍 JavaScript和浏览器关系? javascript 诞生就是为了能够让他在浏览器中运行 BOM浏览器对象模型 IE 6~11 Chrome Safari Firefox 第三方 QQ浏览器 360浏览器 window window代表浏览器窗口 window . alert ( 1 ) undefinedwindo……

6、操作BOM对象(重点)

浏览器介绍

JavaScript和浏览器关系?

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

BOM：浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • Firefox

第三方

  • QQ浏览器
  • 360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
788
window.innerWidth
1045
window.outerHeight
860
window.outerWidth
1600
//大家可以调整浏览器窗口试试

Navigator

Navigator,封装了浏览器的信息

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

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

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

screen

screen.width
1920
screen.height
1080
//代表屏幕尺寸

location (重要)

location代表当前页面的URL信息

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

document

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

document.title
"百度一下，你就知道"
document.title='叶鸿凌'
"叶鸿凌"

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dd>js</dd>
    <dd>javaes</dd>
</dl>

<script>

    var dl = document.getElementById('app');

</script>

获取cokie

document.cookie
"BIDUPSID=FA0BF84549D229E54AF7FC652FC64BA5; PSTM=1617004824; BAIDUID=FA0BF84549D229E520791FBA59D3C38A:FG=1; BD_UPN=12314753; BAIDUID_BFESS=FA0BF84549D229E520791FBA59D3C38A:FG=1; BD_HOME=1; H_PS_PSSID=33802_33822_33739_33272_31253_33690_33758_26350; delPer=0; BD_CK_SAM=1; PSINO=2; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; COOKIE_SESSION=519039_3_9_9_25_26_0_0_6_7_10_15_519024_19823_6_0_1618194851_1617346128_1618194845%7C9%23275704_38_1617621806%7C8; BA_HECTOR=8ka1al000k2h8h25t01g77fgf0q"

劫持 cookie原理

www.baidu.com

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

服务器端可以设置cookie：httpOnly

history

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

7、操作DOM对象 (重点)

核心

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

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

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

<h1>java</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');

</script>

这是原生代码，之后我们尽量都是用jQuery（）；

更新节点

操作文本

  • id1.innerText=‘yehl’ 修改文本的值
  • id1.innerHTML=‘

    yehl

    ’可以解析HTML文本标签

操作js

id1.style.color='red';	//属性使用字符串
id1.style.fontSize = '100px' //驼峰命名问题

删除节点

删除节点步骤：先获取父节点，然后在通过父节点删除自己

 <div id = "father">

    <h1>java</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';

    list.appendChild(newP);
    
    var myscript = document.createElement('script');
    myscript.setAttribute('type','text/javascript');

</script>

8、操作表单(验证)

表单是什么 form DOM树

  • 文本框
  • 下拉框
  • 单选框
  • 多选框
  • 隐藏域
  • 密码框

表单的目的：提交信息

获得提交的信息

<form action="post">

    <span>用户名：</span><input type="text" id = "username">

<!--  多选框的值，就是定义号的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 bay_radio=document.getElementById('boy');
    var girl_radio =document.getElementById('girl');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value = '1324'

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

</script>

提交表单 md5加密密码

<!--

表单绑定提交时间
onsubmit = 绑定一个提交检测的函数， true  false
将这个结果返回给表单，使用onsubmit接受
οnsubmit="return tj()"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return tj()">

    <p>
        <span>用户名：</span><input type="text" id = "username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id = "input-password" name="input-password">
    </p>
    <!--基本上都使用隐藏就可以了-->
    <input type="hidden" id="md5-password" name="password">

    <!--绑定时间onclick 被点击-->
    <button type="submit" onclick="tj()">提交</button>


</form>

    <script>
        function tj(){
            var name = document.getElementById('username');
            var pwd = document.getElementById('input-password');
            //这个在提交的一瞬间会边长，这样不好
            var md5pwd = document.getElementById('md5-password');

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

            //MD5算法
            // pwd.value = md5(pwd.value);
            // console.log(pwd.value);
        }
    </script>

9、jQuery

JavaScript

jQuery库，里面存在大量的JavaScript函数

获取jQuery

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  CDN jQuery  -->
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!--  lib下的jQuery  -->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>


<!--
公式 ： $(selector).action()
-->

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

<script>

    //document.getElementById('id');
    //选择器就是CSS选择器 
    $('#test-jquery').click(function () {
        alert("Holle jQuery");
    })

</script>

</body>
</html>

选择器

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


    //jquery css 中的选择器它全都能使用
    $('p').click();//标签选择器
    $('#id').click();//id选择器
    $('.class').click();//class选择器
</script>

文档工具站：https://jquery.cuishifeng.cn/

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divmove{
            width: 700px;
            height: 700px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>

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

<script>
    //当网页元素加载完毕之后，响应事件

    $(function () {
        $('#divmove').mousemove(function (e) {
            $('#move').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })
</script>
</body>
</html>

最后给大家总结一些有用的网站

jQuery https://jquery.com/

layui https://www.layui.com/doc/

layer https://layer.layui.com/

element https://element.eleme.cn/#/zh-CN

jQuery中文文档 https://jquery.cuishifeng.cn/

；原文链接：https://blog.csdn.net/HongLingya/article/details/115677758
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：蓝桥杯Java组近两年真题练习总结（持续更新中） 下一篇：Web技术模拟面试题A参考答案

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐