对象的概念javascript
对象分类[3种]： ECMScript(JS本身的对象)， BOM(浏览器对象) DOM(文档对象，操做HTML的) html
11种内置对象: Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object java
注意： JavaScript中除了Null和undefined之外，其他均为对象node
ECMScript对象
Object对象：ECMAScript 中的全部对象都由这个对象继承而来；Object 对象中的全部属性和方法都会出如今其余对象中python
ToString() : 返回对象的原始字符串表示。 ValueOf() : 返回最适合该对象的原始值。对于许多对象，该方法返回的值都与 ToString() 的返回值相同。
String对象正则表达式
建立字符串：
方式一： var m = 'hello world' //调用字符串的对象属性或方法时自动建立对象，用完就丢弃
方式二： var n = new String('hello world') //new 建立了一个String对象 n,全局有效
alert(n)
注意： 方式一在调用字符串对象或方法的时候自动建立对象，用完就丢
方式二采用new建立字符串对象str1，全局有效
字符串方法：
var str1="hello World";
// 字符属性
document.write(str1.length); // 字符长度：11
// 字符切割
document.write(str1.substr(1,6)) // ello w, 包括空格，这里的数字是数组下标[0-10]
// 循环打印
//for(i in str1){ alert(i+'-------->'+str1[i]) }
// 编排方法
document.write(str1.italics()); // 设定了<I>斜体字</I>
document.write(str1.bold()); // 设定了<B>字体加粗</B>
document.write(str1.anchor('hhh')); // 设定了一个<a name='hhh'>标签</a>
// 大小写转换
document.write(str1.toUpperCase()) // 大写 HELLO WORLD
document.write(str1.toLowerCase()) // 小写 hello world
//获取指定位置的字符
document.write(str1.charAt(0)) // 打印 :h
// 取回字符编码
document.write(str1.charCodeAt(3)) // 返回ASCII 108
// 找到指定字符串的位置，找不到报 -1
console.log(str1.indexOf('l')) // 2
console.log(str1.lastIndexOf('l')) // 9
// match匹配符合的查询标准，返回一个数组
document.write(str1.match('l')[0]) // 返回一个匹配全部的属组
// search匹配符合的查询标准，返回下标
document.write(str1.search('h')) // 返回h的下标： 0
// 字符串的替换
document.write(str1.replace('ll','XX')) //heXXo World
// 字符串的拼接
document.write(str1.concat('2017')) //hello World2017
// 字符串的切割
console.log(str1.split('l')) //返回一个数组 ["he", "", "o Wor", "d"]
// 字符串截取
console.log(str1.substring(2,7)) //llo W 左闭右开型
console.log(str1.substr(2,5)) //llo W 取出5个值，从下标2开始
Array对象sql
建立数组：
// 建立方式一： 直接建立数组
var arr=[1, 2, 3, 4, 5];
// 建立方式二： 利用Array建立，参数能够是任何类型，也能够指定长度
//new Array(); // 建立数组时容许指定元素个数也能够不指定元素个数。
//new Array(size);//if 1个参数且为数字,即表明size,not content
//Array数组是可变长度的
var arr1 = new Array(); //不指定元素个数，本身指定元素内容
arr1[0]='hello';
arr1[1]='world'
document.write(arr1.length) // 2
document.write(arr1) // hello world
var arr2=new Array(1, 2, 3, 4); //初始化函数的时候直接函数赋值，指定函数内容
document.write(arr2); //打印： 1, 2, 3, 4
document.write(arr2.length); // 4
var arr3 = new Array(2) //初始化函数的时候指定了函数的长度
arr3[0]='hello3';
arr3[1]='world3';
arr3[5]='2018'; // 虽然已结超过了指定的长度，可是JS是可变长度的，现开辟了6个空间
document.write(arr3.length) // 6
建立二维数组：
// 建立方式一： 直接二维建立数组,数组中建立数组便可
var arr=[1, 2,[3, 4, 5]];
document.write(arr.length) // 长度3
document.write(arr[2][1]) // 4
// 建立方式二：利用Array函数
var c = new Array(3);
for (var i=0; i<c.length; i++){
c[i] = new Array(2);
}
c[0][0]='hello';
c[0][1]='world';
document.write(c[0][0]) //hello
document.write(c[0][1]) //world
数组对象的属性：
join方法：将数组中的字符串拼接成一个字符串【注意JS是在数组内提供join，Py是字符串的join方法】
var s = ['hello','world', '2018'].join('---');
document.write(s); // hello---world---2018
栈操做[先进后出] pop/push 操做队列尾部
var arr = [1, 4, 5];
arr.push(6); // 将数据压入数组尾
document.write(arr); // 1,4,5,6
arr.pop(); // 取出数据
document.write(arr); // 1, 4, 5
栈操做[先进后出] shift/unshift 操做队列的头部,相似队列[Queue]的的操做FIFO
var arr1 = [1, 4, 5];
arr1.shift(); //取出数据1
document.write(arr1); // 4,5
arr1.unshift(4) //头部插入数字4
arr1.unshift(9) //头部插入数字9
document.write(arr1) //9, 4, 4, 5
数组排序-- reverse: 反转
var s = [1, 2, 5, 6,0]
document.write(s.reverse()) // 0,6,5,2,1
数组排序-- sort :将数组转换成字符串,比较的是ASCII值的大小
var s = [1, 2, 5, 6,10]
document.write(s.sort()) // 0,10,1,2,5,6
数组排序[高级用法]-- sort内部有一个能够传递一个自定义的函数，根据返回值来进行排序 :将数组转换成字符串,比较的是ASCII值的大小
var s = [1, 2, 5, 6,10]
document.write(s.sort(mysort)) // 1,2,5,6,10
function mysort(a,b) {
// return a-b //高级用法,也能够实现功能
if(a>b){
return 1
}else if(a<b){
return -1
}else {
return 0
}
concat: 数组拼接，不影响原来的属组值
var s = [1, 2, 5, 6,0]
s.concat(1,2,3)
console.log(s)
console.log(s.concat(1,2,3))
concat: 数组拼接，不影响原来的属组值
var s = [1, 2, 5, 6,0]
console.log(s.toString()) // 返回字符串类型
JS中数组的特性
//java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型.
//js中的数组特性1: js中的数组能够装任意类型,没有任何限制.
//js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
Function对象shell
// 建立方式一 [推荐]
function fun() {
alert(1,2,3)
}
fun() //调用函数
说明：
可使用变量、常量或表达式做为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
// 建立方式二，利用Function对象，注意是大写；参数必须用引号，相似Java构造方法
var fun2 = new Function ("a", "b", "alert(a+b)");
fun2(1,3)
alert(fun2.length) // 打印参数的个数
说明： Function 类能够表示开发者定义的任何函数。
// 建立方式三， 匿名函数,将函数赋值给了变量fun3
var fun3 = function(){
alert('hello world')
}
fun3()
// 自执行函数, 相似于匿名函数的应用,节省空间，方便执行
(function (arg) {
console.log(arg)
})('hello world')
注意：js的函数加载执行与python不一样，它是总体加载完才会执行，因此执行函数放在函数声明上面或下面均可以
--------------------------------------------------------------------------------------------
例子说明：
例一；
function f() {
var b = 4; // b被定义为局部变量
b=3; // 局部变量b被从新赋值为3
}
alert(b) // 函数f()未被执行，且b是局部变量，因此报错
例二：同Python
function a(a,b) {
alert(a+b)
}
var a=1
var b=2
a(a,b) / /函数名也是一个变量，因此这里报错了
例三：JS强大的容错机制
function f(a,b) {
return a+b
}
var ret;
ret = f(3,2)
alert(ret)
var ret2;
ret2 = f(3,2,5) // JS强大的容错机制,能够传递多个参数不报错，可是内容仍是5
alert(ret2)
alert(f.length)
例四: 函数的属性和方法
function func1(a,b) {
return a+b
}
func1(1,2);
alert(func1.length); // 2
alert(func1(1,3)) // 4
alert(void(func1(1,2))) // undefined
说明：Function 对象也有与全部对象共享的 valueOf() 方法和 toString() 方法。
运算符void()做用：拦截方法的返回值
例五： arguments参数，返回页面一个数组，里面包含了传递给页面的全部参数
function f() {
alert(arguments.length)//传递的参数的个数为 3
console.log(arguments) //Arguments(3) [3, 2, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
var ret = 0
for (var i=0; i<arguments.length;i++){
ret += arguments[i] //取出数组的内容，进行累加操做
}
console.log(ret)
}
f(3,2,5)
例六：本身添加参数的限制操做
function f() {
if(arguments.length != 3){
throw Error("params error......")
}
}
f(3,2,5,5)
typeof: 只能判断基本的数据类型 数组
instanceof: 判断对象是否属于某个类浏览器
var s="hello"; var i=8; // typeof 只能判断基本数据类型; alert(typeof (s)); // string alert(typeof (i)); // number var n=new Number(2); //实例化了一个Number类，产生了对象n alert(typeof (n)); //判断结果是Object，显然typeof判断不了实例化的 alert( n instanceof String); //false alert( n instanceof Number); //true
Date对象
//建立Date对象，默认是当前时间
var date = new Date()
alert(date) // Tue Jan 09 2018 18:57:41 GMT+0800 (中国标准时间)
alert(date.toLocaleDateString()) //2018/1/9
alert(date.toLocaleString()) //2018/1/9 下午6:58:31
//建立Date对象，且指定特定的时间
var date1 = new Date('2017-12-31 18:00')
alert(date1) // Sun Dec 31 2017 18:00:00 GMT+0800 (中国标准时间)
alert(date1.toLocaleString()) //2017/12/31 下午6:00:00
// 建立Date对象,这里设置了5秒
var date2 = new Date(5000)
document.write(date2.toLocaleString()) // 1970/1/1 上午8:00:05, 由于东八区，因此时间+8的基础上+5秒时间
document.write(date2.toUTCString()) // Thu, 01 Jan 1970 00:00:05 GMT 从Unix诞生的时间开始添加5秒时间
DATE的属性 --获取时间和日期
var date = new Date() // 默认初始化当前时间 date.getFullYear() // 获取年份 date.getMonth() // 获取月份, 月份范围 [0-11] date.getDate() // 获取天数 date.getDay() // 获取星期数 星期范围 [0-6] date.getHours() // 获取小时 date.getMinutes() // 获取分组 date.getSeconds() // 获取秒数 date.getMilliseconds() // 获取毫数
Date的属性 -- 时间和日期的转换
var date = new Date() // 返回本地时间与GMT的时间差，以分钟为单位 date.getTimezoneOffset() // 480 = 8 * 60 // 返回国际标准时间字符串 alert(date.toUTCString()) //Tue, 09 Jan 2017 11:28:20 GMT // 返回本地格式时间字符串 alert(date.toLocaleString()) // 2017/1/9 下午7:31:07 // 返回累计毫秒数(从1970/1/1午夜到本地时间) alert(Date.parse(date)) // 1515497367000
正则表达式：
建立正则对象
// 建立正则对象
var re = new RegExp('\d+', 'g') // 主要有2种模式，g：global, i:ignore
alert(re.test('hello123world')) // alert只有2个结果，true和false
// 建立正则对象2: 相似shell里面的sed的使用
var re2 = /\d+/g
alert(re2.test('hello123world'))
String 中与正则结合的4个方法 var str = "hello world"; alert(str.match(/o/g)); // 查找字符串中 复合正则的 内容.返回一个数组 alert(str.search(/h/g)); // 0 查找字符串中符合正则表达式的内容位置，只返回第一个匹配的结果 alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组; alert(str.replace(/o/g, "s")); // hells wsrld 对字符串按照正则进行替换.
Math对象：内置对象，可直接使用
// 取出(0-1)的随机数 alert(Math.random()) //0.6496779923745719, 取值范围： // 取出近似值，四舍五入的原则 alert(Math.round(2.8)) // 3 // 返回[0-100]的一个随机数 alert(Math.round(Math.random()*100)) //返回幂值 alert(Math.pow(2,3)) // 8 //返回最大最小值 alert(Math.max(12,3)) // 12 alert(Math.min(12,3)) // 3 // 返回绝对值 alert(Math.abs(-11)) // 11
BOM对象：Js能够跟浏览器对号
BOM（浏览器对象模型），能够对浏览器窗口进行访问和操做。使用 BOM，开发者能够移动窗口、改变状态栏中的文本以及执行其余与页面内容不直接相关的动做。
Window对象方法
全部浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不须要建立对象,直接使用便可.
交互模式： alert(), confirm(), prompt()，open(),close()
// 显示带有一段消息和一个确认按钮的警告框。
alert('仅仅显示一个告警');
//显示带有一段消息以及确认按钮和取消按钮的对话框。
var ret = confirm('肯定要离开页面吗？'); // 若是选择肯定按钮，则返回true,不然返回false
// 显示可提示用户输入的对话框。
var ret2 =prompt('请输入用户名和密码？'); // 若是输入了信息，则返回输入的内容，不然返回null
//open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
//调用方式1
open("http://www.baidu.com");
//参数1 什么都不填 就是打开一个新窗口. 参数2.填入新窗口的名字(通常能够不填). 参数3: 新打开窗口的参数.
open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
//close方法 将当前文档窗口关闭.
定时器实例：综合setTimeout, setInterval的学习使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getTimd() {
var date_obj= new Date();
var year=date_obj.getFullYear();
var month=date_obj.getMonth()+1;
var day=date_obj.getDate();
var hour=date_obj.getHours();
var minute=date_obj.getMinutes();
var seconds=date_obj.getSeconds();
var week=date_obj.getDay();
return year+"年"+f(month)+"月"+f(day)+"日"+" "+f(hour)+": "+f(minute)+" :"+f(seconds)+" "+ num_week(week)
}
function f(num) {
if(num < 10){
return '0'+ num;
}
return num;
}
function num_week(n) {
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
return week[n]
}
function start() {
var stime = getTimd();
var ret = document.getElementById('clock');
ret.value = stime;
}
var ID; // 定时器的惟一标示
function interner_start() {
if(ID == undefined){ //防止屡次点击生成多个ID
start()
// 返回定时器的ID号码，定时器的惟一标示
ID = setInterval(start,1000) // 传入函数名便可，每间隔1秒执行一次
console.log('建立ID',ID);
}
}
function interner_stop() {
clearInterval(ID); // 传入定时的ID名便可
console.log('清除ID',ID);
ID = undefined
}
function timeOut() {
alert('welcome to hhh System');
}
// timeOut的联系
function hhh() {
var setTimeOutID = setTimeout(timeOut, 3000) // 只执行一次
// clearTimeout(setTimeOutID) 取消定时
}
</script>
</head>
<body>
<input type="text" value="请点击开始..." style="width: 220px;" id="clock">
<input type="button" value="Begin" onclick="interner_start()">
<input type="button" value="End" onclick="interner_stop()">
<input type="button" value="TimeOut" onclick="hhh()">
</body>
</html>
history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可经过 window.history 属性对其进行访问。
History 对象方法 back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go() 加载 history 列表中的某个具体页面。 length 返回浏览器历史列表中的 URL 数量。
location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可经过 window.location 属性来访问。
Location 对象方法
location.assign(URL)
location.reload()
location.replace(newURL) //注意与assign的区别
<input type="button" value="baidu" onclick="location.replace('https://www.baidu.com')">
<input type="button" value="reload" onclick="location.reload()">
<input type="button" value="href" onclick="location.href='https://www.baidu.com'">
<input type="button" value="assign" onclick="location.assign('https://www.baidu.com', 4)">
DOM对象(DHTML)
根据W3C, DOM被分为 3 个不一样的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
-- XML DOM 定义了全部 XML 元素的对象和属性，以及访问它们的方法
HTML DOM - 针对 HTML 文档的标准模型
-- HTML DOM 定义了全部 HTML 元素的对象和属性，以及访问它们的方法
Dom节点：
根据 HTML DOM 标准，HTML 文档中的全部内容都是节点(NODE)：
整个文档是一个文档节点(document对象)
每一个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每一个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)
节点(自身)属性:
attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值[元素的内容]
导航属性:
parentNode - 节点（元素）的父节点 (推荐)
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点（元素）的子节点
自身属性和导航属性的使用【不推荐】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div>hello </div>
<p> world </p>
</div>
<script>
var ele=document.getElementById("div1"); //根据ID获取子节点元素
//自身属性
console.log(ele.nodeName); // DIV
console.log(ele.nodeType); // 1
console.log(ele.nodeValue); // null
// 如下为导航属性
var ele2=ele.firstChild; // 这里获取的是第一个子节点,非第一个子节点元素
alert(ele2.nodeName); // text -->由于有换行符，空格缩进等内容
var ele3=ele.lastChild; // 这里获取的是最后一个子节点,非最后一个子节点元素
alert(ele3.nodeName); // text -->由于有换行符，空格缩进等内容
var ele4=ele.childNodes;
alert(ele4.length); // 5， 除了div,p标签外，还有3个text子节点
var ele5=ele.parentNode; // 获取父节点
alert(ele5.nodeName); // BODY
<script>
</body>
</html>
自身属性和导航属性【推荐】
parentElement // 父节点标签元素
children // 全部子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div>hello </div>
<p> world </p>
</div>
<a id="baidu" href="https://www.baidu.com"></a>
<script>
// 推荐方式,这些属性是为了对文档树进行导航;
var ele=document.getElementById("div1"); // 根据ID获取子节点元素
var ele_son=ele.firstElementChild; // 获取子节点第一个元素
alert(ele_son.nodeName); // DIV, 获取元素的名称
var last_son=ele.lastElementChild; // 获取子节点最后一个元素
alert(last_son.nodeName); // P, 获取元素的名称
var ele_sons=ele.children; // 获取全部子元素,返回一个数组
alert(ele_sons.length); // 2, [DIV + P]
alert(ele_sons[0]); // [object HTMLDivElement]
// 打印子节点内容
for (var i=0;i<ele_sons.length;i++){
console.log(ele_sons[i])
}
var sib=ele.nextElementSibling; // 获取下一个子节点
alert(sib.nodeName); // A
</script>
</body>
</html>
访问 HTML 元素等同于访问节点,咱们可以以不一样的方式来访问 HTML 元素：
页面查找[全局查找] + 局部查找
页面查找[全局查找]：
经过使用 getElementById() 方法
经过使用 getElementsByTagName() 方法
经过使用 getElementsByClassName() 方法
经过使用 getElementsByName() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div class="div2">hello </div>
<p class="div3"> world </p>
<div class="div4" name="hello"> world3 </div>
</div>
<script>
/*----------------------------根据全局查找内容---------------------------------------*/
// ID是惟一的，因此是Element，只取到一个值
var div1 = document.getElementById('div1');
console.log(div1);
// class是不惟一的，因此是Elements,返回一个数组
var div2 = document.getElementsByClassName("div2")[0]; // 注意是双引号
console.log(div2);
alert(div2.innerHTML); // hello, 返回标签的文本内容
alert(div2.nextElementSibling); // [object HTMLParagraphElement]
// Tag是不惟一的，因此是Elements,返回一个数组
var div3 = document.getElementsByTagName("p"); // 返回一个数组
console.log(div3[0].innerHTML); // world
// 经过Name
var me = document.getElementsByName("hello");
console.log(me); // NodeList [div.div4]
console.log(me[0].innerHTML) // world3
</script>
</body>
</html>
局部查找：
不能经过使用 getElementById() 方法 ，由于ID原本就是惟一的
不能经过使用 getElementsByName() 方法
经过使用 getElementsByTagName() 方法
经过使用 getElementsByClassName() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div class="div2">hello </div>
<div class="div3">
<p class="div4"> world </p>
<p id="id1">黄沙百战穿金甲</p>
</div>
<p>2017</p>
</div>
<script>
/*----------------------------根据局部查找内容---------------------------------------*/
// 经过ClassName局部查找,返回一个数组
var me = document.getElementsByClassName("div3")[0]; //本来返回一个数组，这里取第一个
var inner = me.getElementsByClassName("div4")[0]; //本来返回一个数组，这里取第一个
console.log(inner.innerHTML) // world
// 经过ClassName局部查找,返回一个数组
var me0 = document.getElementsByClassName("div3")[0]; //本来返回一个数组，这里取第一个
var inner0 = me0.getElementsByTagName("p");
console.log(inner0.length) // 2, 取出div3标签下面的p标签的个数
// 不支持经过getElementById局部查找,由于ID原本就是惟一的，不须要局部去取
var me1 = document.getElementsByClassName("div3")[0]; //本来返回一个数组，这里取第一个
var inner1 = me1.getElementById("id1"); // 报错，me1.getElementById is not a function,全局惟一，因此不能局部去取
console.log(inner1.innerHTML)
// 不支持经过getElementsByName局部查找[不经常使用]
var me2 = document.getElementsByName("id2"); //本来返回一个数组，这里取第一个
var inner2 = me2.getElementsByName("id1")[0]; // 报错，me2.getElementsByName is not a function
console.log(inner2.innerHTML)
</script>
</body>
</html>
HTML DOM Event(事件)
HTML 事件触发浏览器中的动做（action），好比当用户点击某个 HTML 元素时启动一段 JavaScript。
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素得到焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,表明已经输入完了,咱们能够对它进行验证. onchange 域的内容被改变。 应用场景：一般用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
输入框实例：涉及ondblclick , onclick, onfocus, onblur,onsubmit 确认按钮被点击。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p ondblclick='alert("666")'>双机显示666</p>
<p onclick='alert("123")'>单机显示123</p>
请输入:<input id="kw" name="inputStr" type="text" value="请输入" onfocus="fun1()" onblur="fun2()"/>
<script>
var kw;
function fun1() {
kw = document.getElementById("kw");
kw.value=' ';
}
function fun2() {
var kw = document.getElementById("kw");
if(kw.value.trim().length==0){ // 利用trim去除空格
kw.value='请输入 '
}
}
</script>
</body>
</html>
onchange():域的内容被改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select onchange="fun1()">
<option>陕西</option>
<option>山西</option>
<option>河西</option>
</select>
<script>
function fun1() {
alert('hello')
}
</script>
</body>
</html>
onkeydown/onkeyup/onkeypress(): 按键的操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这里表示按下press1后，按任意一个键盘就会显示-->
<input type="button" value="press1" onkeydown="fun1(event)" onkeyup="fun0()">
<!--这里表示按下press2后，长按任意一个键盘就会显示-->
<input type="button" value="press2" onkeypress="fun2(event)">
<script>
function fun1(e) {
console.log('up')
}
function fun1(e) {
alert(e.keyCode)
}
function fun2(e) {
alert('hello world 2017')
}
</script>
</body>
</html>
onload() 一张页面或一幅图像完成加载。
onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情咱们但愿页面加载完马上执行,那么可使用该事件属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 方法一：
function fun1() {
var obj = document.getElementById('hello');
alert(obj.nodeName)
}
// 方法二[推荐]：此时不须要给body添加onload属性了
// 一个窗口表明一个页面，一个页面加载完后执行后面这个
window.onload=function () {
var obj = document.getElementById('hello');
alert(obj.nodeName)
}
</script>
</head>
<!--整个文档加载完后实现fun1()函数
若是不加函数的状况下在script里面执行alert会报错，由于文档还没加载完,找不到属性-->
<body onload="fun1()">
<p id="hello">hello</p>
</body>
</html>
mouse属性：鼠标操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>div { width: 300px; height: 100px; background-color: yellowgreen; } </style>
<script>
function down() {console.log('down'); }
function over() {console.log('over'); }
function move() {console.log('move'); }
function out() {console.log('out') ; }
</script>
</head>
<body>
<div onmousedown="down()" onmousemove="move()" onmouseover="over()" onmouseout="out()">
hello world
</div>
</body>
</html>
绑定事件的2种方式：
-- 元素标签内添加onclice()方法;
-- 经过elements找到元素对象后，执行onclick(),方便HTML和JS的代码解耦，保证代码的同一性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--绑定事件方法一： onclick="func()"-->
<p id="hello" onclick='alert("hello world")'>黄沙百战穿金甲</p>
<!--绑定事件方法二【推荐:JS和HTML代码解耦】： 经过elements找到元素对象后执行onclick函数-->
<p id="world">不破楼兰终不还</p>
<script>
var obj = document.getElementById("world");
obj.onclick = function () {
alert("hello world")
}
</script>
</body>
</html>
onsubmit():
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.若是验证失败.在该方法中咱们应该阻止表单的提交.
表单取消的2种方式：
1.event.preventDefault
2.return false取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--取消form代码提交方式一：经过event来取消表单的提交-->
<form onsubmit="check(event)">
<label for="username">用户名 <input type="text" id = "username" name="username"></label>
<label for="submitt"><input type="submit" id = "submitt" name="password"></label>
</form><hr/>
<!--取消form代码提交方式二：经过给浏览器返回false来取消表单提交-->
<form id="form1" onsubmit="return check2()"> <!--注意返回给浏览器一个false值来取消提交-->
<label for="username1">用户名1<input type="text" id = "username1" name="username"></label>
<label for="submitt1"><input type="submit" id = "submitt1" name="password"></label>
</form><hr>
<script>
function check(event) {
event.preventDefault()// 取消表单内容的提交
}
function check2() {
alert("hello world");
return false;
}
}
</script>
</body>
</html>
event: 对象的状态
Event 对象表明事件的状态，好比事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件一般与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经建立好了,而且会在事件函数被调用时传给事件函数.咱们得到仅仅须要接收一下便可.
事件传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{ width: 300px; height: 200px; background-color: #84a42b; }
#div2{ height: 100px; width: 100px; background-color: rebeccapurple; }
</style>
</head>
<body>
<div id="div1" onclick="alert('div1')">
<div id="div2" onclick="func1(event)"></div>
</div>
<script>
function func1(e) {
alert('div2');
// 取消事件的延时扩展,不然点击div2区域后,前后打印 div2 -> div1
e.stopPropagation(); // 取消事件的延伸，只打印div2
}
</script>
</body>
</html>
node的CURD：
增删改查
增:
1.createElement(name)建立元素
2.appendChild();将元素添加
删:
1.得到要删除的元素
2.得到它的父元素
3.使用removeChild()方法删除
改:
第一种方式:使用上面增和删结合完成修改
第二种方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
查: 使用以前介绍的方法.
修改 HTML DOM
1. 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
2. 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
3. 建立新的 HTML 元素
createElement(name)
4. 删除已有的 HTML 元素
elementNode.removeChild(node)
5. 改变 CSS 样式
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #div1{ width: 300px; height: auto; background-color: #ffff5d; }</style>
<script>
num = 2016;
// document添加子属性
function add() {
var fat = document.getElementById('div1');
var son = document.createElement('p');
son.innerHTML='<b style="color: blue">"hello world "</b>' + num; <!--这里的innerHTML会解析html元素-->
// son.innerText='<b>"hello world "</b>' + num; <!--这里的innerText只会添加文本元素-->
num++;
fat.appendChild(son);
}
// document删除子属性
function del() {
var fat = document.getElementById('div1');
last_son = fat.lastChild;
fat.removeChild(last_son);
num=2016;
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="add" onclick="add()">
<input type="button" value="del" onclick="del()">
</div>
</body>
</html>
改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"> hello world 2018</div>
<input type="button" id="add" value="add">
</body>
<script>
var father = document.getElementById("add");
father.onclick=function () {
var div2 = document.getElementById("div1");
var son = document.createElement("img");
// 动态导入
// son.setAttribute("src", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515685636654&di=990da250dc772bf9ec91749630fcb14f&imgtype=0&src=http%3A%2F%2Fmingxing.wubaiyi.com%2Fuploads%2Fallimg%2F111018%2F1HG2LX-0.jpg");
// 静态导入
son.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515685636654&di=990da250dc772bf9ec91749630fcb14f&imgtype=0&src=http%3A%2F%2Fmingxing.wubaiyi.com%2Fuploads%2Fallimg%2F111018%2F1HG2LX-0.jpg"
div2.appendChild(son);
}
</script>
</html>
关于class的操做
elementNode.className
elementNode.classList.add
elementNode.classList.remove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{ width: 300px; height: auto; background-color: #ffff5d;}
.bigger { font-size: 50px; color: blue;}
.small { font-size: 23px; color: #bc2fff;}
</style>
<script>
function big() {
var fath = document.getElementById('div1');
fath.classList.add("bigger")
}
function small() {
var fath = document.getElementById('div1');
fath.classList.remove("bigger")
fath.classList.add("small")
}
</script>
</head>
<body>
<div id="div1"> hello world 2018 </div>
<input type="button" value="A+" onclick="big()">
<input type="button" value="A-" onclick="small()">
</body>
</html>
伪协议：取消a标签自身的功能
<a href="javascript:show()">百度</a> //执行show()方法
this代指着当前的一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--此时的浏览器页面不做跳转了,做用相似于onlick()-->
<a href="#XXX">百度</a> <!--浏览器url栏会多一个#XXX-->
<a href="javascript:show()">百度</a> <!--执行show()函数，返回显示666-->
<a href="javascript:void(0)">百度2</a> <!--点击不跳转，不执行任何函数，不接收任何返回值-->
</body>
<script>
function show() {
return "666";
}
</script>
</html>
做用域
【更多参考】http://www.cnblogs.com/wupeiqi/p/5649402.html
1. if while等控制语句并无本身做用域；而函数是有本身的做用域的；
2.JS和JAVA同样，会在函数加载完成后去执行代码，因此变量名，函数名相同的会覆盖
注意：Py是加载一行，执行一行代码
<script>
//--------------------------------------- 做用域 ---------------------------------------
if(1==true) {s = 100;} console.log(s); // 100
//function f(){var ss=99;} console.log(ss); // 报错，局部变量，ss is not defined
//function ff(){var sss=98;} ff(); console.log(sss); // 报错，函数执行了，可是sss是局部变量; sss is not defined
function fff(){ssss=97;} console.log(ssss); // 报错，函数未执行,全局变量未加载；ssss is not defined
function ffff(){sssss=96;} ffff(); console.log(sssss); // 96 全局变量
</script>
做用域，做用域链
- 做用域链在函数被解释的过程当中已经建立（函数作为做用域）
- 提早声明
############### 一、JavaScript中以函数作为做用域 ##############
############### 二、JavaScript函数在被调用以前（解释器解释过程当中）做用域链已经存在 ##############
############### 三、JavaScript 声明提早 ##############
<script>
xo = 'alex';
function f1(){
var xo = 'eric';
function f2(){
console.log(xo);
}
var xo = '666';
return f2
}
var xxxxx = f1()
xxxxx() // 666
function func(){
var ox;
console.log(ox); // undefined
}
function func(){
// 做用域提早，已经提早解释了var ox;
console.log(ox); // undefined
var ox = 'alex';
}
func()
</script>
思考题：
<script>
for (var i=1; i<=9; i++) {
setTimeout( function timer(){
console.log( i );
},1000 ); //1秒后执行timer()函数，可是for循环是瞬间完成的，快速执行下次i++了
}
</script> // 执行了9次循环，可是console打印的时候须要1秒，for已经执行完成循环
// 此时的i执行了i++,值为10了，因此结果Wie： 9个10