web前端学习笔记——Day8

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量242 收藏 1
点赞数 1
分类专栏： web前端学习笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43338468/article/details/90141014
版权

十五、js的history对象和location对象

1、History对象

History对象属性

​ History对象包括用户（在浏览器窗口中）访问过的URL。

​ History对象是window对象的一部分，可通过window.history属性对其进行访问

length	返回浏览器历史列表中的URL数量。

History对象方法

back()		加载history列表中的前一个URL。		
forword()	加载history列表中的下一个URL。
go()		加载history列表中的某个具体页面。

eg：（两个html文件）
（1）
<!DOCTYPE html>
<html>
<head>
	<title>js的history对象和location对象</title>
</head>
<body>
	<a href="js2.html">点击</a>
	<button onclick="history.forward()">》》》》》》》</button>
    //<button onclick="history.go(1)">》》》》》》》</button>
</body>
</html>

（2）
<!DOCTYPE html>
<html>
<head>
	<title>js2</title>
</head>
<body>
	<button onclick="history.back()">back</button>
    //<button onclick="history.go(-1)">back</button>
</body>
</html>

2、Locatin对象

Locatin对象包含有关当前URL的信息。

Locatin对象是window对象的一个部分，可通过window.location属性来访问。

Locatin对象方法

location.assign(URL)	加载一个新的页面过来，可以后退
location.reload()		刷新
location.replace(newURL)用一个新的页面替代另一个页面	
//注意与assign的区别
<script type="text/javascript">
	location.assign("http://www.baidu.com");
	location.reload();
	location.replace();
</script>

十六、js的DOM节点

13.1什么是DOM？

在这里插入图片描述

13.2DOM节点

整个文档是一个文档节点（document）

每个HTML元素是元素节点（element）

HTML元素内的文本是文本节点（text对象）

每个HTML属性是属性节点（attribute）

注释是注释节点（comment对象）

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
在这里插入图片描述

1、节点（自身）属性和导航属性

在这里插入图片描述
记住：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>dom  eg:</title>
</head>
<body>
	<div class="div1">
		<p name="littleP" class="p1">hello p</p>
		<div class="div2">
			hello div
			<div>div3</div>
			<a href="">click</a>
		</div>
	</div>
</body>
<script type="text/javascript">
	var ele=document.getElementsByName("littleP")[0];
	var ele2=ele.nextElementSibling;
	console.log(ele2.innerHTML);//不只取出文本，还有标签
	console.log(ele2.innerText);//只取出文本
	ele2.innerHTML="<h1>WZQ</h1>"
</script>

<!DOCTYPE html>
<html>
<head>
	<title>js_dom</title>
</head>
<body>
	<div class="div1">
		<p class="p1">hellp p</p>
		<div class="div2">hello div</div>
	</div>
</body>
<script type="text/javascript">
	var ele=document.getElementsByClassName("p1")[0];
	// console.log(ele.nodeName);//p
	// console.log(ele.nodeType);//1
	// console.log(ele.nodeValue);//null
	// console.log(ele.innerHTML);//hello p

	// var p_ele=ele.parentNode;
	// console.log(ele.parentNode);
	
	// var b_ele=ele.nextSibling;
	// console.log(ele.nextSibling);


	var b_ele2=ele.nextElementSibling;
	console.log(b_ele2.nodeName);
	console.log(b_ele2.innerHTML);
	

</script>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
局部查找

<!DOCTYPE html>
<html>
<head>
	<title>dom  eg:</title>
</head>
<body>
	<div class="div1">
		<p name="littleP" class="p1">hello p</p>
		<span>333</span>
		<div class="div2">
			hello div
			<div>div3</div>
			<a href="">click</a>
			<span>111</span>
		</div>
	</div>
	<span>22</span>
</body>
<script type="text/javascript">
	//局部查找
	var wzq=document.getElementsByClassName("div1")[0];
	var xjy=wzq.getElementsByTagName("span");
	console.log(xjy);
	console.log(xjy[0].innerHTML);
	console.log(xjy[1].innerHTML);
</script>
</html>
不支持ByID和ByName

2、事件

在这里插入图片描述

onfocus和onblur事件
eg：
<!DOCTYPE html>
<html>
<head>
	<title>search</title>
</head>
<body>
	<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">
</body>
<script type="text/javascript">
	var ele=document.getElementById("search");
	function f1(){
		if (ele.value=="请输入用户名") {
			ele.value="";
		}
	}
	function f2(){
		if (!ele.value.trim()) {
			ele.value="请输入用户名";
		}
	}
</script>
</html>


绑定事件
eg：
<!DOCTYPE html>
<html>
<head>
	<title>shijainbangd </title>
