JavaScript基础笔记_js像项鯗弶呛铅峠拤黔茜醤讲溏躺汤倩-优快云博客

这篇博客详细介绍了JavaScript的历史、基本语法、数据类型、流程控制、函数、对象、内部对象、DOM操作以及面向对象编程。内容涵盖ECMAScript标准、字符串、数组、对象、函数定义、变量作用域、JSON、AJAX、日期对象、JSON对象和Ajax请求。同时，深入讲解了JavaScript中的原型对象、类继承以及DOM操作方法，包括获取、更新、删除和添加DOM节点。此外，还涉及到了表单验证和jQuery库的基本使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频链接：遇见狂神-B站

笔记参考链接：笔记参考链接-廖雪峰

1 简介

JavaScript历史

要了解JavaScript，我们首先要回顾一下JavaScript的诞生。

在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。

为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

ECMAScript

因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。

所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。

那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。

不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。

JavaScript版本

JavaScript语言是在10天时间内设计出来的，虽然语言的设计者水平非常NB，但谁也架不住“时间紧，任务重”，所以，JavaScript有很多设计缺陷，我们后面会慢慢讲到。

此外，由于JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。

由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这就导致你在写JavaScript的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。

不过，JavaScript的核心语法并没有多大变化。我们的教程会先讲JavaScript最核心的用法，然后，针对ES6讲解新增特性。

2 基本语法

语法

JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{...}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。

注释

以//开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略：

另一种块注释是用/*...*/把多行字符包裹起来，把一大“块”视为一个注释：

3 数据类型

3.1、字符串

3、多行字符串编写

//tab上面esc下面
vae msg= 
    `
  hello
  你好呀
  你好
    `

4、模板字符：

var name = "chenshuang"
		 var age = "20"
		  var m = `你好，${name}`

5、字符串长度

str.length

6、字符串的可变性，不可变

7、大小写转换：用的方法

student.toUpperCase()
student.toLowerCase()

8、获取下标

stduent.indexOf('t')

9、substring

student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)[1,3)

3.2、数组

Array可以包含任意数据类型

var arr = [1,2,3,4,5]
arr[0]
arr[0]=1

1、长度

arr.length

注意：假如给 arr.length 赋值，数组大小发生变化，如果赋值过小，元素丢失。

2、indexOf

arr.indexof(2)
1

字符串的“1”和数字1是不同的

3、slice()截取Array的一部分，返回一个新数组

4、push、pop

push：压入到尾部
pop：弹出尾部的一个元素

5、unshift(),shift()头部

unshift:压入到头部
shift：弹出头部的一个元素

6、排序用sort（）

7、元素反转 arr.reverse()

8、拼接 concat（）

注意：concat()并没有修改数组，只是会返回一个新的数组。

9、连接符join

打印拼接数组，使用特定的字符串连接

10、多维数组

fill 填充

数组：存储数据（如何存、如何取、方法都可以自己实现）

3.3、对象

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
//定义了一个person对象，它有四个属性。
var person = {
    name:"chenshuang",
    age:3,
    email:"chenshuanhg@qq.com",
    score:100
}

JS中对象，{……}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间用逗号隔开，最后一个属性不加逗号！

JavaScript 中所有的键都是字符串，值是任意对象！

1、对象赋值

person.name = "chenshuang"

2、使用一个不存在的对象属性不会报错！

person.hhhh
undefined

3、动态删减属性，通过delete删除

delete person.name
true

4、动态的添加，直接给新的属性添加值就可以

person.haha = "haha"
"haha"

5、判断属性值是否在这个对象中！ xxx in xxx!

'age' in person
true
//继承
'toString' in person
true

6、判断对象中是否拥有这个属性 | hasOwnProerty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4流程控制

if判断

var age =22;
		if(age>22){
			alert("生活苦恼");
		}	else if(age<40){
			alert("仍要努力");
		}else{
			alert("加油");
		}

