Javascript 学习总结（转发版）

GGYY__

已于 2022-05-07 17:49:33 修改

阅读量561

点赞数

文章标签： javascript

于 2022-05-04 23:54:11 首次发布

本文链接：https://blog.csdn.net/weixin_52682120/article/details/124577773

版权

Javascript基础专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、Javascript 简介

1.1Javascript 的组成

ECMAScript + DOM + BOM

注：ECMAScript 只是一个标准

1.2 Javascript 的特点

①解释型语言：无需编译，直接运行。
②动态语言：变量可变。
③基于原型的面向对象语言。
④类似Java的语法结构：for、if、while等语法和java基本一致。
⑤严格区分大小写。

1.3 Javascript 的使用

①标签引用

    <script type="text/javascript">
			prompt("请输入你的年龄：");
	</script>

②外部引用：src属性

		 <!-- scr属性：引入外部文件 -->
		<script type="text/javascript" src="script.js">
		 //alert("你好");    //引入外部文件中不能在写代码（无效）
		</script>
			
			<script type="text/javascript">
				alert("你好");   //写,在创一个script标签
			</script>

1.4 Javascript 的输出语句

①页面输出：document.write()
②控制台输出：console.log()
③窗口弹出：alert()

1.5 注释

单行：//
多行：/****/

2、Javascript 的基本语法

2.1 标识符：”厦大“ 、$

注：ECMAScript标识符采用驼峰式命名法。

2.2 字面量：常量

2.3 变量：a

变量的声明与赋值：var a=10

2.4 数据类型：5+1

五种基本类型+Object

字符串型（String）
数值型（Number）
布尔型（Boolean）
null型（Null）
undefined型（Undefined）
注：typeof 数据 -----用来检查一个变量的数据类型

①String 字符串：" "、‘’

②Number：整数和浮点数
Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）
注：以上三种特殊数字也是Number类型

③Boolean：true、false

④Undefined：声明但没有初始化时，只有一个undefined

⑤Null：空对象，typeof 返回Objiect，只有一个null

2.5 强制类型转换

①转换为String类型
方法一：toString()

		<script>
			var a=123;
			c=a.toString();
			console.log(c);
			console.log(typeof c);
		</script>

注意：
该方法不会影响原变量，只将转换后的结果返回。
null和undefined没有该方法，调用会报错。

方法二：String()

		<script>
			var cc=22;
		    cc=	String(cc);
			console.log(cc);
			console.log(typeof cc);
			console.log("***************");
			var dd=undefined;
			dd=	String(dd);
			console.log(dd);
			console.log(typeof dd);
			
			console.log("***************");
           var dd=Boolean();
			dd=	String(dd);
			console.log(dd);        //false
			console.log(typeof dd); //string
		</script>

注意：
对于Number和String实际调用的还是toString方法。
null和undefined不会调用toString方法，而是直接转换为"null"和"undefined"。

方法三：任意数据类型 +

		<script>
			var dd=22;
			dd=dd+"";
			console.log(typeof dd)
		</script>

②转化为Number类型
方法一：Number()
可以用来转化

3、循环语句

4、对象

4.1 创建的对象的两种方式

第一种方式： new Object()

	<script>
			//第一种方式 new Object()
			var person=new Object();
			person.name="小李";
			person.age=24;
			console.log(person);
		</script>

第二种方式： {}

	<script>
			//第二种方式 {}
			var personTwo={
				name:"小郭",
				age:24
			};
			console.log(personTwo);
		</script>

4.2 两种属性访问

		<script>
			console.log(person.age);
			console.log(person["age"]);
		</script>

4.3 delete关键字删除属性

delete 对象.属性名

       <script>
			delete personTwo.name
			delete personTwo["age"];
		</script>

4.4 for…in 遍历对象

      <script>
			var personThree={
				person:"哈哈",
				name:16,
				hobby: "看电影"
			}
			for(var per in personThree){
				var person=personThree[per];
				console.log(per +":"+person);  // person:哈哈   name:16  hobby:看电影
			}
			   console.log(person);    //看电影
		</script>

5、函数

5.1 函数的概念

函数是一连串语句的集合，只有调用才会运行。
函数也是对象，用typeof检查时返回一个function。

5.2 创建对象的方式

第一种：使用函数对象的方式创建（不用）
格式：new Function(" ")

   <script>
		var fun=new Function(
		'console.log("函数对象--创建函数");'
			)
		fun();
  </script>

