【千锋Python2205班9.14笔记-day17-前端基础学习（6）】

最新推荐文章于 2024-07-19 14:40:55 发布

weixin_43600905

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量264

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/weixin_43600905/article/details/126858387

版权

01-写js代码的位置

1. js代码写在哪儿？

1）将js代码写在标签的事件属性中

2)将js代码写在script标签中(script标签可以放在html文件中的任何位置)

3)将js代码写在外部的js文件中，然后在html文件中用script标签导入

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<!-- 1.内联js -->
		<button onclick="alert('你好!')">确定</button>
		
		<p id="p1">我是段落1</p>
		<p id="p2">我是段落2</p>
		
	</body>
	<!-- 2.内部js -->
	<script>
		// 这个里面只能写js代码
		document.getElementById('p1').innerText = 'hello world!'
	</script>
	
	<!-- 3.外部js
		特别注意：script标签既可以直接提供js代码，也可以用来导入外部js文件。但是一个script标签只能在这两个作用中二选一
	-->
	<script src="js/demo.js"></script>
</html>

02-DOM操作获取标签

1. DOM(document object mode)操作

通过document对象直接或者间接的操作网页内容
js中的document对象代表网页内容

DOM操作主要内容：获取标签、添加标签、删除标签、操作标签内容、操作标签属性、操作标签样式

2. 获取标签

1)直接获取标签

直接通过document对象获取标签
document.getElementById(id属性值) - 获取网页中id属性值为指定值的标签，返回值是标签对象
document.getElementsByClassName(class属性值) - 获取网页中class属性值为指定值的所有标签，返回值是数组(列表),数组中的元素是标签对象
document.getElementsByTagName(标签名) - 获取网页中所有指定的标签,返回值是数组(列表),数组中的元素是标签对象
document.getElementsByName(name属性值) - 获取网页中所有name属性值为指定值的标签

2）间接获取标签

通过父标签获取子标签，或者通过子标签获取父标签
a. 获取一个标签所有的子标签: 标签对象.children
b.获取一个标签的第一个子标签: 标签对象.firstElementChild
c.获取最后一个子标签：标签对象.lastElementChild
d.获取父标签: 标签对象.parentElement

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="box1">
			<p class="c1">我是段落1</p>
			<a>我是超链接1</a>
			<span class="c1">我是span1</span>
			<p id="p1">我是段落2</p>
			<p>我是段落3</p>
		</div>
		
		<div id="box2">
			<span>我是span2</span>
			<a class="c1">我是超链接2</a>
			
			<input type="text" name="username" id="">
			<input type="radio" name="gender">男
			<input type="radio" name="gender">女
			
		</div>
		
		
	</body>
	
	<!-------------- 1）直接获取标签 -------------->
	<script type="text/javascript">
		// 通过id值获取标签
		result = document.getElementById('p1')
		console.log(result)
		
		// 通过class属性获取标签
		result = document.getElementsByClassName('c1')
		console.log(result)
		console.log(result[2])
		
		// 通过标签名获取标签
		result = document.getElementsByTagName('p')
		console.log(result)
		
		// 通过name属性值获取标签(了解)
		result = document.getElementsByName('gender')
		console.log(result)
	</script>
	
	<!-------------- 2）获取子标签和父标签 -------------->
	<script>
		console.log('----------------------------------------------')
		// 1.获取子标签
		var box1 = document.getElementById('box1')
		// 1）获取一个标签所有的子标签: 标签对象.children
		result = box1.children
		console.log(result)
		
		// 2)获取一个标签的第一个子标签
		result = box1.firstElementChild
		console.log(result)
		
		// 3)获取最后一个子标签
		result = box1.lastElementChild
		console.log(result)
		
		// 2.获取父标签
		result = box1.parentElement
		console.log(result)
		
		var p = document.getElementById('p1')
		result = p.parentElement
		console.log(result)
	</script>
	
</html>

03-添加和获取标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p>我是段落1</p>
		</div>
		<div id="box2">
			<p id="p2">我是段落3</p>
			<a href="">我是超链接1</a>
		</div>
	</body>
	
	<script>
		// 1. 添加标签: 创建标签  ->  添加标签
		// 1)创建标签:document.createElement(标签名)
		var p1 = document.createElement('p') 		// 创建一个空的p标签
		p1.innerText = '我是段落2'
		var a1 = document.createElement('a')
		var img1 = document.createElement('img')
		var i1 = document.createElement('input')
		
		
		// 2)添加标签: 
		// 父标签对象.appendChild(标签)		-	在父标签对象里面的最后添加指定标签
		// 父标签对象.insertBefore(标签1, 标签2)	-	将标签1插入到父标签对象中标签2的前面
		var box = document.getElementById('box')
		box.appendChild(p1)
		box.appendChild(a1)
		
		box.insertBefore(img1, a1)
		
		box.insertBefore(i1, box.firstElementChild)
	</script>
	
	<script>
		// 2. 删除标签: 标签对象.remove()		-		删除指定标签
		var p3 = document.getElementById('p2')
		p3.remove()
		
		// var box2 = document.getElementById('box2')
		// box2.removeChild(p3)
		
	</script>
	
</html>