while循环，避免程序死循环

var age =22;
		while(age<24){
			age=age+1;
			alert(age)
		}

        do {
			age=age+1;
			alert(age)
		}while(age<24);//先执行一次

for循环

var age =22;
		for (let i = 0; i < 5; i++) {
			age = age +2;
			alert(age);
		}

forEach循环 :ES6新特性

var age =[12,23,23,23,43,45]
//函数
		age.forEach(function (value){
			console.log(value)
		})


for…in


var age =["chen",2,"cs",3,"shuang"]
		//for (var index in object){}
		for(var num in age){
			if(age.hasOwnProperty(num)){
				console.log("存在")
				console.log(age[num])
			}
		}

3.5 Map和Set

ES6的新特性~~

Map:

//var names =["tom","jack","jerry"];
//var scores = [100,50,80];
		
		var map =new Map([['tom',100],['jack',50],['jerry',80]]);
		var name = map.get('tom');   //通过key获取value；
		map.set('admin',66);    //新增或修改
		map.delete('tom');      //删除
		console.log(name);

Set:无序不重复的集合

var set = new Set([2,3,1,2,1,1,1]);//set可以去重
		set.add(66); //增加
		set.delete(1); //删除
		console.log(set.has(3)) //是否包含某个元素

3.6 iterator

使用itrator遍历迭代我们的Map，Set！

遍历数组

//通过for of  / for in 下标
var arr = [3,4,5];
		for (var x of arr){
			console.log(x);
		}

遍历map

var map =new Map([['tom',100],['jack',50],['jerry',80]]);
		for (var x of map){
			console.log(x);
		}

遍历set

var set = new Set([5,6,7])
		for (var x of set){
			console.log(x);
		}

4、函数

4.1定义函数

绝对值函数

定义方式一:

function abs(x){
    if(x>=0){
        return x;
     }else{
         return -x;
     }
}

执行到return函数结束，返回结果！

没执行return，函数也会返回结果，结果为：undefined！

定义方式二

var abs = function(x){
    if(x>=0){
        return x;
     }else{
         return -x;
     }
}

function(x){……}是一个匿名函数，把结果赋值给abs，通过abs就可以调用函数。

调用函数

abs(10)  //10
abs(-10) //10

参数问题：javaScript 可以传任意个参数，也可以不传递参数~

参数进来是否有问题？以及如果参数不存在，应如何规避？

var abs = function(x){
		//手动抛出异常来判断
    if(typeof x!=='number'){
        throw 'Not a Number'
    }
	 
	  if(x>=0){
		  return x;
	  }else{
	      return -x;
	       }
	}

arguments

arguments是JS免费赠送的关键字，用来传递所有的参数！是一个数组！

var abs = function(x){
					     console.log("x>="+x);
						 
					    for(var i = 0; i<arguments.length;i++){
							console.log(arguments[i]);
						}
						
					     if(x>=0){
					        return x;
					    }else{
					        return -x;	 
                       }
					}

问题:arguments 包含所有的参数，我们有时候想使用

多余的函数进行附加操作，需要排除已有参数~

rest

以前：

if (arguments.length>2){
    for(var i = 2; i<arguments.length;i++){
        //.....
    }
}

ES6引入新特性，获取除了已经定义的参数外的所有参数~

function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest参数只能写在最后面，必须用 ... 标识。

4.2变量的作用域

在javascript中，var定义变量有作用域。

如果在函数体中生命变量，在函数体外部不能使用。（若想实现，研究闭包）

function cs(){
    var x = 1;
    x = x + 1;
}
x = x +2;  //报错

如果两个函数使用相同变量名，只要在函数体内部，就不会冲突。

function cs(){
    var x = 1;
    x = x + 1;
}

