js基础（三）

最新推荐文章于 2024-06-13 02:48:16 发布

大狗晋

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量156

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_52957373/article/details/126231016

版权

BOM对象

window

window代表浏览器窗口

//浏览器外部高度
window.outerHeight
804
//浏览器外部宽度
window.outerWidth
699
//浏览器内部高度
window.innerHeight
101
//浏览器内部宽度
window.innerWidth
688

navigator

navigator，封装了浏览器的信息

navigator.appName 

"Netscape" 

navigator.userAgent 

"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0" 

navigator.platform 

"Win32"

location

location代表当前页面的URL信息

host:"www.baidu.com"  //主机
href:"https://www.baidu.com/"  //当前指向的位置
protocol:"https:"  //协议
reload:f reload()	//刷新页面
location.assign("https://www.qq.com")   //转向新的地址

document

document代表当前页面
获取具体的文档树节点

<dl id = "app">
    <dt>JAVA</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>
<script>
	let dl = document.getElementById("app");
</script>

history

history代表浏览器的历史记录

history.back()  //返回前一个页面
history.forward()  //前进

操作DOM对象

DOM节点

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

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

要操作一个DOM节点，首先要获取到这个DOM节点
获取DOM节点：

document.getElementsByTagName('');//根据标签名获取
document.getElementById('');//根据id名获取
document.getElementsByClassName('');//根据类名获取

更新DOM节点：

//document.innertext('');修改文本的值
<div id="oh">
</div>
<script >
    var oh1= document.getElementById('oh');
</script>
</body>

innerHTML可以解析HTML文本标签：

oh1.innerHTML='<strong>123</strong>'

在这里插入图片描述

删除DOM节点：

先获取到父节点，然后删除字节点，不能直接删除子节点

<body>
<div id="oh">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script >

            var p1=document.getElementById('p1');
            var di=p1.parentElement;
            di.removeChild(p1); 
</script>
</body>

在这里插入图片描述

插入节点

不能够使用innertext来插入，这样对原有的内容产生覆盖。

追加： append方法。

<body>
<p id="p1">第一</p>
<div id="d1">
    <p id="p2">第二</p>
    <p id="p3">第三</p>
    <p id="p4">第四</p>
</div>
    <script>
        var pn=document.getElementById('p1');//获取待插入节点
        var di=document.getElementById('d1');//获取目标节点
        di.appendChild(pn);//在尾部插入
         var newp=document.createElement('p');//创建新节点
        newp.id='p5';//给新标签设置id
        newp.innerText='第五';//写入内容
        di.appendChild(newp);//尾部插入
    </script>
</body>

在这里插入图片描述

insertBefore

insertBefore(newNode,oldNode);//newNode是当前需要插入的节点，oldNode为原位置上的节点

这种插入方法只能从包含待插入位置的标签开始，例如下面的代码：我们往p3前面插入，就要用di来操作insertBefore。

<body>
<p id="p1">第一</p>
<div id="d1">
    <p id="p2">第二</p>
    <p id="p3">第三</p>
    <p id="p4">第四</p>
</div>
    <script>
        var pn=document.getElementById('p1');
        var di=document.getElementById('d1');
        di.insertBefore(p1,p3);//p1节点插入到p3前面
        var newp=document.createElement('p');
        newp.id='p5';
        newp.innerText='第五';
        di.insertBefore(newp,p3);//将新建的p5节点也插入在p3前面
    </script>
</body>

操作表单

获得需要提交的信息：先通过document.getElementById(‘username’)获取到节点，然后用value属性来获取节点的值

<body>
<form action="#">
     <span>用户名：</span> <input type="text" id="username">
</form>
<script>
    var us=document.getElementById('username');
</script>
</body>

在这里插入图片描述
修改值只需 us.value='asdas'; 即可

当我们想获取到复选框的值时，需要对其进行一个判断，使用checked属性判断，其返回值为true和false，当返回值为true时说明此框被选中，否则反之。


<body>
<form action="#">
     <span>用户名：</span> <input type="text" id="username"><br>
    <span>性别：</span> <input type="radio" value="man" id="boy">男
    <input type="radio" value="woman" id="girl">女
</form>
<script>
    var us=document.getElementById('username');
    var m=document.getElementById('boy');
    var w=document.getElementById('girl');
</script>
</body>

在这里插入图片描述

提交表单

在HTML中可以绑定事件，即被绑定的按钮被点击的时候会自动运行一段js代码

<body>
<form action="#">
     <span>用户名：</span> <input type="text" id="username"><br>
       <button type="submit" onclick="aa()">提交</button>
</form>
<script>
    function aa() {
alert('弹窗');
    }
</script>
</body>

在这里插入图片描述

加密

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    //引入md5加密的js文件
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

</head>
<body>

<!--表单绑定提交事件-->
<form action="https://www.baidu.com/" method="post" onsubmit="return check()" >
    用户名：<input type="text" id="username" name="username"><br/>
    密码：<input type="password" id="input-password" ><br/>
    <!--加密-->
    <input type="submit" value="提交">

</form>

<script>
    function check(){
        let uname = document.getElementById('username');
        let pwd = document.getElementById('input-password');
        let md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);
    }
    
</script>

大狗晋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js基础（三）

当我们想获取到复选框的值时，需要对其进行一个判断，使用checked属性判断，其返回值为true和false，当返回值为true时说明此框被选中，否则反之。获得需要提交的信息：先通过document.getElementById(‘username’)获取到节点，然后用value属性来获取节点的值。这种插入方法只能从包含待插入位置的标签开始，例如下面的代码：我们往p3前面插入，就要用di来操作insertBefore。先获取到父节点，然后删除字节点，不能直接删除子节点。获取具体的文档树节点。...
复制链接

扫一扫