04-操作标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="p1">
			你好，<b>js</b>
		</p>
		
		<p id="p2">
			你好，<b>js</b>
		</p>
		
		<a href="https://www.baidu.com">百度</a>
		<img src="img/logo-201305-b.png" title="京东" alt="加载失败">
		<p id="p3">我是段落1</p>
	</body>
	<script>
		// 1.操作双标签的标签内容
		// 1) innterText(只能处理文字内容)
		var p1 = document.getElementById('p1')
		
		// 标签对象.innerText - 获取指定标签的标签内容
		var result = p1.innerText
		console.log(result)
		
		// 标签对象.innerText = 字符串		-	修改指定标签的标签内容
		// p1.innerText = 'hello world!'
		p1.innerText = '<a href="https://www.baidu.com">百度</a>'
		
		// 2)innerHTML(可以处理子标签)
		var p2 = document.getElementById('p2')
		var result = p2.innerHTML
		console.log(result)
		
		// p2.innerHTML = 'hello world!'
		p2.innerHTML = '<a href="https://www.baidu.com">百度</a>'
	</script>
	
	<script>
		// 2.操作标签属性: 
		// nums = [10, 29]  -> nums[0]
		// [<img src="img/logo-201305-b.png" title="京东" alt="加载失败">]
		var img1 = document.getElementsByTagName('img')[0]
		
		// 1)获取属性值：标签对象.html属性名
		var result1 = img1.title
		var result2 = img1.src
		console.log(result1, result2, img1.alt)
		
		// 2）修改属性值：标签对象.html属性名 = 新值
		img1.title = 'JingDong'
		
		
		nums = [100, 200, 300]
		console.log(nums[1])
	</script>
	
	<script>
		// 3.操作标签样式: 
		var p1 = document.getElementById('p1')
		var p2 = document.getElementById('p3')
		
		// 1)单独设置某个样式：标签对象.style.css属性名 = 'css属性值'
		// 注意：css属性名中如果有‘-’，在js中用‘-’后面的第一个字母大写的方式来取消'-'
		// font-size(css)  ->  fontSize(js)
		// background-color(css)  -> backgroundColor(js)
		p1.style.color = '#ff00f9'
		p1.style.fontSize = '50px'
		p1.style.backgroundColor = 'yellow'
		
		// 2）同时设置多个样式：标签对象.style = 'css原生样式表'
		p2.style = 'color:red; font-size:50px; background-color:yellow;'
		
		
	</script>
	
</html>

05-点击按钮操作页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			
		</div>
		
		<input id="name" type="text">
		<button onclick="addFruits()">确定</button>
	</body>
	
	<script>
		// console.log('hello world!')
		// console.log('结束！')
		// 定义函数语法：
		function sureAction(){
			console.log('hello world!')
			console.log('结束！')
		}
		
		// 调用函数
		// sureAction()
		
		function addFruits(){
			// 获取装所有水果的盒子
			var box = document.getElementById('box')
			
			// 获取输入框内容
			var input1 = document.getElementById('name')
			var fruitsName = input1.value
			input1.value = ''
			
			// 创建输入框内容对应的水果标签
			var p1 = document.createElement('p')
			p1.innerText = fruitsName
			
			box.appendChild(p1)
		}
		
	</script>
</html>

06-动态添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			/* -----------水果显示部分的样式--------------- */
			#box1{
				margin-left: 50px;
				margin-top: 40px;
			}
			#box1>p{
				background-color: rgb(96, 139, 140);
				width: 250px;
				height: 60px;
				margin-top: 3px;
				text-align: center;
				line-height: 60px;
				color: white;
				font-size: 22px;
				
				position: relative;
			}
			
			#box1 span{
				position: absolute;
				right: 10px;
			}
			
			
			/* --------------输入框和按钮部分---------------- */
			#box2{
				margin-left: 50px;
				margin-top: 25px;
			}
			
			#box2>input{
				width: 250px;
				height: 45px;
				
				border: none;
				border-bottom: 1px solid gray;
				outline: none;
				
				/* 一定输入框的光标到中间 */
				text-align: center;
				
				font-size: 20px;
			}
			
			#box2>button{
				width: 90px;
				height: 45px;
				background-color: coral;
				color: white;
				font-size: 22px;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<p>苹果<span>×</span></p>
			<p>草莓<span>×</span></p>
			<p>香蕉<span>×</span></p>
			<p>榴莲<span>×</span></p>
		</div>
		
		<div id="box2">
			<input type="text">
			<button onclick="addFruits()">确定</button>
		</div>
	</body>
	
	<script>
		
		
		function addFruits(){
			// 1.获取输入框内容
			var input1 = document.getElementById('box2').firstElementChild
			var fruitsName = input1.value
			// 获取完内容后清空输入框
			input1.value = ''
			
			// 2.创建水果对应的标签并且添加到box1中
			// 1)创建水果标签
			var p = document.createElement('p')
			p.innerHTML = fruitsName + '<span>×</span>'
			
			// 设置背景颜色为随机色
			r = parseInt(Math.random()*255)
			g = parseInt(Math.random()*255)
			b = parseInt(Math.random()*255)
			p.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.4)`
			
			// 2)添加标签
			var box1 = document.getElementById('box1')
			box1.insertBefore(p, box1.firstElementChild)
			
		}
	</script>
</html>

07-隐藏超过父标签的部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			
			<div id="div1"></div>
		</div>
		
		<style>
			#box{
				width: 300px;
				height: 300px;
				border: 1px solid saddlebrown;
				
				/*隐藏子标签超出的部分*/
				overflow: hidden;
			}
			
			#div1{
				width: 600px;
				height: 100px;
				background-color: aquamarine;
				
			}
		</style>
	</body>
</html>