细学JavaScript笔记

最新推荐文章于 2022-10-18 10:51:26 发布

上课不要睡觉了

最新推荐文章于 2022-10-18 10:51:26 发布

阅读量354

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/XQC_KKK/article/details/106446934

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1、js的String对象
** 创建String对象
*** var str = “abc”;

** 方法和属性（文档）
	*** 属性 length：字符串的长度

	*** 方法
	（1）与html相关的方法
		- bold()：使用粗体显示字符串
		- fontcolor()： 方法用于按照指定的颜色来显示字符串
		- fontsize()： 使用指定的尺寸来显示字符串

		- link()： 方法用于把字符串显示为超链接
			**** str4.link("https://www.baidu.com/?tn=48021271_22_hao_pg")

		- sub()： 把字符串显示为下标
		
		- sup()： 把字符串显示为上标 

	（2）与Java相似的方法
		- concat()： 连接字符串
			** //concat方法
			var str1 = "abc";
			var str2 = "defg";
			document.write(str1.concat(str2));

		- charAt()： 方法可返回指定位置的字符
			** var str3 = "abcdefg";
			document.write(str3.charAt(20));//字符位置不存在返回空字符

		- indexOf()： 方法可返回某个指定的字符串值在字符串中首次出现的位置
			** var str4 = "poiuytr";
			document.write(str4.indexOf("w"));//如果字符不存在，返回-1

		- split()： 方法用于把一个字符串分割成字符串数组
			** var str5 = "p-o-i-u-y-t-r";
			var arr1 = str5.split("-")
			document.write("length:"+arr1.length);

		- replace()： 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
			* 传递两个参数：
				-- 第一个参数是原始字符
				-- 第二个要替换成的字符

		- substr() 从起始索引号提取字符串中指定数目的字符
		与 substring() 提取字符串中两个指定的索引号之间的字符 
			* var str7 = "abcdefghijkmnlopqrstuvwxyz";
			document.write(str7.substr(5,3));//从第5位开，向后截取3
			document.write("<br/>");
			document.write(str7.substring(5,3));//从第几位开始到第几位结束[3,5)默认小的在前面

2、js的Array对象
** 创建数组（三种）
- var arr1 = [1,2,3];
- var arr2 = new Array(3);//长度是3
- var arr3 = new Array(1,2,3);//数组中的元素是1 2 3

** 属性：length：查看数组的长度

** 方法
	- concat()： 方法用于连接两个或多个数组
		* var arr11 = [1,2,3];
		var arr12 = [4,5,6];
		document.write(arr11.concat(arr12));

	- join()： 方法用于把数组中的所有元素放入一个字符串
		* var arr13 = new Array(3);
		arr13[0] = "a";
		arr13[1] = "b";
		arr13[2] = "c";
		
		document.write(arr13);
		document.write("<br/>");
		document.write(arr13.join("+"));

	- push()： 方法可向数组的末尾添加一个或多个元素，并返回新的长度
		** 如果添加的是一个数组，这个时候数组被当做整体

		* var arr14 = new Array(3);
		arr14[0] = "tom";
		arr14[1] = "lucy";
		arr14[2] = "jack";
		document.write(arr14);
		document.write("<br/>");
		document.write(arr14.push("laowang"));
		document.write("<br/>");
		document.write(arr14);

		* document.write("<hr/>");
		var arr15 = ["aaa","bbb","ccc"];
		var arr16 = ["www","rrr"];
		document.write(arr15.push(arr16));

	- pop()： 方法用于删除并返回数组的最后一个元素
		* var arr17 = ["aaa","bbb","ccc"];
		document.write(arr17);
		document.write("<br/>");
		document.write(arr17.pop());
		document.write("<br/>");
		document.write(arr17);

	- reverse()： 方法用于颠倒数组中元素的顺序
		* var arr18 = ["aaa","bbb","ccc","ddd"];
		document.write(arr18);
		document.write("<br/>");
		document.write(arr18.reverse());

3、js的Date对象
** 在Java里面获取当前时间
Date date = new Date();
//格式化
//toLocaleString()

** js里面获取当前时间
	var date = new Date();	
	//获取当前时间
	var date = new Date();
	document.write(date);//Sun May 31 2020 11:07:52 GMT+0800 (中国标准时间)

	//转换成习惯格式
	document.write("<hr/>");
	document.write(date.toLocaleString());
	
** 获取当前的年的方法
	getFullYear()： 从 Date 对象以四位数字返回年份
		**** document.write(date.getFullYear());
	
** 获取当前的月的方法
	getMonth()： 从 Date 对象返回月份 (0 ~ 11)
		*** 返回的是0-11月，如果想要得到准确的值，加1
		**** var date1 = date.getMonth()+1;
		document.write(date1);

** 获取当前的星期的方法
	getDay()： 从 Date 对象返回一周中的某一天 (0 ~ 6)
	** 外国朋友，把星期日作为一周的第一天，星期日返回的是0
	   而星期一到星期六 返回的是1-6
	** document.write(date.getDay());

