day033 -- js

最新推荐文章于 2024-09-14 18:52:56 发布

hai_qi

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量79

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/hai_qi/article/details/126556982

版权

1.常见弹框函数

返回值	方法	功能
boolean	confirm()	页面弹出询问，确定为true，取消为false
	alert(?)	页面弹出？内容
boolean	prompt()	对话框,会返回输入的值

2.事件

2.1事件类型

事件名称	描述
onchange	HTML 元素内容改变
onblur	输入框失去焦点
onfocus	输入框获得焦点
onclick	用户点击 HTML 元素
ondblclick	用户双击HTML元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘弹起
onkeydown	用户按下键盘按键
onkeypress	按压键盘
onload	浏览器已完成页面的加载
onsubmit	表单提交

2.2事件绑定

1.document.getElementById(),获得元素对象（通过id）
2.div1.事件名称 = function(){事件绑定
        执行新建程序内容
    }

3.DOM操作

操作DOM,就是对DOM树操作,可以找到某个或者某些元素,修改元素的属性内容以及样式,创建新的节点,删除节点.

3.1查找元素

通过id查找（id具有唯一性，只能使用一次）

<button id="b1">点击</button>
var e = document.getElementById("b1");

3.2通过标签名查找元素

<标签>内容</标签>
// 通过标签名,获得同名所有元素对象,返回是数组
var ps = document.getElementsByTagName("标签");
//因为使用标签查找获取的值在数组中，所以需要通过遍历获取
for(var i = 0;i < ps.length;i++) {
    console.log(ps[i])//返回的内容包括标签，是对象
}

3.3通过类名获取元素的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p class="p1">唧唧复唧唧,木兰当户织</p>
		<p class="p1">不闻机杼声,惟闻女叹息</p>
		<!-- <p>问女何所思,问女何所忆</p>; -->
		<script type="text/javascript">					
			// 通过标签名,获得同名所有元素对象,返回是数组
			var ps = document.getElementsByClassName("p1");
			console.log(ps);
			// 遍历数组,获得每个对象
			for(var i = 0;i < ps.length;i++) {
			    console.log(ps[i])
				// 获取的是值
				console.log(ps[i].innerText);
			}
		</script>
	</body>
</html>

3.4查找和设置元素属性(重点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><span>噫吁嚱，危乎高哉！</span></p>
				<p><span>蜀道之难，难于上青天！</span></p>
				<p><span>蚕丛及鱼凫，开国何茫然！</span></p>
				<button onclick="changeHTML()"> 修改文本内容HTML</button>
				<button onclick="changeText()"> 修改文本内容Text</button>
		<script type="text/javascript">
			// 获取元素对象
			var p = document.getElementsByTagName("p");
			function changeHTML(){
				// 通过遍历获取单个元素对象(包含属性，标签，内容)
				for (var i = 0; i < p.length; i++) {
					// console.log(p[i]);
					// 设置内部内容,如果有标签,会解析标签
					p[i].innerHTML = "<span>好好学习</span>";
				}
			}
			function changeText(){
				// 通过遍历获取单个元素对象
					for (var i = 0; i < p.length; i++) {
						// console.log(p[i]);
						// 设置内部内容,如果有标签,不解析,就当做文本内容直接展示
						p[i].innerText = "<span>好好学习</span>";
					}
				
			}
		</script>
	</body>
</html>

3.5查找和设置元素CSS样式(重点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1" style="background-color: red;width: 300px;height: 300px;">Css</div>
				<button onclick="getCSSAttribute()">点击获得css属性</button>				
				<button onclick="setCSSAttribute()">设置css属性</button>
		<script type="text/javascript">
			var css = document.getElementById("d1");
			function getCSSAttribute(){
				// 通过获得元素.属性（style）加上对应的属性获取
				console.log(css.style.width);
				console.log(css.style.backgroundColor);
				console.log(css.style.height);
			}
			function setCSSAttribute(){
				// 通过获得元素.属性（style）加上对应的属性获取
				// 重新赋值即为修改对象元素
				var setwidth = css.style.width = "200px";
				var setColar = css.style.backgroundColor = "blue";
				var setHeight = css.style.height = "200px";
				console.log(setwidth);
				console.log(setColar);
				console.log(setHeight);
			}
		</script>		
	</body>
</html>

4.1创建元素

document.createElement("标签名")

4.2创建文本节点

document.createTextNode("文本内容")

4.3追加元素

元素对象.appendChild(对象);

4.4删除元素

元素对象.removeChild(对象);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<input id = "d1"/>
	<button onclick="add()">添加</button>
	<button onclick="remove()">删除</button>
	<div id = "d2">	
	
<li>武动乾坤</li>
<li>斗破苍穹</li>
<li>九天星辰诀</li>
<li>完美世界</li>

	</div>
	<body>
		<script type="text/javascript">
			
			function add(){
				var va = document.createElement("li");
				var va3 = document.getElementById("d1").value;
				var va1 = document.createTextNode( va3 );

				va.appendChild(va1);
				document.getElementById("d2").appendChild(va);			
				document.getElementById("d1").value = "";
			}
			
			function remove(){
				var va = document.getElementById("d2");
				var va1 = document.getElementsByTagName("li");
				var va2 = document.getElementById("d1").value;
				for (var i = 0; i < va1.length; i++) {
					if(va2 == va1[i].innerText)
					if(confirm("确定是否删除?")) {
						va.removeChild(va1[i])
					}
										
				}
					 // va.removeChild(va1[va1.length-1]);				
			}
			
		</script>
		
	</body>
</html>