补充学习javascript

王的蓝色大海

于 2021-07-05 19:49:42 发布

阅读量47

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/m0_57150836/article/details/118496810

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

date 对象

常用方法 toLocaleString 返回当前对象对应的时间本地字符串格式

getTime 获取毫秒值

getFullYears 获取年 getMonth 获取月 getHours 获取时

getMinutes 获取分 getDate 获取日 getSeconds 获取秒

全局函数

parseInt() 将字符串解析成为一个整数

parseFloat() 将字符串解析成为一个浮点数

isNaN 判断是否是一个NaN类型的数据

encodeURI 将字符串编码为URI

decodeURI 解码某个URI编码

普通字符串解析JavaScript 代码

eval() 接受一个字符串校验字符串的内容是否为脚本代码，是直接运行不是不执行

URL 统一资源定位符 URI统一资源标识符

window对象

frameset 分割标签，不能和body标签一起使用 frame 引入其他界面 iframe可以将window也绵绵进行分割，是一个框架标签可以和body 一起使用

confrim 确认框架

返回值true false

时间周期

clearInterval 取消setInterval 设置的timeout周期

setInterval 设置时间周期循环调用方法

浏览器的打开与关闭

open close

history 常用方法

back forward go

back 返回上一个访问过的网页

forword 返回下一个访问过的网页

go 去往指定的网页

dom 对象

作用,将HTML文件加载为dom对象方便js操作

getElementById() 通过ID指定对象

getElementsByName() 返回带有指定name的对象集合

getElementsTagName() 返回指定标签名称的对象集合

querySelector() 根据ID选择器获取元素对象

querySeletorAll() 根据css选择器获取元素对象返回的是数组

getElementsClassName() 通过指定的类名获取对象返回的是数组

innerHTML 获取标签内的的所有内容不包含标签

innertext 获取标签内的纯文本内容

outhtml 获取标签内的所有内容包含标签本身

innerHTML =" "覆盖原有内容

innerHTML +=" "在末尾添加新的内容

常用事件 onclick 单击事件ondblclick双击事件

onblur 失去焦点事件 onfoucs 获得焦点事件

onmousedown 鼠标被按下

onmouseup 松开

onmousemove 移动

onmouseover 鼠标移动到某元素上

onmouseout 鼠标离开某元素

onkeydown 键盘某个按键被按下

onkeyup 键盘某个按键被松开

onkeypress 键盘某个按键被按下并松开

操作节点

添加子标签

<body>
		<ul id="u1">
			<li>胡歌</li>
			<li>杨幂</li>
			<li>刘亦菲</li>
		</ul>
		<button id="bn1" type="button">添加子标签</button>
		<script type="text/javascript">
			window.onload=function(){
				var b =document.getElementById("bn1");
				b.onclick=function(){
					var a =document.getElementById("u1");
					var q =document.createElement("li");
					var w =document.createTextNode("鹿晗");
					q.appendChild(w);
					a.appendChild(q);
				}
			}
		</script>
	</body>

删除子标签

	<script>
			function demo(){
				//指定删除子标签
				var node = document.getElementById("x1");
				//删除子标签
				node.parentNode.removeChild(node);
			}
		</script>
	</head>
	<body>
		
		<ul id="myul">
			<li>jack</li>
			<li id="x1">rose</li>
			<li>tom</li>
			<li>mary</li>
		</ul>
		
		<input type="button" onclick="demo()" id="inputid" value="删除子标签" />
	</body>

删除全部

要根据for循环,必是从后往前循环,否则不能删除全部

setAttribute(属性名属性值) 添加属性

for循环遍历所有需要添加属性的标签

删除属性

通过for循环遍历所有需要删除属性的标签,removeAttribute

操作样式的三种方式

       <style>
            .mpp {
                background-color: orange;
            }
        </style>
    </head>
    <body>

        <p id="p1">1. 设置一个css样式</p>
        <p id="p2">2. 批量设置css样式</p>
        <p id="p3">3. 通过class设置样式</p>

        <script>
            let p1 = document.getElementById("p1");//获取段落标签
            let p2 = document.getElementById("p2");//获取段落标签
            let p3 = document.getElementById("p3");//获取段落标签

            // 1. 设置一个css样式
            // 设置字体大小
            p1.style.fontSize = "20px";
            // 设置背景颜色
            p1.style.backgroundColor = "green";
            // 设置字体颜色
            p1.style.color = "red";

            // 2. 批量设置css样式
            // 缺点：写起来太痛苦，而且还有耦合性
            p2.style.cssText = "border:2px solid red; font-size:40px";

            // 3. 通过class设置样式
            p3.className = "mpp";
        </script>
    </body>