第二种：使用函数声明来创建（常用）
格式：new Function(" ")

   <script>
			function fun2(){
				console.log("函数声明--创建函数");
			}
			fun2();
  </script>

第三种：使用函数表达式来创建（常用）
用函数表达式创建的函数也叫匿名函数。
格式：new Function(" ")

   <script>
			var fun3=function(){
			console.log("函数表达式--创建函数");	
			}
			fun3();
  </script>

5.3 函数的调用

多的参数不会赋值，少了就undefined。

   <script>
			var fun4=function(num1,num2){
				var result=num1+num2;
				console.log(result);
			}
			fun4(5,5);
  </script>

5.4 return 函数的返回值

   <script>
		var fun5=function(num1,num2){
				var result=num1+num2;
				return result;
			}
			var sum=fun5(5,10);
			console.log(sum);
			
  </script>

5.5 立即执行函数 ()()

立即执行函数只执行一次。

   <script>
		(function() {
				console.log("小李，小李");
			})();
  </script>

5.6 对象中的函数

如果一个函数作为一个对象的属性保存，那么就称这个函数为这个对象的方法。即函数在对象中叫方法。

   <script>
			var person={
				name:"小李",
				age:24,
				sayHello:function(){
					console.log(name+"hello");
				}
			}
			person.sayHello(); //hello
  </script>

6、JavaScript 常用的对象

6.1 数组

数组：同类元素的有序集合，从索引0开始读取。
数组也是对象的一种，用typeof检查时返回object。

6.1.1 创建数组方式

第一种方式：对象创建数组 new Array()

		<script>
			var arr=new Array();
			arr[0]=1;
			arr[1]=3;
			arr[2]=5;
			arr[3]=7;
			arr[4]=9;
			arr[5]=11;
			
			for(var i=0;i<arr.length;i++){
				document.write(arr[i]);
			}
		</script>

第二种方式：字面量创建数组 [ ]

		<script>
			var arr2=[1,"2","3",4,5,"7",9,"55"];
			for(var i=0;i<arr2.length;i++){
				document.write(arr2[i]);
			}
		</script>

6.1.2 数组的方法

①添加元素：push() 、unshift()

		<script>
			//尾部添加 push("小李")
			var arr=["小兰","大白","中中"];
			 arr.push("小李","张张");
			console.log(arr);
			
			//首部添加  unshift("小李")
			var arr2=["小兰","大白","中中"];
			 arr.unshift("小李","张张");
			console.log(arr);
		</script>

②删除元素：pop() 、shift()

		<script>
			//尾部删除 pop()
			var arr2=["小兰","大白","中中"];
			 arr2.pop();
			console.log(arr2);
			
		   //首部删除  shift()
			var arr3=["小兰","大白","中中"];
			 var result=arr3.shift();
			 console.log(result);
			console.log(arr2);
		</script>

③遍历数组：forEach
forEach方法中的function回调有三个参数：
第一个参数是遍历的当前元素（必需），
第二个参数是当前元素的索引值（可选），
第三个参数是当前元素所属的数组对象（可选）。

		<script>
			var arr4=["小兰","大白","中中"];
			arr4.forEach(function(value){
				console.log(value);    //小兰 大白 中中
			});
			
			var arr5=["小兰","大白","中中"];
			arr5.forEach(function(value,index){
				console.log(value+"***"+index);    //小兰***0   大白***1   中中***2
			});
	
			var arr6=["小兰","大白","中中"];
			arr6.forEach(function(value,index,obj){
				console.log(value+"****"+index+"****"+obj);
			 //小兰****0****小兰,大白,中中
			//大白****1****小兰,大白,中中
			//中中****2****小兰,大白,中中
			});
		</script>

④元素提取：slice()
从数组中提取指定元素封装到一个新数组中，不改原来元素数组。

		<script>
			var arr7=["小兰","大白","中中","小明","哈哈"];
			var result=arr7.slice(1,3); 
			console.log(result);  //"大白","中中"
			var result=arr7.slice(3);
			console.log(result);  //"小明","哈哈"
			var result=arr7.slice(1,-1);
			console.log(result);  //"大白","中中","小明"
			var result=arr7.slice(-1); //"哈哈"
			console.log(result); 
			       //原数组
		    console.log(arr7); //"小兰","大白","中中","小明","哈哈"
		</script>

