HTML-CSS-JS的学习

最新推荐文章于 2023-12-17 20:16:45 发布

小希一夏

最新推荐文章于 2023-12-17 20:16:45 发布

阅读量190

点赞数

文章标签： JS CSS HTML

本文链接：https://blog.csdn.net/weixin_42454678/article/details/99655695

版权

1.BOM和DOM入门
(1)请说出DOM对象和BOM对象的关系
BOM对象包含了DOM对象
(2)请说出BOM对象中包含的对象内容
BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法
1）History
2）Navigator
3）Document
4）Location
5）Screen
2.BOM对象-window
(1)常见的弹框方式有几种，请分别说出他们的使用场景
常见的弹框方式有3种

//BOM中三种弹框
			//含有确定按钮的弹框
			function demo1(){
				window.alert("弹框A")
			}
			//含有确认取消的弹框
			function demo2(){
				var flag = window.confirm("确认删除？")
				alert(flag)
			}
			//可以输入内容的弹框
			function demo3(){
				var name = window.prompt("请出入昵称：","例如balicar")
				alert(name)
			}

(2)请说出setTimeout和setInterval的区别和联系，并且说出他们的使用场景
setTimeout和setInterval都可以实现对当前时间的改变，但是setTimeout只能改变一次，setInterval可以改变多次

//1s之后进行方法的调用  调用一次
//			window.setTimeout("demo4()",1000)
			//每间隔1s就会进行方法的调用   调用多次
			var d = window.setInterval("demo4()",1000)

(3)请说出open方法的作用和使用场景。
Open方法可以打开一个网页，是另起一页的方式
open（）方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

function  demo5(){
				window.open("http://www.baidu.com");
			}

3.BOM对象-location-history-navigator
(1)请列举location对象中常用的方法

function testLocation(){
				//http://127.0.0.1:8020/06JS/02JS%E4%B8%ADBOM%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0.html		
				var href = window.location.href;
				//http://127.0.0.1
				var hostname = window.location.hostname;
				//8020
				var port = window.location.port;
				//http://127.0.0.1:8020
				var host = window.location.host;
				
//				alert(href+"****"+hostname+"****"+port+"****"+host);
				//在本页面中加载百度页面;修改当前的URL地址
//				window.location.href = "http://www.baidu.com"
				//重新加载页面
				window.location.reload();
			}

(2)请说出window.history.go(args); 请说出args值分取 0 , 2 , -2 的含义
window.history.go(0);表示重新加载页面
window.history.go(2);表示前进2个操作
window.history.go(-2);表示后退2个操作
(3)请如何获得屏幕的分辨率

function testscreen(){
				//获取宽
				var w = window.screen.width;
				//获取长
				var h = window.screen.height;
				alert(w+"*"+h);
			}

4.DOM结构节点类型
(1)请简述DOM节点的分类有哪些
元素节点，属性节点，文本节点
(2)节点之间的关系有哪些
父子关系，兄弟关系
(3)请简述我们都可以操作DOM对象的哪些内容
1.查询元素（进行操作元素、或者元素的属性、文本）
2.操作文本
3.操作属性
4.操作CSS样式（一个特殊的属性style）
5.操作元素
5.DOM编程获得元素的方式
(1)如何获得id 名称为 inw2的所有元素对象

var obj = document.getElementById(“inw2”);

(2)如何获得当前节点对象的下一个节点对象，不包含空白节点元素

var obj = document.getElementById(“id”);
Obj.nextElementSibling

(3)请写出常使用的间接获得对象的方式
间接获得对象的方式：
1）childNodes 获得所有子节点
2）parentNode 获取直系父级节点
3）previousSibling 上一个节点
4）previousElementSibling 不含空白的上一个节点
5）nextSibling 下一个节点
6）nextElementSibling 不含空白的下一个节点

6.DOM编程-操作元素属性
(1)获得元素属性的方式有几种，请说明

/*获取id为username的对象*/
				var inp1 = document.getElementById("username");
				/*获取元素的属性方式一*/
				var type = inp1.type;
				var name = inp1.name;//这里获取到的name是实时的name值
				var value = inp1.value;
//				alert(type+"---"+name+"---"+value);
/*获取元素的属性方式二*/
				var type2 = inp1.getAttribute("type");
				var name2 = inp1.getAttribute("name");
				var value2 = inp1.getAttribute("value");
//				alert(type2+"-----"+name+"-----"+value);

(2)操作元素属性的方式有几种，请简要说明

/*操作元素的属性方式一*/
				/*inp1.type = "button";
				inp1.value = "zhangsan"*/
/*操作元素的属性方式二*/
				inp1.setAttribute("type","button")

7.DOM编程-操作元素样式
(1)通过js给一个对象增加css样式的方式有几种。
两种
通过更改行内样式的属性改变css样式
通过修改行内样式className属性增加css样式

function demo1(){
				
				/*获取id为div_1的对象*/
				var div = document.getElementById("div_1");
				var hi = div.style.height;
				var wi = div.style.width;
				
//				alert(hi+"-----"+wi);
				div.style.height = "300px";
				div.style.width = "300px";
				div.style.backgroundColor = "darkseagreen";
				
				div.className = "divs";
			}
.divs{
				border: 3px solid springgreen;
			}