</head>
<body>
	<div class="div1">
		<div class="div2">55555</div>
		<div class="div2">55555</div>
		<div class="div2">55555</div>
		<div class="div2">55555</div>
		<p id="p1" onclick="func(this)">333333</p>
	</div>
</body>
<script type="text/javascript">

	//事件绑定
	// var ele=document.getElementById("p1");
	// ele.οnclick=function(){
	// 	alert(123456);
	// }
	// var ele2=document.getElementsByClassName("div2")
	// for (var i=0;i<ele2.length;i++){
	// 	ele2[i].οnclick=function(){
	// 		alert(666);
	// 	}
	// }


	function func(wzq){
		console.log(wzq);
		console.log(wzq.previousElementSibling);
		console.log(wzq.parentNode);
	}
</script>
</html>

3、onload事件

onload属性开发中只给body元素加。

这个属性的触发标志着页面内容被加载完成。

应用场景：当有些事情我们希望页面加载完成立刻执行，则可以使用该事件属性。

解决了script后加载，或没加载完的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
//          window.οnlοad=function(){
//               var ele=document.getElementById("ppp");
//               ele.οnclick=function(){
//                alert(123)
//            };
//          };

         function fun1() {
              var ele=document.getElementById("ppp");
               ele.onclick=function(){
                alert(123)
            };
          }

    </script>
</head>
<body onload="fun1()">

<p id="ppp">hello p</p>

</body>
</html>

十七、onsubmit事件、Evevt对象、事件传播

1、onsubmit事件

当表单在提交时触发，该属性也只能给form元素使用。

应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。
在这里插入图片描述

举例：
<!DOCTYPE html>
<html>
<head>
	<title>js_onsubmit事件</title>
</head>
<body>
	<form action="" id="form1">
		<input type="text" name="用户名">
		<input type="submit" value="提交">
	</form>
</body>
<script type="text/javascript">
	var ele=document.getElementById("form1");
	ele.onsubmit=function (){
		alert("提交成功")
		return false   //阻止数据发向后端
	}
</script>
</html>

2、Evevt对象

在这里插入图片描述

3、事件传播

在这里插入图片描述