⑤删除数组中指定的元素：splice()
从数组中删除指定元素，会影响原数组。

		<script>
			var arr8=["小兰","大白","中中","小明","哈哈"];
			var result=arr8.splice(1,2);
			console.log(result);  //"大白","中中"
			
			var result=arr8.splice(1,1,"红红","晃晃");
			console.log(arr8);  //['小兰', '红红', '晃晃', 哈哈']
		</script>

⑥数组连接：concat()

		<script>
			var arr7=["小兰","大白","中中"];
			var arr8=["一一","二二","三三"];
			var result=arr7.concat(arr8);   //连接作用
			console.log(result);
		</script>

⑦数组转为字符串：join()
在join()中可以指定一个字符串作为参数，这个参数将成为数组元素的连接符，且不会对原数组产生影响。

		<script>
			var arr9=["一一","二二","三三"];
			var result=arr9.join("@");
			console.log(result);//一一@二二@三三
		</script>

⑧数组反转：reverse()
数组反转，会影响原数组。

		<script>
			var arr10=["一一","二二","三三"];
			var result=arr10.reverse();
			console.log(result);  // "三三" "二二"  "一一"
		</script>

⑨数组排序：sort()
数组安州Unicode编码排序，会影响原数组。

		<script>
            var arr10=[7,3,8,2,6,4];
			var result=arr10.sort();  //2 3 4  6 7 8
			console.log(result);  
		</script>

6.2 函数对象

6.2.1 call() 和apply()

call() 和apply()都是函数对象的方法，需要通过函数对象来调用，
call() 方法可以将实参在对象之后依次传递。
apply()方法需要将实参封装到一个数组中统一传递。

fun.call(obj,2,3);

<script>
			function fun(a,b){
				console.log(a);
				console.log(b);
				console.log(this);
			}
			var obj={
				name:"obj",
				sayName:function(){
					console.log(this.name);
				}
			};
			fun(2,3);
			fun.call(obj,2,3);
			console.log("-------------------");

	
		</script>

fun.apply(obj,[2,3])

<script>
				function fun(a,b){
				console.log(a);
				console.log(b);
				console.log(this);
			}
			var obj={
				name:"obj",
				sayName:function(){
					console.log(this.name);
				}
			};
			fun(2,3);
			fun.apply(obj,[2,3]);
		</script>

6.2.2 arguments 参数

arguments是一个类数组对象，它通过索引来操作数据。

<script>
			function fun(a,b){
				console.log(arguments[0]);
				console.log(arguments[1]);
				console.log(arguments.length);
				console.log(arguments.callee); 
				console.log(arguments.callee==fun);  //true
			}
			fun("hello","world");
		</script>

6.3 Date对象

封装当前代码执行的时间。

		<script>
			var date=new Date();
			
			console.log(date); //2022 22:17:47 
			console.log(date.getFullYear()); //2022
			console.log(date.getMonth()); //4 (0-11)
			console.log(date.getDate()); //6
			console.log(date.getHours());//22   (0-23)
			console.log(date.getMinutes()); //22  (0-59)
			console.log(date.getSeconds());  //29  (0-59)
			console.log(date.getMilliseconds()); //761 (0-999)
			
		</script>

7、DOM 和BOM

7.1 DOM 对象

7.1.1 概念

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
Javascript 能操作Html和CSS中的元素和属性。

7.1.2 查找Html元素的方法

文档对象代表网页,，如果要访问 HTML 页面中的任何元素，就从访问 document 对象开始。

document.getElementById(id) | 通过元素 id 来查找元素
document.getElementsByTagName(name) | 通过标签名来查找元素。
document.getElementsByClassName(name) | 通过类名来查找元素。
document.querySelector(CSS选择器) | 通过CSS选择器选择一个元素。
document.querySelectorAll(CSS选择器)| 通过CSS选择器选择多个元素。

7.1.3 获取 HTML 的值

元素节点.innerText：获取 HTML 元素的 inner Text。
元素节点.innerHTML：获取 HTML 元素的 inner HTML。
元素节点.属性：获取 HTML 元素的属性值。
元素节点.getAttribute(attribute)：获取 HTML 元素的属性值。
元素节点.style.样式：获取 HTML 元素的行内样式值。

7.1.4 改变 HTML 的值

元素节点.innerText = new text content ：改变元素的 inner Text。
元素节点.innerHTML = new html content：改变元素的 inner HTML。
元素节点.属性 = new value：改变 HTML 元素的属性值。
元素节点.setAttribute(attribute, value)：改变 HTML 元素的属性值。
元素节点.style.样式 = new style：改变 HTML 元素的行内样式值。

