Java（JavaScript03）

Zachsj

已于 2022-07-15 19:44:50 修改

阅读量87

点赞数

分类专栏： Java（学习笔记） # Java（HTML+CSS+JavaScript）文章标签： java javascript

于 2022-05-01 10:48:00 首次发布

本文链接：https://blog.csdn.net/Zachsj/article/details/124454321

版权

Java（学习笔记）同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

Java（HTML+CSS+JavaScript）

7 篇文章 0 订阅

订阅专栏

Java（JavaScript03）

参考视频：19. 操作BOM对象（狂神）

BOM：浏览器对象模型
DOM：文档对象模型

7. 操作Bom对象（重点）

7.1 浏览器介绍

JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
（原生）浏览器：
- IE 6~11
- Chrome
- Safari
- FireFox（Linux默认）
- Opera（较为小众）
（三方）浏览器：
- QQ浏览器
- 360浏览器

7.2 window（重要）

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
882
window.outerHeight
824
window.outerWidth
881
//调整浏览器窗口试试

7.3 navigator（不建议使用）

navigator，封装了浏览器的信息

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

大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断或编写代码。

7.4 screen

代表屏幕尺寸

screen.width
1536 px
screen.height
864 px

7.5 location（重要）

location代表当前页面的URL信息

hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload()	//刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

7.6 document（内容；DOM）

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

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

获取具体的文档树节点

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

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

获取cookie

document.cookie;
''
document.cookie;//百度的
'BIDUPSID=7D1A0EFC5BD1D8A8DA80C1223D0484FC; PSTM=1650464394; BAIDUID=7D1A0EFC5BD1D8A81B52DE4DDB678247:FG=1; BAIDUID_BFESS=7D1A0EFC5BD1D8A8DA80C1223D0484FC:FG=1; BD_UPN=12314753; baikeVisitId=bb5baba1-8d76-439f-85d2-2edec401f628; BD_HOME=1; H_PS_PSSID=36309_36367_34812_36165_34584_36120_35978_35864_36232_26350_36302_36314_36061; BA_HECTOR=0h210l002180a085p91h6i1ls0r'

劫持cookie原理
例如：www.taobao.com

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

服务器端可以设置cookie：httpOnly

7.7 history（不建议使用）

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

8. 操作Dom对象（重点）

DOM：文档对象模型

8.1 核心

浏览器网页就是一个Dom树形结构！
- （增）添加：添加一个新的节点
- （删）删除：删除一个Dom节点
- （改）更新：更新Dom节点
- （查）遍历Dom节点：得到Dom节点（前提）
要操作一个Dom节点，就必须要先获得这个Dom节点。

8.2 获得Dom节点

	//对应 css 选择器
	var h1 = document.getElementsByTagName('h1');
	var p1 = document.getElementById('p1');
	var p2 = document.getElementsByClassName('p2');
	var father = document.getElementById('father');

	var childrens = father.children[index];//获取父节点下的所有子节点
	// father.firstChild
	// father.lastChild

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

8.3 更新Dom节点

操作文本

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

操作css

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

8.4 删除Dom节点

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

<div id="father">
	<h1>标题一</h1>
	<p id="p1">p1</p>
	<p class="p2">p1</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时刻变化。例如，删除前面的一个节点后，后面的节点会一个个向前移动。

8.5 插入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>
	let js = document.getElementById('js');
	let list = document.getElementById('list');
	list.appendChild(js);//追加到后面（实际上是移动，因为原来位置上的没有了）
</script>

结果一：
在这里插入图片描述

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

<script>
	let js = document.getElementById('js');//已经存在的节点
	let list = document.getElementById('list');
	//通过JS创建一个新的节点
	let newP = document.createElement('p');//创建一个p标签
	newP.id = 'newP';
	newP.innerText = 'Hello,Zach!!!';
	list.appendChild(newP);
	//创建一个标签节点（通过这个属性，可以设置任意的值）
	let myScript = document.createElement('script');
	myScript.setAttribute('type','text/javascript');
		
	//可以创建一个style标签
	let myStyle = document.createElement('style');//1.创建了一个空style
	myStyle.setAttribute('type','text/css');
	myStyle.innerHTML =
			'body{background-image: ' +
			'linear-gradient' +
			'(160deg, #0093E9 0%, #80D0C7 100%);}';//2.设置标签内容

	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);

9. 操作表单（验证）

表单是什么 form DOM树
- 文本框 text
- 下拉框 <select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- … …
表单的目的：提交信息

9.1 获得要提交的信息

<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="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 = '1443618808';

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

9.2 提交表单

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>
<!--
表单绑定提交事件
ο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>密&emsp;码：</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);
		let uname = document.getElementById('username');
		let pwd = document.getElementById('input-password');
		let md5pwd = document.getElementById('md5-password');

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

10. jQuery

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

10.1 获取jQuery

在这里插入图片描述

公式：
- $(selector).action()
- $(选择器).事件(事件函数)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!--cdn引入-->
	<!--<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>-->
	<script src="lib/jquery-3.6.0.js"></script>
	<!--公式：$(selector).action()-->
</head>
<body>

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


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

10.2 选择器

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

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

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

10.3 事件

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

<!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: 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>

10.4 操作DOM

节点文本操作

	$('#test-ul li[name=python]').text();//获得值
	$('#test-ul li[name=python]').text('设置值');//设置值
	$('#test-ul').html();//获得值
	$('#test-ul').html('<strong>111</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();

$('#form').ajax();

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

11. 技巧分享

小技巧
- 巩固JS：看jQuery源码，看游戏源码！（前端小游戏）
- 巩固HTML、CSS：扒网站：全部down下来，然后对应修改看效果。
Layer弹窗组件
Element-ui

—————— THE END ——————

Zachsj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java（JavaScript03）

7. 操作Bom对象（重点）8. 操作Dom对象（重点）9. 操作表单（验证）10. jQuery11. 技巧分享
复制链接

扫一扫

专栏目录

Java（JavaScript03）

Java（JavaScript03）

7. 操作Bom对象（重点）

7.1 浏览器介绍

7.2 window（重要）

7.3 navigator（不建议使用）

7.4 screen

7.5 location（重要）

7.6 document（内容；DOM）

7.7 history（不建议使用）

8. 操作Dom对象（重点）

8.1 核心

8.2 获得Dom节点

8.3 更新Dom节点

8.4 删除Dom节点

8.5 插入Dom节点

9. 操作表单（验证）

9.1 获得要提交的信息

9.2 提交表单

10. jQuery

10.1 获取jQuery

10.2 选择器

10.3 事件

10.4 操作DOM

11. 技巧分享

“相关推荐”对你有帮助么？