javascrit(下)

javascrit(下)

date常用api
get类别

let d = new Date();
// get类别
// document.write(d.getFullYear() + "<br>");
//函数的用处:返回一个表示年份的4位数字
//函数的参数:无
//函数的返回值:返回一个表示年份的4位数字.
// document.write(d.getMonth() + 1 + "<br>");
//函数的用处:返回表示月份的数字.
//函数的参数:无
//函数的返回值:整数:0-11
// document.write(d.getDate() + "<br>");
//函数的用处:返回一月中的某一天
//函数的参数:无
//函数的返回值:整数:1-31;
// document.write(d.getHours() + "<br>");
//函数的用处:返回时间的小时字段
//函数的参数:无
//函数的返回值:0-23;
// document.write(d.getMinutes() + "<br>");
//函数的用处:返回时间的分钟字段
//函数的参数:无
//函数的返回值:0-59
//document.write(d.getSeconds()+"<br>");
//函数的用处:返回时间的秒数
//函数的参数:无
//函数的返回值:0 ~ 59 之间的一个整数
// document.write(d.getMilliseconds() + "<br>");
//函数的用处:返回时间的毫秒
//函数的参数
//函数的返回值:整数:0-999
//UTC根据世界时间
//getUTCFullYeat()/getUTCMonth()/getUTCDate()/getUTCHours()/getUTCMinutes()/getUTCMinutes()/getUTCMilliseconds()/
//特别:
// document.write(d.getDay() + 1 + "<br>")
//函数的用处:返回一周中的某一天0-6
//参数:无
//返回值:一周中的某一天
// document.write(d.getTime()="<br>");
//函数的用处:返回1970年至今的毫秒数
// document.write(d.getTimezoneOffset()+"<br>");
//用处:返回格林威治时间和本地时间之间的时差，以分钟为单位。
//参数:无
//返回值:本地时间与 GMT 时间之间的时间差，以分钟为单位。

set类别

// document.write(d.setFullYear(2020) + "<br>");
//用处:设置date对象的年份(4位数字)
//函数的参数:
/*
year	必需。表示年份的四位整数。用本地时间表示。
month	可选。表示月份的数值，介于 0 ~ 11 之间。用本地时间表示。
day	可选。表示月中某一天的数值，介于 1 ~ 31 之间。用本地时间表示。
*/
//函数的返回值:返回调整过的日期的毫秒表示.
// document.write(d.setMonth(month, day));
//用处:设置月份
//参数:
/*
month必需。月份的数值，0（一月） ~ 11（十二月）之间。
day	可选。某一天的数值，该值介于 1 ~ 31 之间（以本地时间计）。在 EMCAScript 标准化之前，不支持该参数。
*/
// 返回值:调整过的日期的毫秒表示。在 ECMAScript 标准化之前，该方法什么都不返回
// document.write(d.setDate() + "<br>");
/*d.setHours()/d.setMinutes()/d.setSeconds()/d.setMilliseconds()
setUTCFullYear() / setUTCMonth() / setUTCDate() / setUTCHours() / setUTCMinutes() / setUTCSeconds() /setUTCMilliseconds()*/

//特别:
// document.wirte(d.setTime() + "<br>");
//用处:以毫秒设置Date对象
//参数:毫秒值
//返回值:返回标准时间.

to类型

// to类别
// toSource();
//返回该对象的源代码
//toString()
//把 Date 对象转换为字符串。
//toTimeString();
//把Date对象的时间部分转换为字符串,并返回结果
//toDateString();
//把 Date 对象的日期部分转换为字符串。
// document.write(d.toString()+","+typeof(d.toString()));
// document.write("<br>");
// document.write(d.toTimeString()+","+typeof(d.toTimeString()));
// document.write("<br>");
// document.write(d.toDateString()+","+typeof(d.toDateString()));
// /*toUTCString:根据世界时,把date对象转换为字符串*/
// /*toLocaleString():根据本地时间格式,把date对象转换为字符串*/
// document.write("<br>");
// document.write(d.toLocaleString()+"<br");
// toLocaleTimeString();根据本地时间格式,把Date对象的时间部分转换为字符串。
// toLocaleDateString();根据本地时间格式把Date对象的日期部分转换为字符串。