** 获取当前的日的方法
	getDate()： 从 Date 对象返回一个月中的某一天 (1 ~ 31)
		**** document.write(date.getDate());

** 获取当前小时的方法
	getHours()： 返回 Date 对象的小时 (0 ~ 23)
		**** document.write(date.getHours());

** 获取当前分钟的方法
	getMinutes()： 返回 Date 对象的分钟 (0 ~ 59)
		**** document.write(date.getMinutes());
	
** 获取当前秒的方法
	getSeconds()： 返回 Date 对象的秒数 (0 ~ 59)
		**** document.write(date.getSeconds());

** 获取毫秒数
	getTime()： 方法可返回距 1970 年 1 月 1 日之间的毫秒数

	** 应用场景：
		*** 使用毫秒数处理缓存的效果（不有缓存）
			http://www.baidu.com?毫秒数

4、js的Math对象
* 数学的运算
** 里面的都是静态方法，使用可以直接使用 Math.方法()

** ceil(x)：对数进行上舍入

** floor(x)：对数进行下舍入

** round(x)：把数四舍五入为最接近的整数

** random()：返回 0 ~ 1 之间的随机数
	- 得到0-9的随机数
	document.write(Math.floor(Math.random()*10));

5、js的全局函数
* 由于不属于任何一个对象，直接写名称使用

** eval():执行js代码（如果字符串是一个js代码，使用方法直接执行）
	**** var str = "alert('1234');";
	// alert(str);
	eval(str);

** encodeURI()：对字符进行编码

   decodeURI()：对字符进行解码

   encodeURIComponent() 
   decodeURIComponent()

** isNaN()：判断当前字符串是否为数字
	-- var str2 = "123";
	alert(isNaN(str2));
	*** 如果是数字，返回false
	*** 如果不是数字，返回true

** parseInt() 和 parseFloat()：类型转换
	** var str3 = "123";
	document.write(parseInt(str3)+1);

6、js的函数的重载
** 什么是重载？方法名相同，参数不同

** js的重载是否存在？不存在
	** 调用最后一个方法
** js里面是否存在重载？
	（1）js里面不存在重载。
	（2）但是可以通过其他方法模拟重载的效果（通过arguments数组来实现）

	***         function add1(){
	    //比如传递的是两个参数
	    if(arguments.length == 2){
		return arguments[0]+arguments[1];
	    }else if(arguments.length == 3){
		return arguments[0]+arguments[1]+arguments[2];
	    }else if(arguments.length == 4){
		return arguments[0]+arguments[1]+arguments[2]+arguments[3];
	    }else{
		return 0;
	    }
	}

7、js的bom对象
** bom：broswer object model：浏览器对象模型

** 有哪些对象？
*** navigator：获取客户机的信息（浏览器的信息）
	- navigator.appName
	- document.write(navigator.appName);

*** screen：获取屏幕的信息
	- document.write(screen.width);
	document.write("<br/>");
	document.write(screen.height);

*** location：请求url地址
	- href属性
	**** 获取到请求的url地址
		- document.write(location.href);

	**** 设置url地址
		- <input type="button" value="tiaozhuan" onclick="href1();">
		鼠标点击事件
		function href1(){
		    // alert("aaaaa");
		    location.href = "01-js的string对象一.html";
		}

*** history：请求url的历史记录
	- 创建三个页面
		1、创建第一个页面a.html写一个超链接到b.html
		2、创建b.html超链接到c.html
		3、创建c.html
	- 到访问的上一个页面
		history.back();
		history.go(-1);

	- 到访问的下一个页面
		history.forward();
		history.go(1);
		
**** window（******）
		* 窗口对象
	* 顶层对象（所用的bom对象都是在window里面操作的）

	** 方法
		- window.alert() ：页面弹出一个框，显示内容
			** 简写alert()

		- confirm() ：确认框
			- var falg = window.confirm("显示的内容");

		- prompt() ：输入的对话框
			- window.prompt("请输入",0);
			- window.prompt("显示的提示内容","输入框中的默认值");

		- open() ：打开一个新窗口
			** open("打开新窗口的地址","","窗口特征，比如窗口高度宽度")
			- 创建一个按钮，点击这个按钮，打开一个新的窗口
			- window.open("08-js的bom对象一.html","","width=200,height=100");

		- close() ： 关闭浏览器窗口（浏览器兼容性差）
			- window.close();

		- 做定时器
		** setInterval("js代码",毫秒数) 按照指定的周期（以毫秒计）来调用函数或计算表达式。
			- 表示每三秒，执行一次alert方法
			window.setInterval("alert('123');",3000);

		** setTimeout("js代码",毫秒数) 在指定的毫秒数后调用函数或计算表达式。
			- 表示在毫秒数之后执行，但是只会执行一次
			window.setTimeout("alert('abc');",4000);

		** clearInterval() ： 取消由 setInterval() 设置的 timeout。
			var id1 = window.setInterval("alert('123');",3000);
			clearInterval(id1);

		** clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
			var id2 = window.setTimeout("alert('abc');",4000);
			clearTimeout(id2);