<body>
		<button id="btn">我是按钮</button>
		<div id="box"></div>
		<a id="a" href="">打开百度，你就知道！</a>
		
		<script>
			var btn = document.getElementById("btn");
			btn.innerText = "我是JavaScript的按钮";
				
			var box = document.getElementById("box");
			box.innerHTML = "<h1>我是Box中的大标题</h1>";
			
			 var a = document.getElementById("a");
			a.href="https://www.baidu.com";
			
			 var a = document.getElementById("a");
		     a.setAttribute("href", "https://www.baidu.com");
			
		</script>
	</body>

7.2 DOM文档事件

7.2.1 概念

HTML事件可以**触发浏览器中的行为，**比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

7.2.2 窗口事件

onblur 当窗口失去焦点时运行脚本。
onfocus 当窗口获得焦点时运行脚本。
onload 当文档加载之后运行脚本。
onresize 当调整窗口大小时运行脚本。
onstorage 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    window.onblur = function () {
        console.log("窗口失去焦点");
    };

  window.onfocus = function () {
        console.log("窗口获取焦点");
    };
 
    window.onload = function () {
        console.log("Hello,World");
    };

    window.onresize = function () {
        console.log("窗口大小正在改变");
    };

	</script>
</body>

7.2.2 表单事件

在HTML表单中触发。

onblur 当元素失去焦点时运行脚本。
onfocus 当元素获得焦点时运行脚本。
onchange 当元素改变时运行脚本。
oninput 当元素获得用户输入时运行脚本。
oninvalid 当元素无效时运行脚本。
onselect 当选取元素时运行脚本。
onsubmit 当提交表单时运行脚本。

<body>
<form>
    <input type="text" id="text">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var textInput = document.getElementById("text");

    /* 当文本框获取焦点，文本框背景为红色 */
    textInput.onfocus = function () {
        this.style.background = "red";
    };

    /* 当文本框失去焦点，文本框背景为绿色 */
    textInput.onblur = function () {
        this.style.background = "green";
    };
	
	 /* 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台 */
	textInput.onchange = function () {
	     console.log(this.value);
	};
	
    /* 当文本框内容改变时，立即将改变的内容输出到控制台 */
    textInput.oninput = function () {
        console.log(this.value);
    };
	
   /* 当选中文本框的内容时，输出“您已经选择了文本框内容！” */
    textInput.onselect = function () {
        console.log("您已经选择了文本框内容！");
    };
	
    /* 当提交表单的时候，在控制台输出“表单提交” */
    myform.onsubmit = function () {
        console.log("表单提交");
        return false;/* 用来阻止表单提交的，你不写它会跳转请求 */
    };

</script>
</body>

7.2.3 键盘事件

通过键盘触发事件。

onkeydown：当按下按键时运行脚本。
onkeyup：当松开按键时运行脚本。
onkeypress：当按下并松开按键时运行脚本。

7.2.4 鼠标事件

通过鼠标触发事件。

onclick：当单击鼠标时运行脚本。
ondblclick：当双击鼠标时运行脚本。
onmousedown：当按下鼠标按钮时运行脚本。、
onmouseup：当松开鼠标按钮时运行脚本。
onmousemove：当鼠标指针移动时运行脚本。
onmouseover：当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
onmouseout：当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
onmouseenter：当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
onmouseleave：当鼠标指针移出元素时运行脚本，可以阻止冒泡。
onmousewheel：当转动鼠标滚轮时运行脚本。
onscroll：当滚动元素的滚动条时运行脚本。

<body>
<div id="box" style="width: 100px;height: 100px;background: black;"></div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");

    /* 当鼠标移入div，背景颜色变为红色 */
    box.onmouseenter = function () {
        this.style.background = "red";
    };

    /* 当鼠标移出div，背景颜色变为绿色 */
    box.onmouseleave = function () {
        this.style.background = "green";
    };
</script>
</body>

GGYY__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 学习总结（转发版）

1、Javascript 简介1.1Javascript 的组成ECMAScript + DOM + BOM注：ECMAScript 只是一个标准1.2 Javascript 的特点①解释型语言：无需编译，直接运行。②动态语言：变量可变。③基于原型的面向对象语言。④类似Java的语法结构：for、if、while等语法和java基本一致。⑤严格区分大小写。1.3 Javascript 的使用①标签引用 <script type="text/javascript">
复制链接

扫一扫