其他类型

// 其他
// document.write(Date.parse() + "<br>");
//用法:解析一个日期的时间字符串
//参数:表示日期和时间的字符串。
//返回值:到1970年的毫秒数.
// UTC()
// 用法:根据世界时,返回1970年至今的毫秒数.
// 参数:年月日时分秒毫秒,上述格式
// 返回值:返回指定的时间距 GMT 时间 1970 年 1 月 1 日午夜的毫秒数。
let d2=Date.UTC(2005,7,8)
document.write("<br>");
document.write(d2);

Array对象.
常用api

let arr = ['张飞', '关羽', '赵云'];
let name = ['吕布', '貂蝉', '周瑜'];
let name1 = ['大乔', '小乔'];
// concat()用处:连接两个或多个数组,
//参数:该参数可以是具体的值，也可以是数组对象。可以是任意多个。
//返回值:返回一个添加后的新的数组
let arr2 = arr.concat("曹超");
let arr3 = arr.concat(name);
let arr4 = arr.concat(name).concat(name1);
document.write(arr2 + "<br>");
document.write(arr3 + "<br>");
document.write(arr4 + "<br>");
//join()用处:把数组的所有元素放入一个字符串
//参数:指定要使用    的分隔符,默认逗号
//返回值:返回分隔符分开的字符串.
document.write(arr2.join() + "<br>");
document.write(arr3.join("---") + "<br>");
//pop()用处:删除并返回元素的最后一个
//参数:无
//返回值:返回最后一个元素
document.write(arr3.pop() + "<br/>");
document.write(arr3 + "<br>");
//shift()用处:删除并返回数组中的第一个元素
//参数:无
//返回值:返回第一个元素
document.write(arr.shift()+"<br>");
//push()用处:向数组的末尾添加一个或更多元素，并返回新的长度。
//参数:至少有一个元素,依次往后添加.
//返回值:数组的长度
document.write(arr.push("1","haohao")+"<br>");
document.write(arr+"<br>");
//unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
//参数:无
//返回值:返回新数组的长度
document.write(arr.unshift("你好","我是")+"<br>");
document.write(arr+"<br>");
//reverse():颠倒数组中元素的顺序
//参数:无
//返回值:返回颠倒后的数组
document.write(arr.reverse()+"<br>");
//splice():删除元素，并向数组添加新元素。
//参数:1.整数添加项目的位置,参数2:必需删除的项目数量.
//返回值:包含被删除的新数组.
document.write(arr.splice(1,2,"哈哈")+"<br>");
document.write(arr+"<br>");
//sort():对数组的元素进行排序
//参数:排序顺序,必须是函数
//返回值:新的数组
function sortsum(a,b){
	return a-b;
}
document.write(name.sort()+"<br>");
//slice()	从某个已有的数组返回选定的元素
//参数:satrt:必须,开始的位置,end:可选,结束的位置.
//返回值:返回一个新的数组
document.write(name.slice(1,-1)+"<br>");

String常用api:

let str=" 你好我好大家好才是真的好,abcFFdadf ";
//属性length :可返回字符串的长度
//返回值:number
document.write(str.length+"<br>");

