Javascript statement（下）

Javascript statement（下）

目录
  • Javascript statement（下）
    • 一、ECMA基本对象
      • 1. ECMA对象概述
      • 2. Function 对象
      • 3. Arguments对象
      • 4. String对象
      • 5. Array对象
      • 6. Date对象
      • 7. 正则对象
      • 8. Math对象
      • 9. History对象
      • 10. Location对象
    • 二、BOM对象
    • 三、DOM对象
      • 1. 自身属性
      • 2. 导航属性
      • 3. DOM方法
      • 4. DOM属性
      • 5. DOM Event
    • 四、实例训练
      • 1. 模态对话框
      • 2. 省市二级联动
      • 3. 左右内容移动

一、ECMA基本对象

typeof() // Only can judge the type of the obj in simple
obj_1 instanceof type_of_obj // Return the boolean

1. ECMA对象概述

原始对象(0bject)

  • 其他所有对象都是继承于原始对象

11种内置对象

/*
Array, String, Date, Math
Boolean, Number, Function
Global, Error, RegExp, Object
*/

// 实例化对象 (s == s1)
var s = "hello"
var s1 = new String("hello")

2. Function 对象

the name of functions and variables can't be same, because they only are the vessel to store the memory address. If the name of functions and variables are same, the memory address will be covered

// method one
function func_1(args){
	statement;
	return value
}
var ret=func1()

// method two
var func2 = new Function(arg1, rag2, "statement")
func2(args)

// method three (anonymous function)
var func3=function(){
	statement;
	return value
}

// These atrribute and means of function
function.length		// Return the args' number of the function object
void()				// Ban the function to return value
Tostring()			// 
Valueof()			// 

// The function will automatically be performed
(function (arg){
	statement;
})("123")

3. Arguments对象

Can directly tansfer arguments in the function of js without setting arguments in advance
Arguments are a ordered array

var ret = 0;
function add(){
	console.log(arguments.length);
	console.log(arguments);
	
	for (var i in arguments){
		ret+=arguments[i]
	}
	return ret;
}
alert(add(1,2,3,4))
}

4. String对象

属性

var s = "hello"
s.length

for (var i in s){
	console.log(s[i])
}

方法

// the style of font
s.italics()
s.bold()
s.ancho()

// Switch to big or small alphabet
s.toUpperCase()
s.toLowCase()

// Get the character designated
s.charAt()		// get the character designated the position
s.charCodeAt()	// get the position of ASSIC by the character designated

// Search the characters
s.search()
s.match()
s.indexof()
s.lastindexof()

// replace, split and concat
s.replace(old,new_);	// Replace the string
s.split();				// To split the string by the character designated,then return a array
s.concat();				// To emerge the strings

// To truncate the string by a range
s.substr(start, length)
s.substring(start, end)
s.slice(start, end)			// The number of end can be minus

5. Array对象

When use the method of generating the array object to create a array, the number designate the length of the array newly created, but not the realistic value if only put one number into the list of arguments. and the length designated can not limit the length of array.

创建

var arr=[1,2,3,4];
var arr=new Array(1,2,3,4);

var ret = arr[1]	// 2

数组对象的方法

栈：先进后出（相当于一端开口的瓶子）
队列：先进先出（相当于两端开头的管道）

arr.join();		// All strings in the array will be emerge into a string

arr.push();		// Put the value into the array(bottle) one by one
arr.pop();		// Get the value from the top of array(bottle)

arr.unshift();	// Put the value into the bottom of array(bottle)
arr.shift();		// Get the value from the bottom of array(bottle)

arr.reverse();		// Make all value in the arry reverse the position
arr.sort();			// Defaultly, the values in the array are sorted by their order of first character in the asci table. But we can put the function defined by us into the list of arguments
// For example
function mysort(a,b){
	if(a>b){
		return 1;
	}else if(a

数组对象的特性

  • JS数组可装任意类型，无限制；java等需提前规定数组所装的数据类型
  • JS数组长度没有限制

6. Date对象

创建方式

var date_obj=new Date();
var date_obj=new Date(5000);		// ms
var date_obj=new Date("2021/4/20 12:05:22")
alert(date_obj.toLocalString());
alert(date_obj.UTCString());

对象方法

var date_obj=new Date("2021/4/20 12:05:22")
date_obj.getFullYear();
date_obj.setMonth();
date_obj.getTimezoneOffset();	// return a number of minitue, which equate the local time minus the UTC time

7. 正则对象

RegExp molds:
i: Will let the big alphabet and small alphabet see as a same character
g: Everywhere can be used

var re_obj= /re_rule/g;
var re_obj= new RegExp("re_rule", "mold")	// mold need to be between [i, g];

alert(re_obj.test(str))		// Be used to test if the string can be matched. return the boolen

8. Math对象

Math.random()
Math.round()	// Get the int by that the fore number of decimal point add one if the next number of decimal point beyond 4
Math.pow()		// Return a result of the type's number, like 2**4

9. History对象

// Attribution
history.go()	// Arg: [0,-1,1]
history.forward()
history.back()

// Method
history.length

10. Location对象

location.reload()
location.href="url"

二、BOM对象

Let the js can interact with browser
常用方法

alert();

var ret = confirm();		// Pop up a frame that can use to interact, which have two options: confirm or cancel
var ret = prompt();		// Pop up a frame that can use to input

var timer_id = setInterval(func, gap);		// Set a timer to execute a function every certain time and  return the id of the timer
var timeout_id = setTimeout(func, gap);		// Set a timeout to execute a function after certain time
clearTimeout(timeout_id);					// Clear the timeout by the id

三、DOM对象

1. 自身属性

2. 导航属性

3. DOM方法

var ele=document.getElementById();
var ele=document.getElementsByclassName();
var ele=document.getElementByTagName();
var ele=document.getElementByName();

4. DOM属性

var ele2=ele.firstChile;
var ele2=ele.lastChile;
var ele2=ele.parentNode;
var ele2=ele.childNodes;
var ele2=ele.nodeName;
var ele2=ele.nodeType;
var ele2=ele.nodeValue;
var ele2=ele.getinnerHTML;

// Recommended the method of use
var ele2=ele.firstElementChild;
var ele2=ele.lastElementChild;
var ele2=ele.children;
var ele2=ele.nextElementSibling;
var ele2=ele.previousElementSibling;

5. DOM Event

常用event事件