JavaScript超全的知识点总结【二】

coleak

已于 2023-03-26 14:45:01 修改

阅读量993

点赞数 1

分类专栏： # JavaScript 文章标签： javascript 前端 html

于 2023-02-04 23:01:07 首次发布

本文链接：https://blog.csdn.net/qq_63701832/article/details/128885007

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前文基础

【JS】快速入门DOM_coleak的博客-CSDN博客

一篇文章带你学完JavaScript基础知识，超全的JavaScript知识点总结_coleak的博客-CSDN博客

嵌入方式

内嵌式

理论上js可以写在任何第一个地方但是一般写在head标签里或者 body下

<script type="application/javascript">
alert("内嵌式");
</script>
<script>alert("内嵌式");</script>

外链式

新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。

<script src="js文件路径地址">这里不能写js语句</script>

行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性

onclick单击事件
<input type="button" value="coleak" onclick="alert('xss');">
<button onclick="alert('xss');">coleak</button>

函数进阶

匿名函数（没有名字的函数称为匿名函数）

每3000毫秒打印一个123

<script type="text/javascript">
setInterval(function(){console.log(123);},3000)
</script>

自执行函数（创建函数并且自动执行）

<script type="text/javascript">
(function(arg){console.log(arg);})(1);
</script>

字典

输出字典元素

<script type="text/javascript">
var dict = {'k1':"coleak",'k2':'moon','age':18};
for(var item in dict)
{
console.log(dict[item]);
}
</script>

删除元素

<script type="text/javascript">
var dict = {'k1':"coleak",'k2':'moon','age':18};
for(var item in dict)
{
console.log(dict[item]);
}
delete dict['age']
delete dict.k1;
for(var item in dict)
{
console.log(dict[item]);
}
</script>

面向对象

JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。

方法一

<script type="text/javascript">
function Person(my_name) {
     //构造函数里面的方法和属性
    this._name = my_name;
    this.getName = function ()
    {
         console.log(this._name);
     };
     this.setName = function (Setname) 
     {
         this._name = Setname;
     };
 }
 
 var p = new Person("张三");
 p.getName();
 p.setName("李四");
 p.getName();
</script>

方法二

<script type="text/javascript">
class Person {
     constructor(name) 
     {
         this._name = name;
     }
     getName() 
     {
         console.log(this._name);
     }
     setName(name)
     {
        this._name = name
    }
}
 let p = new Preson('张三')
 p.getName();  // 张三
 p.setName('李四');
 p.getName();  // 李四
</script>

三目运算符

表达式1?表达式2:表达式3

当我的表达式1成立时执行表达式2 否则执行表达式3

<script type="text/javascript">
var max = 2>1?'>':'<';
alert(max);
</script>

转义

escape()函数

定义和用法
escape() 函数可对字符串进行编码,该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他所有的字符都会被转义序列替换。

encodeURI()函数

encodeURI() 函数可把字符串作为 URI 进行编码

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。其中encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号

总结

escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent（指请求参数）应当是最常用的，它可以讲参数中的中文、特殊字符进行转义，而不会影响整个URL。

案例

<script type="text/javascript">
document.write(escape("http://test.cn/index.html") + "<br />")
document.write(escape("?!=()#%&"))
</script>

unescape还原

http%3A//test.cn/index.html
%3F%21%3D%28%29%23%25%26

document.write(encodeURI("my test.php?name=ståle&car=saab") + "<br />")
document.write(encodeURI("?!=()#%&"))

decodeURI还原

my%20test.php?name=st%C3%A5le&car=saab
?!=()#%25&

url编码

<script type="text/javascript">
document.write(encodeURIComponent("http://test.cn/index.html") + "<br />")
document.write(encodeURIComponent("?!=()#%&"))
</script>

codeURIComponent还原

http%3A%2F%2Ftest.cn%2Findex.html
%3F!%3D()%23%25%26

其他

console.log 终端输出

alert 弹出框

confirm 确认框标题 true false

url和刷新

location.href 获取url

location.href ='url' 重定向

location.reload() 重新加载

定时器

setInterval()

clearInterval()

<script>

var str="Hello world!";
document.write(str.substring(3)+"<br>");
document.write(str.substring(3,7));

</script>

lo world!（3~length-1，即为后文全输出）
lo w（3~6）

charAt() 方法用于返回指定索引处的字符。索引范围为从 0 到 length() - 1

onblur 当用户离开input输入框时执行一段Javascript代码

综合案例

走马灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="c1">
		 	coleak的走马灯测试内容
		</div>
		<script>
			function p()
			{
				var tag =document.getElementById('c1');
				var t = tag.innerText;
				var l = t.charAt(0);
				var s = t.substring(1,t.length);
				tag.innerText = s+l;
			}
			setInterval('p()',350);
		</script>
	</body>
</html>

搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form method="get" action="">
			<input  id='c1' type="text" value="请输入关键字搜索" onfocus="f1();" onblur="f2();" />
			<input type="submit" value="搜索" />
		</form>
		<script>
			function f1(){
				var tag = document.getElementById('c1');
				var c = tag.value
				if(c =='请输入关键字搜索'){
					tag.value='';
				}
			}
			function f2(){
				var tag = document.getElementById('c1');
				var c = tag.value;
				if(c.length==0){
					tag.value='请输入关键字搜索';
				}
			}
		</script>
	</body>
</html>