//trim()转义字符串首尾空白
//参数:无
//返回值:经过处理后的字符串
str1=str.trim();
document.write(str1+"<br>");
//toUpperCase()把字符串转移为大写
//参数:无
//返回值:经过处理后的字符串
document.write(str.toUpperCase()+"<br>");
//toLowerCase()把字符串转移为小写
//参数:无
//返回值:经过处理后的字符串
document.write(str.toLowerCase()+"<br>");
//indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
//参数:"要查找的字符"
//返回值:整数
document.write(str.indexOf("好")+"<br>");
//lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
//参数:要查找的字符
//返回值:整数,如果找不到就返回-1;
document.write(str.lastIndexOf("好")+"<br>");
//字符串的截取
//slice():	提取字符串的片断，并在新的字符串中返回被提取的部分
//参数:起始索引（开始位置），终止索引（结束位置）。
//返回值:被提取的部分
document.write(str.slice(2,5)+"<br>");
//split():把字符串分割为子字符串数组.
//参数:分割符.
//返回值:分割后的字符数组.
let str2=str.split(",");
// document.write(str2+"<br>"+typeof(str2));
console.log(typeof(str2));	
//substring():提取字符串中两个指定的索引号之间的字符
//参数:索引值  下标
//返回值:提取的字符串
console.log(str.substring(1,3));
//substr():起始索引号提取字符串中指定数目的字符  
//参数:索引值,提取的数目
//返回值:
console.log(str.substr(2,7));

dom
1.获取文档对象

//1.通过id获取
let div = document.getElementById("box1");
console.log(div);
//2.通过类名获取//HTMLCollection，只要是elements或all可能都要输出集合或列表
let cla = document.getElementsByClassName("box");
console.log(cla)
for (let i = 0; i < cla.length; i++) {
	console.log(cla[i]);
}
//3.通过标签名获取标签//HTMLCollection：HTML格式
let tag = document.getElementsByTagName("div");
console.log(tag);
for (let i = 0; i < tag.length; i++) {
	console.log(tag[i]);
}
//4.通过name的值  //NodeList :节点列表
let name=document.getElementsByName("username");
console.log(name);
for(let i=0;i<name.length;i++){
	console.log(name[i]);
}
//5.querySelectorAll()方法返回文档中匹配制定css选择器的所有元素，返回NodeList对象
let pp = document.querySelectorAll(".p1");
console.log(pp);
for(let i=0;i<pp.length;i++){
	console.log(pp[i]);
}
//6.获取单个元素
let pp1=document.querySelector("#box1");
console.log(pp1);

// dom节点属性
//elem.childNodes:元素elem的所有子元素,包括文本节点,元素结缔娜,甚至注释节点
let div = document.querySelectorAll(".box")[0];
console.log(div.childNodes); //获取孩子节点,孩子可能有多个,text代表回车符.
//elem.parentNode:元素elem的父节点,为元素节点
let box1 = document.querySelectorAll(".box1")[0];
console.log(box1.parentNode);
//elem.nextSibling:元素elem之后紧跟的节点(处于同一树层级中,可能会有text)
console.log(box1.nextSibling.nextSibling);
//elem.previousSibling:元素elem之前的节点(处于同一树层级中)
console.log(box1.previousSibling.previousSibling.previousSibling.previousSibling);
//elem.firstChild:元素elem第一个子节点.可能会显示text
let box = document.querySelectorAll(".box")[0];
// console.log(box);
console.log(box.firstChild);
//elem.lastChild:元素elem最后一个子节点.可能会显示text
// console.log(box.lastChild);

//.dom操作元素和属性
//获取属性值的方法 1. 对象.属性名   对象.属性名 = "值";
//获取属性和值的方法:  2.
//elem.getAttribute("属性名");  获取队形elem元素的属性attr
//elem.setAttribute("属性名","属性值"); 设置elem元素的属性为制定的属性值.
//elem.appendChild(node);  在元素elem内部追加子节点node
//remove();  移除元素
//removeChild('子节点');
let a = document.querySelectorAll("a")[0];
console.log(a.getAttribute("href")); //获取属性href的属性值
//设置属性
a.setAttribute("href", "https://www.taobao.com");
console.log(a.href);
a.href = "https://www.jd.com";
let box = document.querySelectorAll(".box")[0];