举例：
<!DOCTYPE html>
<html>
<head>
	<title>事件传播</title>
	<style type="text/css">
		.outer{
			width: 300px;
			height: 300px;
			background-color: red;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="outer" onclick="f2()">
		<div class="inner"></div>
	</div>
</body>
<script type="text/javascript">
	var ele=document.getElementsByClassName("inner")[0];
	ele.onclick=function (e){
		alert("inner");
		e.stopPropagation();
	}
	function f2(){
		alert("outer");
	}
</script>
</html>

十八、DOM节点的增删改查和属性设置

1、增删改查演示

1.1node的CURD：

增：

createElement(name)		创建元素
appendChild();			将元素添加，要找到父节点，通过父节点添加

删：

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

改：

​ 第一种方式：

​ 使用上面增和删结合完成修改

​ 第二种方式：

​ 使用setAttribute();方法修改属性

​ 使用innerHTML属性修改元素的内容

**查：**使用之前介绍方法

<!DOCTYPE html>
<html>
<head>
	<title>node的增删改查</title>
	<style type="text/css">
		.div1,.div2,.div3,.div4{
			width: 200px;
			height: 150px;
		}
		.div1{
			background-color: red;
		}
		.div2{
			background-color: blue;
		}
		.div3{
			background-color: yellow;
		}
		.div4{
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="div1">
		<button onclick="add()">增加</button>
		hello div1
	</div>
	<div class="div2">
		<button onclick="del()">删除</button>
		hello div2
	</div>
	<div class="div3">
		<button onclick="change()">修改</button>
		<p>hello div3</p>
	</div>
	<div class="div4">hello div4</div>

</body>
<script type="text/javascript">

	//增加标签
	function add(){
	    var ele=document.createElement("p");//创建一个<p></p>标签，但是没有内容
		ele.innerHTML="王智强";//给创建的标签添加内容
		var father=document.getElementsByClassName("div1")[0];
		father.appendChild(ele);
	}

	//删除标签
	function del(){
		var father=document.getElementsByClassName("div1")[0];
		var sons=father.getElementsByTagName("p")[0];
		father.removeChild(sons);
	}

	//修改标签
	function change(){
		var img=document.createElement("img");
		//首先创建一个标签，用这个创建的标签去修改，但目前img标签什么都没有
		img.src="F:/我鱼/1/psbATRLLLMM.jpg";//添加图片路径
		var ele= document.getElementsByTagName("p")[0];
		//找到要修改的对象
		var father=document.getElementsByClassName("div3")[0];//找到父标签
		father.replaceChild(img,ele);
		//替换，用img替换ele（p）
	}
</script>
</html>

1.2修改 HTML DOM

（1）、改变HTML内容

​ 改变元素内容的最简单的方法时是使用innerHTML和innerText。

（2）、改变css样式

<p id="p2">hello world</p>
document.getElementById("p2").style.color="blue";</br>
.sstyle.fontSize("10px")

（3）、改变HTML属性

elementNode.setAttribute(name,value)
elementNode.setAttribute(name)<--------->elementNode.value(DHTML)

（4）、创建新的HTML元素

cerateElement(name)

（5）、删除已有的HTML元素

elementNode.removeChild(node)

（6）、关于class的操作

elementNode.className
elementNode.classList.add
elementNode.classList.remove

举例：
<!DOCTYPE html>
<html>
<head>
	<title>js_class</title>
</head>
<body>
	<div class="div1 div2">wzq</div>
</body>
<script type="text/javascript">
	var ele=document.getElementsByTagName('div')[0];
	console.log(ele.className);
	console.log(ele.classList[0]);
	console.log(ele.classList[1]);
	console.log(ele.classList.add("div3"));
	console.log(ele.className);
	// console.log(ele.classList.remove());

</script>
</html>
小小鱼@✔
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端学习笔记——Day5
qq_43338468的博客
05-08 168
七、css的float属性（最重要） 先来了解一下block元素和inline元素在文档流中的排列方式。 ​ block元素通常被实现为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性； ​ inline元素不会独占一行，多个相邻的行内元素会排在同一行里，直到一行排列...
web前端学习笔记——Day2
qq_43338468的博客
05-07 164
六、表单标签form ​ 表单用于向服务器传输数据。 ​ 表单能够包含input元素；比如文本字段、复选框、单选框、提交按钮等。 ​ 表单还可以包含textarea、select、fieldset和label元素。 1、表单属性 ​ HTML表单用于接收不同类型的用户输入，用户提交表单时1向服务器传输数据，从而实现用户与web服务器的交互。表单标签，要提交的所有内容都应该在该标签中。 ​ acti...
web前端学习笔记——Day4
qq_43338468的博客
05-08 157
五、css的常用属性 1、颜色属性 1、color:red;直接颜色的英文 2、color:#ffee33;十六进制表示 3、color:rgb(255,0,0);rgb三原色表示，取值0~255 4、color:rgba(255,0,0,0.5);a表示透明度 2、字体属性 1、font-size:50px/50%/larger (大小) 2、font-family:'lucida Brig...
web前端学习笔记——Day11
qq_43338468的博客
05-30 287
六、动画效果 6.1显示隐藏 hide show toggle三个函数方法 <!DOCTYPE html> <html> <head> <title>显示隐藏</title> </head> <body> <p>hello</p> <button id="hide">...
web前端学习笔记——Day10
qq_43338468的博客
05-30 161
四、操作元素（属性，css，文档处理） 4.1属性操作 --------------------------属性 $("").attr();//拿到属性对应的值 $("").removeAttr();// $("").prop(); $("").removeProp(); 如果是固有的属性，就用prop，如果是自己定义的属性，就用attr --------------------------CSS...
web前端学习笔记——Day7
qq_43338468的博客
05-12 249
六、JavaScript的循环与异常 try{ //这段代码从上往下运行，其中任何一个语句可抛出异常改代码块就结束运行 } catch (e){ //如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向error对象或者其他抛出的对象 } finally{ //无论try代码是否有异常抛出（甚至是try代码块中有retu...
web前端学习笔记——Day6(js)
qq_43338468的博客
05-10 295
一、JavaScript的引入方式 {#1直接编写 <script> alert("hello") </script> } {#2导入js文件 <script src="路径+文件名.js"></script> } 一般情况下习惯于放在</body>和</html>之间，这样不会存在当要找标签...
web前端学习笔记——Day1(html)
qq_43338468的博客
05-07 455
heda标签 meta ​ meat标签的组成：meat标签共有两个属性，它们分别是http—equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 ​ 1、name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <meta name='keywords' conten...
web前端学习笔记——Day3(css)
qq_43338468的博客
05-08 1160
css：层叠样式表，用来控制网页数据的表现，可以使用网页的表现与数据内容分离 一、css的四种引入方式 1、行内式 ​ 行内式是在标记的style属性中设定css样式。 <p style="background-color:rebeccapurple">hello</p> 2、嵌入式 嵌入式是将css样式集中写在网页的head标签对的style标签对中。格式如下： &lt...
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
note:前端学习笔记——https
03-08
本前端学习笔记主要探讨HTTPS的工作原理、重要性以及如何在项目中应用它。 首先，理解HTTPS的基本概念至关重要。HTTPS是HTTP（超文本传输协议）与SSL/TLS（Secure Sockets Layer/Transport Layer Security）的结合...
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 181
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 928
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 83
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 69
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值