function cs2(){
    var x = 'A';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之不可以

function cs(){
    var x = 1;
    //内部函数可以访问外部函数的成员，反之不可以
    function cs2(){
       var y = x + 1;
}
    var z = y + 1; //报错
}

假设，内部变量和外部变量重名

function cs(){
			var x = 1;
			function cs2(){
	    		var x ='A';
	           		console.log('inner'+x);
		}
		 	console.log('outer'+x);
			cs2()
		}

假设在JavaScript中函数查找变量从自身函数开始~，由 “内” 向 ”外“ 查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function cs() {
    var x = "x" + y;
    console.log(x);
    var y = "y";
}

结果：undefined

结果：JS执行引擎，自动提升了y的声明，但是不会提升变量y 的赋值。

function cs(){
    var y;
    var x = "x" + y;
    console.log(x);
    y = 'y';
}

在JavaScript建立之初就存在的特性。

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码的维护；

function cs(){
    var x = 1,
        y = x + 1,
        z,i,a; //undefined
    
    //之后随意用
}

全局函数

//全局变量
x = 1;

functionf(){
    console.log(x);
}
f();
console.log(x);

全局对象window

var x = 'xxx';
alert (x);
alert (window.x);

alert() 这个函数本身就是一个window变量

var x='chenshuang';
					window.alert(x);
					var old_alert = window.alert;
					
					window.alert = function(){
						
					}
		//恢复
					x='bianle';
					window.alert = old_alert;
					window.alert(x);

Javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 RefrenceError

规范

由于我们所有的全局变量都会绑定到window头上，所以如果JS文件不同，但使用了相同的全局变量，就会冲突------>怎样可以减少冲突？

var ChenShuang ={};
					ChenShuang.name = 'chen';
					ChenShuang.add = function(a,b){
						return a+b;
					}

把自己的代码全部放入到自己定义的唯一的空间名字中去，降低全局命名的冲突问题~【比如jQuery】

局部作用域let

function aaa(){
			for(var i = 0; i<100; i++){
				console.log(i);
			}
				console.log(i+1);
			}

ES6 let 关键字，解决局部作用域冲突的问题！

function bbb(){
			for(let i = 0; i<100; i++){
				console.log(i);
     	}
			    console.log(i+1);
		}

建议用let去定义局部作用域的变量；

常量const

在ES6之前，怎样定义常量：只有全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI = '3.14';

console.log(PI);
PI = '321'; //这个值可以随意改变
console.log('PI');

在ES6引入了常量关键字 const

const PI = '3.14';
console.log(PI);
PI = '123' //不可以改变PI的值

4.3、方法

定义方法

方法就是把函数放到对象里面，对象里面只有两个东西：属性和方法

var chenshuang = {
						name :'陈爽',
						birth: 1999,
						 //方法
						 age: function(){
							 //今年-出生的年
							 var now = new Date().getFullYear();
							 return now-this.birth;
						 }
					}
//属性
chenshuang.name
//方法，一定要带（）
chenshuang.age()

this.代表什么？

function getAge(){
						 //今年-出生的年
			 var now = new Date().getFullYear();
			 return now-this.birth;
	}
					
	var chenshuang = {
			name :'陈爽',
			birth: 1999,
	        age: getAge
	}
  //chenshuang.age() ok
  //getAge() NaN window

this是无法指向的，是默认指向调用它的那个对象；

apply在JS中可以控制this的指向

function getAge(){
			//今年-出生的年
			 var now = new Date().getFullYear();
				 return now-this.birth;
			}
					
					var chenshuang = {
					name :'陈爽',
					birth: 1999,
					age: getAge
			}
                    var xiaoming = {
					name :'小明',
					birth: 2000,
					age: getAge
			}
	getAge.apply(xiaoming,[]); //this指向了xiaoming，参数为空。

5、内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

var now = new Date();   //Thu Sep 16 2021 15:05:38 GMT+0800 (中国标准时间)
	now.getFullYear();  //年
	now.getMonth();     //月   0~11 代表月
	now.getDate();      //日
	now.getDay();       //星期几
	now.getHours();     //时
	now.getMinutes();   //分
	now.getSeconds();   //秒
			
	now.getTime();     //时间戳 全世界统一  1970 1.1 0:00:00 毫秒数

转换

now = new Date()
Thu Sep 16 2021 15:05:38 GMT+0800 (中国标准时间)
now.toDateString

ƒ toDateString() { [native code] }  //注意：调用是一个方法，不是属性
now.toGMTString

"Thu Sep 16 2021"
now.toGMTString()
"Thu, 16 Sep 2021 07:05:38 GMT"
now.toISOString()
"2021-09-16T07:05:38.875Z"

5.2 JSON

Json是什么？

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示；number，string……

格式：

对象用{}

数组用[]

所有的键值对都是用 key:value

JSON字符串和JS对象的转换

var  user = {
				name:"chenshuang",
				age:3,
				sex:'男'
			}
//对象转化为json字符串{"name": "chenshuang", "age": 3, "sex": "男"}
	var jsonUser = JSON.stringify(user);
//json字符串转化为对象 参数为json 字符串
	var obj = JSON.parse('{"name": "chenshuang", "age": 3, "sex": "男"}')

JSON 与 JS 的区别

var obj  =  {name: "chenshuang", age: 3, sex: "男"};
var json = '{"name": "chenshuang", "age": 3, "sex": "男"}' //整个字符串

5.3、Ajax

原生的js写法 xhr 异步请求

jQury 封装好的方法 $("#name").ajax("")

axios 请求

6、面向对象编程

原型对象

6.1什么是面向对象？

Java 、JavaScript 、C#等。

类：模板

对象：实例

原型

var Student = {
			name:'xuesheng',
			age: 3,
			run : function(){
				console.log(this.name+"run…………");
			   },
			}
			
		var chenshuang = {
			name:'陈爽',
		};
		    //原型对象
			chenshuang.__proto__= Student;

class继承

classES6引入

1、定义一个类，属性，方法

class Student{
			constructor(name) {
			    this.name = name ;
			}
			hello(){
				alert('hello');
			}
		}
		var xiaoming = new Student("xiaoming");
		var chenshuang = new Student("chenshuang");

       xiaoming.hello

2、继承

class Student{
			constructor(name) {
			    this.name = name ;
			}
			hello(){
				alert('hello');
			}
		}
		
		class Xiaostudent extends Student{
			constructor(name,grade) {
			    super(name);
				this.grade = grade;
			}
			myGrade(){
				alert('我是一名小学生')
			}
		}
		var xiaoming = new Student("xiaoming");
		var chenshuang = new Xiaostudent("chenshuang",1);

本质：查看对象原型

原型链

7、操作DOM对象（重点）

浏览器介绍

JavaScript 和浏览器关系？

JavaScript 诞生就是为了能够在浏览器中运行！

BOM：浏览器对象模型

IE 6~11

Chrome

Safari

FireFox

第三方

QQ浏览器、360浏览器……

window(重要)

window代表浏览器窗口

window.alert()
undefined
window.innerHeight
538
window.innerWidth
150
window.outerHeight
651
window.outerWidth
788
//可以调整浏览器窗口重新测试

Navigator [不建议使用]

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
navigator.platform
"Win32"

大部分时候不会使用Navigator对象，会被别人修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.height
864
screen.width
1536

location

location代表当前页面的URL信息

//设置新的地址
location.assign('https://www.bilibili.com/')

decument（内容；DOM）

decument 代表当前的页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='陈爽'
"陈爽"

获取具体的文档树节点

<dl id="app">
		     <dt>Java</dt>
			 <dd>Java EE</dd>
			 <dd>Java SE</dd>
</dl>
<script>
   var dl = document.getElementById('app')
</script>

获取cookie

document.cookie
"BIDUPSID=462F95F814874423037DC8AFC88C8D39; PSTM=1630843094; BAIDUID=462F95F8148744230F87EFE94DBA0160:FG=1; BD_UPN=12314753; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; COOKIE_SESSION=3214_0_1_0_11_2_0_0_0_1_0_1_3056_0_57_0_1631931818_0_1631931761%7C6%230_0_1631931761%7C1; BD_HOME=1; H_PS_PSSID=34653_34442_34068_31254_34655_34004_34600_34584_26350_34627_34415_34557_34691_34678; BA_HECTOR=akal84aga50081al3e1gkba0h0q"

劫持cookie原理

www.taobao.com

<script src="aa.js"></script>
//恶意人员：获取你的cookie上传到他的服务器

服务器端可以设置cookie：httpOnly

history（不建议使用）

history 代表浏览器的历史纪录

history.back()     //后退
history.forward()  //前进

8、核心

浏览器网页就是一个树形结构！

【更新】：更新Dom节点

【遍历dom节点】：得到Dom节点

【删除】：删除一个Dom节点

【添加】：添加一个新的节点

如果想操作Dom节点，首先要获得这个Dom节点。

获得dom节点

var h1 = document.getElementsByTagName('h1');
	var p1 = document.getElementById('p1');
	var p2 = document.getElementsByClassName('p2');
	var father = document.getElementById('father')	; 
	
	var children = father.children; //获取父节点下的所有子节点

//father.firsChild
//father.lastChild

这是原生代码，之后尽量用jQurery

更新节点

  <div id='id1'>
			
   </div>
<script>
       var id1 = document.getElementsByTagName('id1');
</script>

操作文本

id1.innerText='2323'//修改文本的值

id1.innerHTML='<strong>123</strong>'//可以解析HTML文本标签

操作CSS

id1.style.color = 'yellow';   //属性使用 字符串 包裹
id1.style.fontSize = '20px';  //注意： 驼峰命名问题
id1.style.padding = '2em';

删除节点：

删除节点的步骤，先获取父节点，再通过父节点删除自己

<div id='father'>
			<h1>标题一</h1>
			<p id ="p1">p1</p>
			<p id="p2">p2</p>
</div>
<script>
    var self = document.getElementById('p2')
	var father = p2.parentElement;  //查看父节点id
	father.removeChild(self);
    
    //删除节点是一个动态的过程；
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

注意：删除多个节点的时候，children是时刻在变化的，删除节点的时候一定要注意！

插入节点

获得某个Dom节点，假设这个Dom是空的，可以通过innerHTML增加一个元素，但是这个DOM节点已经存在，就会产生覆盖，不可以这么做！

追加

<p id = "js">JavaScript</p>
		<div id='list'>
			<p id ="se">JavaSE</p>
			<p id ="ee">JavaEE</p>
			<p id ="me">JavaME</p>
        </div>
<script> 
     var js =document.getElementById('js');
	 var list = document.getElementById('list');
     list.appendChild(js);  //追加到后面
</script>

效果：

创建一个新的标签，实现插入

<script> 
     var js =document.getElementById('js');  //已经存在的节点
		var list = document.getElementById('list');
		var newP = document.createElement('p');  //创建一个P标签
    //通过JS创建一个新的节点
		newP.id = 'newP';
		newP.innerText='hello,chenshaung';
	//创建一个标签节点
		var myScript = document.createElement('script');
		myScript.setAttribute('type','text/javascript');
	//可以创建一个Style标签	
		var myStyle = document.createElement('style');       //创建了一个空style标签
		myStyle.setAttribute('type','text/css');
		myStyle.innerHTML = 'body{background-color:chartreuse}';   //设置标签内容
		
		document.getElementsByTagName('head')[0].appendChild(myStyle)
	
	
</script>


insert



var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list= document.getElementById('list');
	
	//要包含的节点.insertBefore(newNode,targetNode)
	list.insertBefore(js,ee)   //把js节点插入到ee节点前面

9、操作表单（验证）

表单是什么 form DOM树

【文本框】 text

【下拉框】

【单选框】radio

【多选框】checkbox

【隐藏域】hidden

【密码框】password

【……】

表单的目的：提交信息

获得要提交的信息

<p>
	<span>用户名</span><input type="text"  id="username" />
</p>
<p>
	<span >性别：</span>
	<input type="radio" name="sex" id="boy" value="man" />男
	<input type="radio" name="sex" id="girl" value="woman" />女
</p>
<script>
    var input_text = document.getElementById('username');
	var boy_radio  = document.getElementById('boy');
	var girl_radio = document.getElementById('girl');
		
	//得到输入框的值
	input_text.value
	//修改输入框的值
	input_text.value = '123'
		
	//对于单选框，多选框等等固定的值，boy_radio.value只能获取到当前的值
	boy_radio.checked;  //查看返回的结果，是否为true，如果为true，则被选中；
	girl_radio.checked = true; //赋值
</script>

提交表单

MD5算法，把密码隐藏,表单优化

//引入MD5工具包
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
function aaa(){
			var uname = document.getElementById('username');
			var pwd = document.getElementById('password');
			console.log(uname.value);
			console.log(pwd.value);
			//md5算法
			pwd.value = md5(pwd.value);
			console.log(pwd.value);	
		}
</script>
<body>
    <form action="#" method="post">
<p>
	<span>用户名:</span><input type="text"  id="username" name="username"/>
</p>
<p>
	<span>密码:</span><input type="password"  id="password" name="password"/>
</p>
<!--绑定事件，onclick被点击-->
<button type="submit" onclick="aaa()">提交</button>
	</form>
</body>

高级

//引入MD5工具包
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
    function aaa(){
		alert(121)
		var uname = document.getElementById('username');
		var pwd = document.getElementById('input-password');
		var md5pwd = document.getElementById('md5-password');
			
		md5pwd.value = md5(pwd.value);
	//可以校验判断表单内容，true就是通过提交，false阻止提交
		return false;
		}
</script>

<body>
<!--
	表单绑定提交事件
	onsubmit= 绑定一个提交检测的函数，true，false
	将这个结果返回给表单，使用onsubmit接受！
	onsubmit = "return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
	<p>
		<span>用户名:</span><input type="text"  id="username" name="username"/>
	</p>
	<p>
	    <span>密码:</span><input type="password"  id="password" name="input-password"/>
	</p>
	    <input type="hidden" name="password" id="md5-password" />
<!--绑定事件，onclick被点击-->
		<button type="submit" onclick="aaa()">提交</button>
</body>

10、jQuery

jQuery库,里面存在大量的JavaScript函数

获取jQuery

<head>
   <!--CDN引入-->
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

公式 $(selector).action() $(选择器).事件()

选择器

<script>
  	//原生JS，选择器少，麻烦不好记
	//标签
	document.getElementsByTagName();
	//id
	document.getElementById();
	//类
	document.getElementsByClassName();
		
	//jQuery  css 中的选择器它全部能用！
	$('p').click();//标签选择器；
	$('.id1').click();//id选择器；
	$('.class1').click();//类选择器；
		
</script>

文档工具栈：

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

事件：

鼠标事件、键盘事件、其他事件

mousedown() 鼠标按下事件

muosemove() 鼠标移动事件

<style type="text/css">
	#divMove{
		    width: 500px;
			height: 500px;
			border: 1px aqua solid;
		}
</style>
<script>
 $(function(){
	$('#divMove').mousemove(function(e){
	    $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
	})
})
</script>
<body>
    mouse: <span id="mouseMove"></span>
		<div id="divMove">
			在这里移动鼠标试试~
		</div>
</body>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值');//设置值

$('#test-ul').html(); //获得值
$('#test-ul li[name=python]').hide()//设置值

css的操作

$('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质dispaly:none;

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()