操作文本属性.
//innerHTML 既可以获取标签,也可以获取文本,不会获取父级标签
//innerText 只获取文本值
console.log(box.innerHTML); //获取文本值
box.innerHTML = "<p>123</p>"; //设置文本值
console.log(box.innerText);
box.innerText = "这是这种的文本";

2.dom操作css

//dom操作css  节点.style.属性 = "属性值"
//批量操作js对象
//格式:js对象.style.cssText='css样式字符串';
pp1.style.color="red";
pp1.style.backgroundColor = "pink";
pp1.style.fontSize = "20px";
pp1.style.width = "120px";
pp1.style.height = "120px";
p2.style.cssText = "border:2px solid red; font-size:40px";

dom添加标签和文本

//document.createElement("标签名");创建元素节点
//document.createTextNode('文本值');//创建文本值。
//父节点.appendChild(节点名);在元素elem内部追加子节点node
let button = document.querySelectorAll("button")[0];
let ul = document.getElementsByTagName("ul")[0];
// console.log(ul);
function addLi() {
	必须添加一次，创建一次
	// 点击时在函数外的元素只会执行一次。
	let li = document.createElement('li'); //创建元素节点li
	let text = document.createTextNode("我是你的朋友");
	li.appendChild(text); //将文本放到标签内。
	ul.appendChild(li); //将li标签放在ul标签内。
}

json
json作用:JSON 是用于存储和传输数据的格式。
JSON 是文本，文本可以在任何地方传输，并可通过任何编程语言读取。
json就是数组和对象相互嵌套,最外层是对象
json的值不能是:函数,日期,undefined;

//json语法:{key:value,key1:value1}
let obj3 = {
	"code":200,
	"msg":"success",
	"data":[
		{"id":1,"name":"男士上衣","price":58},
		{"id":2,"name":"女士上衣","price":100},
		{"id":3,"name":"拖鞋","price":15}
	]
}
console.log(obj3.data[2].price);

api
方法:
JSON.stringify(obj)
//用处:将对象转换为json
//参数:对象
//返回值:返回json字符串类型.

let obj = {
	"name": "赵云",
	"age": 19,
	"sex": "男",
	"data":[
		{"id":1,"sex":"男"},
		{"id":2,"sex":"女"},
	]
};
console.log(JSON.stringify(obj));
//{"name":"赵云","age":19,"sex":"男","data":[{"id":1,"sex":"男"},{"id":2,"sex":"女"}]}

// JSON.parse() 方法解析字符串并返回 JavaScript 对象
//参数:json类型
//返回值:对象类型

let a={"name":"赵云","age":19,"sex":"男","data":[{"id":1,"sex":"男"},{"id":2,"sex":"女"}]};
console.log(a);
/*
{name: "赵云", age: 19, sex: "男", data: Array(2)}
age: 19
data: (2) [{…}, {…}]
name: "赵云"
sex: "男"
__proto__: Object
*/

事件

// ondblclick 双击事件
button.ondblclick = function(){
	
		let input1 = input[0].value;
		let input2 = input[1].value;
		strong.innerHTML = parseFloat(input1) + parseFloat(input2);
}
//单击事件
// input[2].onclick = function(){
// 		let input1 = input[0].value;
// 		let input2 = input[1].value;
// 		strong.innerHTML = parseFloat(input1) + parseFloat(input2);
// }

更新事件
当页面有更新时刷新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onchange事件</title>
	</head>
	<body>
		<select name="" id="" onchange="change(this)">
			<option value="1">-北京-</option>
			<option value="2">-上海-</option>
			<option value="3">-南京-</option>
		</select>
		
		<script type="text/javascript">
				function change(obj){
					// alert(111);
					console.log(obj.value);
				}
		</script>
	</body>
</html>

表单提交
return:true/false
是否让提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<form action="./json.html" method="get" onsubmit="return true">
			<label for="user">用户名</label>
			<input type="text" name="user" id="user">
			<input type="submit">
		</form>
		<script></script>
	</body>
</html>