(2)className 该方式使用的场景是什么？
提前已经定义好了该样式，才能使用
(3)使用js的方式在获得元素css样式的时候有什么缺点?
只支持获取行内样式
8.DOM编程-操作元素文本和值
(1)请说出 innerHTML和innerText的区别
innerHTML可以识别标签，innerText只能识别文本
(2)请说出select、textarea 这两个标签如何取值。
Select和textarea这两个标签通过属性value取值
(3)innerHTML和innerText 在取值的时候的使用场景是什么?
除了select和textarea两个双标签外，用于双标签中，如果获取纯文本时用innerText，如果是获取HTML内容时用innerHTMl
9.DOM编程-操作元素
(1)使用appendChild()方法的时候是追加到指定元素的什么位置?
使用appendChild()方法的时候追加到指定元素的内部，称为指定元素的子标签
(2)请问replaceChild(arg1,arg2)在使用的时候参数的含义是什么?
arg1节点替换arg2节点
(3)请问如何删除一个节点对象
先通过removeChild方法删除这个结点对象的子元素对象，再通过remove方法删除自身。
10.DOM编程实例1
(1)请完成对课程中对节点元素的操作案例

	
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			tr{
				height: 70px;
			}
			th,td{
				width: 150px;
				text-align: center;
			}
			
		</style>
		<script>
			function addNode(){
				/*创建节点td*/			
				var tr = document.createElement("tr");
				/*创建节点td*/
				var td1 = document.createElement("td");
				td1.innerHTML = "<input type='text'style='width: 100px;' onblur='save(this)' />"
				/*创建节点td*/
				var td2 = document.createElement("td");
				td2.innerHTML = "<input type='text'style='width: 100px;' onblur='save(this)' />"
				/*创建节点td*/
				var td3 = document.createElement("td");
				td3.innerHTML = "<input type='button' value='添加' onclick='addNode()' />"+"<input type='button' value='删除' onclick='deleteNode(this)' />"
				/*获取表格对象*/
				var tal = document.getElementById("tal");
				tal.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
			}
			function save(thi){
				var td = thi.parentNode;
				td.innerText = thi.value;
			}
			function deleteNode(thi){
				var tr = thi.parentNode.parentNode;
				tr.remove();
			}
		</script>
	</head>
	<body>
		<table align="center" border="1px" id="tal"> 
			<tr>
				<th>图书名称</th>
				<th>图书价格</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>javaSE</td>
				<td>19</td>
				<td>
					<input type="button" name="" id="" value="添加" onclick="addNode()"/>
					<input type="button" name="" id="" value="删除" />
				</td>
			</tr>
			<tr>
				<td>javaEE</td>
				<td>23</td>
				<td>
					<input type="button" name="" id="" value="添加"  onclick="addNode()"/>
					<input type="button" name="" id="" value="删除" />
				</td>
			</tr>
		</table>
	</body>
</html>

11.DOM编程实例2
(1)请完成对课程中背景图片更换的操作案例

 		
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-image: url(img/bjsky.jpg);
				background-repeat: no-repeat;
				background-size: 1360px 768px;
			}
			a{
				color: #FFFFFF;
				font-size: 24px;
				text-decoration: none;
			}
			a:hover{
				color: red;
			}
			#div1{
				width: 200px;
				height: 200px;
				background-color: gray;
				text-align: center;
			}
			#span{
				font-size: 20px;
				color: burlywood;
			}
			#div1 input{
				width: 50px;
				height: 30px;
				background-color: burlywood;
			}
		</style>
		<script>
			var i = 0;
			function changebg(){
				var arr = ["bjsky.jpg","mayun.jpg","simple.jpg","sxt.jpg","zgc.jpg"];
				if(i<arr.length-1){
					i++;
				}else{
					i=0;
				}
				var bod = document.getElementById("bod");
				bod.style.backgroundImage = "url(img/"+arr[i]+")";
			}
			function change(){
				//获取div对象
				var div = document.getElementById("div1");
				div.style.marginTop = Math.floor(Math.random()*300)+"px" ; 
				div.style.marginLeft = Math.floor(Math.random()*600)+"px";
			}
			function show(){
				var bod = document.getElementById("bod");
				bod.style.backgroundImage = "url(https://www.jiuwa.net/tuku/20190423/zNvWMMpG.gif)"
				var div = document.getElementById("div1");
				div.style.display = "none";
			}
		</script>
	</head>
	<body id="bod">
		<a href="javascript:changebg()">点击更换背景</a>
		<div id="div1">
			<span id="span">请选择您的职业</span>
			<br /><br /><br /><br />
			<input type="button" name="" id="" value="乞丐" onclick="show()"/>
			<input type="button" name="" id="" value="战士" onmouseover="change()"/>
		</div>
	</body>
</html>

12.表单元素操作
(1)readonly和disabled的区别是什么？
Readonly和disabled都不能对数据进行操作，但是readonly可以提交到后台，disabled不能提交到后台
(2)使用JS提交表单的方式有几种，请说明使用的场景。
JS提交表单的方式:
1)使用onsubmit事件，一般用于表单提交前的表单验证
2)使用document.fom.submit()方法，页面只有一个表单的时候，手动提交表单
获取根据id获取表单元素，再使用submit()方法，页面只有多个表单的时候，自定义表单提交