JavaScript基础知识

1、简介

1、javascript是一面向对象的解释型语言，是实现动态前端页面的，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度。
2、javascript体系由ECMAScript、DOM、BOM组成。

2、基本用法

js有三种引入方式：1、行内引用  2、js内部引用  3、外部文件引入

测试代码

<body> 
	<!-- 行内js js写在html中
	     onclick是属于单击事件
		 alert属于窗口事件
	-->
	<button onclick="alert('hello word');">点击一下你就懂了！</button>
	<!-- 外部js 引入 在标签内编写js语言无效！ -->
	<script src="js/test.js" type="text/javascript" charset="UTF-8">
	</script>
	<!-- js标签中编写代码
	      可以在html中head、title、body中，但是建议放在body后，因为代码是从上往下执行的
		  先加载完html后再加载js
	 -->
	<script type="text/javascript">
	  console.log('在标签中打印控制台输出！');	
	</script>
	</body>

3、js命名规则、标识符

//表示单行注释
/** **/表示多行注释
1、javascript是一行一行执行的。
2、javascript一行结束以分号结尾，也可以不写分号，但是不写分号多个语句不能在同一行，否则会报错（弱类型语言）。
3、标识符命名规则：1、由unicode字符、下划线、$、中文组成。
2、不能以数字开头  3、不能是保留字或者关键字  4、使用驼峰命名法（见名知意）5、严格区分大小写

4、变量

定义变量名的时候用var表示一切数据类型。
可以先定义后赋值。
可以同时赋值多个。
如果只是定义未赋值会出现undefinded，不会报错。
如果已经定义了，后面重复定义未赋值，变量名无效。
如果重新定义赋值，会覆盖已经定义的值。
如果未定义变量，直接使用  会报错
变量提级：如果先使用变量，后定义变量  会出现undefinded
数值型（Number）统一使用64位浮点型存储，尽量不要使用float进行比较，会失去数据精度。小数后为0或者没有小数会自动转换为int型。

测试代码

//  //表示单行注释
		// /** **/表示多行注释
		/**1、javascript是一行一行执行的。
		   2、javascript一行结束以分号结尾，也可以不写分号，但是不写分号
		      多个语句不能在同一行，否则会报错（弱类型语言）。
		**/
		//标识符命名规则：1、由unicode字符、下划线、$、中文组成。
	    //2、不能以数字开头  3、不能是保留字或者关键字  4、使用驼峰命名法（见名知意）、
		//5、严格区分大小写
		//js数据类型有number、字符串、布尔、数组、null、object、
		//定义变量名的时候用var表示一切数据类型
		var number1=12;
		console.log(number1);
		//可以先定义后赋值
		var number2;
		number2=23;
		console.log(number2);
		//可以同时赋值多个
		var c=1,d=3,e=4;
		console.log(c,d,e);
		//如果只是定义未赋值会出现undefinded，不会报错
		var a;
		console.log(a);  //undefinded
		//如果已经定义了，后面重复定义未赋值，变量名无效
		var number1;  //此定义无效
		console.log(number1);//还是打印第一行的变量名
		//如果重新定义赋值，会覆盖已经定义的值
		var number1='你好！';
		console.log(number1);//你好
		//如果未定义变量，直接使用  会报错
		//console.log(b);  b is not defined
		//变量提级  如果先使用变量，后定义变量  会出现undefinded
		//相当于  var b; console.log(b); b='李四'; 
		console.log(b);
		var b='李四';
		//会出现undefined的几种条件：1、声明变量未定义。 2、声明函数形参，没有传入实参。
		    //3、声明函数没有返回值。
			//undefinded是null的派生类，如果进行比较返回true
			var e=null;  //null
			var g;  //undefinded
			console.log(e==g);  //true
			//判断变量数据类的关键字  typeof
			var num1=10;
			var num2=true;
			var num3=null;
			console.log(typeof g);//undefinded
			console.log(typeof num1);  //number
			console.log(typeof num2); //boolean
			console.log(typeof num3);//object类型

5、数据类型

数据类型：number、字符串、数组、对象、布尔、
类型转换  toString()显示转换 (null、undefinded不能使用toString()方法)
所有的数据类型都可以转为字段串类型  String(值); 
 var num1=null;
 console.log(num1.toString());//报错
 var num3;
 console.log(num3.toString());//undefinded 报错
对象转换转为int型，向上取整  parseInt只取字符串数字向上取整
parsefloat只取字符串数字保留第一个小数点精度
对象转换  转为float，保留小数位 最多保留16位精度
包装类转化 Number() 
转为字符串类型  所有的类型都可以转换为字符类型

测试代码

//数据类型：number、字符串、数组、对象、布尔、
		//类型转换  toString()显示转换 (null、undefinded不能使用toString()方法)
		//所有的数据类型都可以转为字段串类型  String(值); 
		// var num1=null;
		// console.log(num1.toString());//报错
		var num2=12;
		console.log(num2.toString());//12
		// var num3;
		// console.log(num3.toString());//undefinded 报错
		//对象转换  转为int型，向上取整  parseInt只取字符串数字向上取整
		//parsefloat只取字符串数字保留第一个小数点精度
		var num1=3.1415926;
		console.log(parseInt(num1));//3
		console.log(parseInt('3.154asbc'));//3
		//对象转换  转为float，保留小数位 最多保留16位精度
		console.log(parseFloat(num1));
		console.log(parseFloat('3.12145.123'));//3.12145 只会保留第一个小数位。
		console.log(parseFloat('3.12145.123abc'));//3.12145 只会保留第一个小数位。
		//包装类转化 Number() 
		 console.log(Number(true));//1
	    console.log(Number(null));//0
		console.log(Number('one'));//NAN  不是数字
		console.log(Number(12));
		console.log(Number(undefined));  //NAN 不是数字
		var num4;  //转为字符串类型  所有的类型都可以转换为字符类型
		console.log(String(num4));
		console.log(String(null));
		//转为boolean
		console.log(Boolean(0));//false
		console.log(Boolean(1));//true
		console.log(Boolean('zwf'));//true
		console.log(Boolean(new Object()));//true
		console.log(Boolean(null));//false
		console.log(Boolean(num4));//false  undefinded类型
		//使用自定义保留精度的函数
		var num4=3.141592675;
		console.log(num4.toFixed(0));//3 四舍五入不保留小数
		console.log(num4.toFixed(1));//3.1  四舍五入不保留一位小数

6、运算符

//运算符  与java中的一样  唯一的区别就是  ==  和  ===
		//== 只比较值   ===比较值和数据类型、
		var a="123";  //字符串
		var a1=123;  //数值型
		console.log(a==a1);//true
		console.log(a===a1);//false

7、控制流程语句

控制语句的话  跟java是一样
if  else   if  elseif   else  while()  do...while  for()循环 swith() case default 开关语句
for(;;)死循环  while(true)   死循环

8、数组

数组（重点）
1、定义方式：  直接定义   对象定义  指定数组长度 
2、js中的数组长度是可以改变的  通过arr.length=长度值。
3、数组的下标索引可以是任何值（数字、字符串等）
4、数组中值可以是任意类型  不像java只能使用一种类型

测试代码

var arr1=[1,2,3,'zs','ls',true,null];
		 console.log(arr1);
		 //数组对象创建数组
		var arr2=new Array(1,2,3,'zs','ls',true,null);
		console.log(arr2);
		//指定数组长度
		var arr3=new Array(20);  //指定长度是10
		//通过索引赋值  允许数组越界。
		arr3[0]=1;
		arr3[1]=1;
		arr3[2]=1;
		arr3[3]=1;
		arr3[4]=1;
		arr3[5]=1;
		arr3['username']=1;
		//更改数组的长度 
		arr3.length=12;
		console.log(arr3);  //长度是10 未赋值的是empty
		//常用的数组方法
		console.log(arr3.push(2)); //向数组最后插入值
		console.log(arr3.unshift(2));//数组最前插入值
		 console.log(arr3.shift(2));//删除数组前面的2
		 console.log(arr3.pop(2)); //删除数组后面的2
		console.log(arr3.reverse());//数组反转
		console.log(arr3.join('-')); //数组以-相连拼成字符串
		console.log(arr3.indexOf(2)); //返回数组索引
       //截取数组值  原数组不发生变化 [1,4)
		console.log(arr3.slice(1,4));
        //截取数组下标[1,4) 拼接aa bb cc
		 console.log(arr3.splice(1,4,'aa','bb','cc'));
		console.log(arr3.concat(arr2));//数组拼接
		console.log('***************************');
		arr3['object']='object1';
		//数组的三种遍历、
        //只能打印下标为数字的数组值 包括空格
		for(var i=0;i<=arr3.length;i++){
			console.log(arr3[i]);
		}
			console.log('**************************************************');
       //可以打印下标是所有类型的值  不包括空索引
		for(var index in arr3){
			console.log(index);
			console.log(arr3[index]);  
		}
		console.log('**************************************************');
        //可以打印所有下标和值  不包括空下标和空值,不会打印对象.
		arr3.forEach(function(element,index){                
			console.log(element+"-------->"+index);
	
		});

9、函数

函数的三种定义方式:
直接定义  function 函数名([参数]){}
赋值变量定义  var f1=function([参数]){}
构造函数定义  var f1=new Function('a','b','return a+b');
调用函数的三种方法:
直接调用   函数名([实参])
有返回值赋变量调用   var s=函数名([实参])
对象函数调用

测试代码

//函数的三种定义方式
	//直接定义  function 函数名([参数]){}
	//赋值变量定义  var f1=function([参数]){}
	//构造函数定义  var f1=new Function('a','b','return a+b');
	//直接定义
	function sum(a,b){
		console.log(a+b);
	}
	sum(12,2);  //调用函数
	//赋值变量定义
	var f1=function(a,b){
		console.log(a*b);
	}
	f1(12,3);
	//构造函数定义
	var f2=new Function('a','b','return a*b+1');
	console.log(f2(12,2));  //调用构造函数
	
	
	//调用函数的三种方法
	//直接调用   函数名([实参])
	//有返回值赋变量调用    var s=函数名([实参])
	//对象函数调用
	var str=function(a,b,c){
		// console.log(a+b+c);
		return a+b+c;
	}
	var s=str(12,12,12);
	console.log(s);//36
	//对象函数调用
	var obj={
		say:function(){
			console.log('wangwamnsssss');
		}
		
	}
	obj.say();
	
	//函数的参数
	//定义多个重复的形参  以最后形参为主
	function test(a,a){
		console.log(a);
	}
	/* 赋值多个实参以最后一个为主 */
	test(10,20);
	
	//为函数设置默认值  要是不传值就返回默认值  形参||默认值
	function test1 (a,b) {
		var a1=a||1;
		var b1=b||'one';
		console.log(a1,b1);
	}
	test1(12);

10、函数的作用域

//只有函数才有作用域
	var s=12;//全局变量
	function abc(s){
		var s='局部变量';  //变量使用的就近原则
		console.log(s);
	}
	abc(s);  //传入全局变量  但是不会改变s的值  因为变量使用的是值拷贝
	console.log(s);//使用全局变量
	//不用var定义的变量是全局变量。
	function sdf(){
	 d='全局变量';  //全局变量方法内外都可以用，局部变量只能作用于方法内。
		console.log(d);
	}
	sdf();
	console.log(d);
//传入对象，对对象地址引用，会直接对对象进行操作。
	var obj={
			 name:'张三',
			 age:18,
			 isLike:true,
			 hoddy:['唱','跳','rap','吹','弹','打'],
			 say:function(){
				 console.log('speark English');
			 },
			 wife:{
				 name:'貂蝉',
				 age:185,
				 sex:'femal',
				 say:function(){
				 console.log('speark chinese');
				 }
			 }
	}
	function alter(obj){
		obj.name='小赵';
	}
	alter(obj);  
    console.log(obj);

11、内置对象

//内置对象：String null number undefinded Date 对象(函数、数组、json对象、)
	var str1='abcdeFghIjkLmnoPqrstUvwxyz';
	console.log(str1.charAt(3));  //查找下标为3的字符 从0开始找
	console.log(str1.indexOf('d'));//查找字符索引  不存在返回-1
	console.log(str1.length); //字符串长度
	console.log(str1.substring(2,5));//cde  [2,5)
	console.log(str1.substr(5,3));//Fgh  从下标5开始取3个字符
	console.log(str1.concat("abc"));//拼接字符
	console.log(str1.toLowerCase())//转小写
	console.log(str1.toUpperCase());//转大写
	//日期   其他函数用法查文档
   	var date=new Date();
	var year=date.getFullYear();//年
	var month=date.getMonth();//月
	var day=date.getDay();//日
	console.log(year,month,day);
//数学类  Math.floor() 向上取整  Math.random() [0,1)随机数  //Math.ceil()向下取整
	 console.log(Math.floor(3.1456));//向上取整
	 console.log(Math.random()*10);//0到10随机数 [0,10)
	 console.log(Math.ceil(3.568));//向下取整

12、对象

对象的创建有三种
var obj={属性:值,……};  属性是字符串  值可以是任何类型。
var obj1=new Object();创建一个空对象进行赋值。
var obj1=Object.crate(已存在的对象);参考对象模板创建

测试代码

var obj={
		 name:'张三',
		 age:18,
		 isLike:true,
		 hoddy:['唱','跳','rap','吹','弹','打'],
		 say:function(){
			 console.log('speark English');
		 },
		 wife:{
			 name:'貂蝉',
			 age:185,
			 sex:'femal',
			 say:function(){
			 			 console.log('speark chinese');
			 }
		 }
	 }
	 console.log(obj);
	 console.log(obj.say()); //调用对象函数
	 console.log(obj.name);  //调用对象属性值  如果不存在就进行创建  存在就进行覆盖或调用
	 //第二种
	 var obj2=new Object();
	 obj2.name='李四';
	 obj2.age=22;
	 console.log(obj2);
	 //第三种
	 var obj3=Object.create(obj);  //以存在的对象的为模板，不赋值为空对象。
	   obj3.name='西斯';
	  var obj4=Object.create(null); //空对象
	 console.log(obj3);
	 console.log(obj4);
	 //对象的序列化  把对象转化为JSON字符格式
	 var json1=JSON.stringify(obj);  //字符串不可以调用属性
 	 console.log(json1);  //字符串
	 //对象反序列  把JSON字符串转为对象
	 var objec=JSON.parse(json1);
	 console.log(objec);  //对象

13、this保留字

this代表自身对象，如果只在外部定义，代表window对象，如果在自定义对象使用this代表这个对象。

测试代码

   //this  代表调用对象
	 console.log(this);  //window对象
	 function add(){
		  this.s1='hello word';  //this.s1属于全局变量
		 console.log(this.s1);   //函数中this代表window对象
		  // console.log(this); 
	 }
	 add();  //调用函数
	  console.log(this.s1);  //全局变量
	  //对象中的this代表这个对象
	  var obj5={
		  name:'赵六',
		  age:18,
		  sex:'femal',
	       info:function(){
			   console.log(this.name,this.age,this.sex);//调用对象中属性
			   console.log(this);  //相当于obj5对象
		   }
	  }
	  obj5.info();//调用函数

14、原型链

在JavaScript中，原型链是用来实现继承的一种机制。在JavaScript中，每个对象都有一个原型对象，该对象的属性和方法可以被继承。
原型链的工作原理是：当访问一个对象的属性或方法时，如果在该对象本身中找不到，就会沿着原型链向上查找，直到找到为止。这样，就可以实现对象之间的继承。
原型链有以下几个用处：
1、实现继承：通过原型链，可以实现对象之间的继承，即子对象可以继承父对象的属性和方法。
2、共享属性和方法：通过原型链，可以实现多个对象共享同一个原型对象，从而节省内存空间。
3、扩展对象的功能：可以通过修改对象的原型对象来为对象添加新的属性和方法，从而扩展对象的功能。

测试代码

 var obj={
		 name:'张三',
		 age:18,
		 isLike:true,
		 hoddy:['唱','跳','rap','吹','弹','打'],
		 say:function(){
			 console.log('speark English');
		 },
		 wife:{
			 name:'貂蝉',
			 age:185,
			 sex:'femal',
			 say:function(){
			 			 console.log('speark chinese');
			 }
		 }
	 }
 //第一种使用原型链的模式以存在的对象的为模板，不赋值为空对象。obj3继承obj对象
 var obj3=Object.create(obj);  
console.log("*********调用父类方法*************");
obj3.say();
//第二种方式，编写构造器实例化调用方法
  //第二种原型链使用方法
  //定义构造函数实例化
	  function constru(){
		  
	  }
	  constru.prototype.testDemo=function(a,b){
		  return a*b;
	  }
	  var c=new constru();
	  var total=c.testDemo(12,13);
	   console.log(total);

15、事件对象

JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。
可以分为windows事件用于body标签，表单事件可以用于form标签，键盘事件，鼠标事件、多媒体事件等。（其他事件可以通过w3cSchool平台去查）
事件冒泡(事件从小到大执行)：事件源对象->body->html->document。
事件捕获(事件从大到小执行)：document->html->body->事件源对象。
Dom0事件处理方式：不能同时添加多个事件源函数，添加多个会被覆盖，可以通过设置事件源为null删除事件。
DOM2事件处理方式：可以同时添加多个事件源函数，也可以通过方法删除事件函数。
html事件处理方式：可以直接在html标签中定义事件，但是耦合度过高，事件响应不及时。
常用的事件类型：
onload：加载事件，等window对象加载完毕执行该事件。
onblur:鼠标失去焦点事件。
onfocus:鼠标聚焦事件。
onmouseover:鼠标悬停事件。
onmouseout:鼠标离开事件。
onkeyup：键盘弹起事件。
onkeydown：键盘按下事件。
onchange:改变值触发的事件，常用于下拉菜单。
想要使用更多事件，可以通过查看w3cschool文档！

测试代码

window.onload=function(){
				console.log("加载事件激活！");
			}
		<!-- 使用传统的html事件处理方式 -->
<button onclick="alert('helloword')">点击我查看！</button>
		
		<button id="btn">点击一下吧！</button>
		
<label for="uname">用户名：</label><input id="uname" class="user"  type="text" name="username" />
	  //使用DOM0事件处理方式
	  var btn=document.getElementById("btn");
	  btn.onclick=function(){
		  console.log('谢谢你点击我！');
	  }
	  //使用DOM2事件处理方式  类对象、标签对象无法使用DOM2事件 只有id选择器对象和querySelector才能使用。
	 var uname=document.querySelector('.user');//ES6语法
	 // var input=document.getElementsByName('input');
	 uname.addEventListener('blur',function(evnt){
		      console.log('这是鼠标失去焦点事件！！！');
	 },false);   //设置冒泡事件

16、BOM对象(Brower Object Model)

BOM对象是window窗口对象，可以操作对话框、打开窗口、关闭窗口、定时、获取当前页面和跳转页面。

操作对话框

<button  onclick="test1()">测试弹出提示框</button>
		<button  onclick="test2()">测试输入框</button>
		<button  onclick="test3()">测试确认框</button>
		<button onclick="test4()">打开新窗口</button>
	</body>
	<script type="text/javascript">
	 //操作BOM对象（Brower object model）
	 //操作对话框   alert() 弹出提示框   prompt() 输入框  confirm() 确认框
	//窗口打开和关闭   open([指定页面路径,_self/_blank])   close()关闭窗口
	 function test1(){
		 alert("弹出信息框");
	 }
	 function test2(){
		var value=prompt("请输入用户名：");
		alert(value);  //弹出输入信息
	 }
	 
	 function test3(){
		var flag=confirm("你确定要关闭吗？");
		if(flag){
			alert("你已关闭");
		}else{
			alert("不要乱点！");
		}
	 }
	 //测试赛窗口打开关闭  第一个参数可以跳转任何页面包括外部URL 第二个参数是打开页面的方式（_self,_blank）
	 function test4(){
		 open("javaScriptDay01_5.html","_blank");
	 }

操作定时任务

<button onclick="test()">测试超时任务</button>
		<button onclick="test1()">测试定时任务</button>
		<button onclick="test2()">取消定时任务</button>
		<button onclick="go_back()">后退</button>
		<span id="timeOut"></span>
		<div id="timeOut1"></div>

	//定时操作  setTimeOut(执行函数,时间) 时间单位是毫秒  setInterval(执行函数,时间)  时间单位是毫秒数
	//获取DOM对象
	var timeout=document.getElementById("timeOut");
	function test(){
		setTimeout(times, 1000);
		function times(){
			var date=new Date();
			 var s= date.toLocaleString();
			 timeout.innerHTML=s;
			 setTimeout(times, 1000);
		}
	}
	//以上调用可以直接通过一个函数进行调用
	var s1=document.getElementById("timeOut1");
	function  test1 () {
		t=setInterval(function(){
			var date=new Date();
			 var s= date.toLocaleString();
			 timeout.innerText=s;
		},1000);
	}
	
	function  test2 () {
		clearInterval(t);
	}
	function go_back() {
	    history.back();
	}

     function go_on () {
			 /* 跳转指定页面*/
	     	 window.location.href='javaScriptDay01_7.html';
			//获取当前页面路径
			// console.log(window.location.href);
	
	     }
		 function go_forward() {
			history.forward()
		 }
	  function go_reload(){
		  location.reload();
	  }

17、DOM对象(Document Object Model)

节点就是一个个对象，节点分为文档节点、元素节点、属性节点、文本节点、注释节点。可以对节点进行增删改查，实现节点的操作。

获取节点

var father=document.getElementById("father");  //获取id选择器节点对象，如果有多个同名的id选择器，选择第一个id选择器。
//获取类选择器节点数组对象，如果取唯一对象时要取索引为0 children[0]
var childen=document.getElementsByClassName("children");
	var li=document.getElementsByTagName("li");  //获取指定标签选择器数组对象 如果取唯一对象时要取索引为0 children[0]
	var username=document.getElementsByName("username"); //通过name属性获取选择器节点数组 如果取唯一对象时要取索引为0 children[0]
  var tag=document.querySelector('#id');//所有选择器对象获取 （#名字 id选择器   .名字  类选择器  标签名 标签选择器）

创建和插入节点

//创建节点
	var lidemo=document.createElement("li");
	lidemo.innerHTML="水果";
	//添加节点
	father.appendChild(lidemo);
	//操作input节点  进行添加(第一种方式)
   var inp=document.createElement("input");
	// inp.type='number';
	// inp.name='num';
	// inp.value='100';
	var c=document.querySelector("#container");
	// c.appendChild(inp);
	//操作input节点  进行添加(第二种方式)
	inp.setAttribute('type','number');
	inp.setAttribute('name','num');
	inp.setAttribute('value','100');
	//进行添加子元素 	
	c.appendChild(inp);
	//第三种方式  直接编写代码  通过innHTML='代码'；插入子节点
	//插入select下拉框
    var s=document.createElement("select");
	var o= document.createElement('option');
	s.setAttribute('name','hobby');
	o.setAttribute('value','baseball');
	o.innerText='棒球';
	var o1= document.createElement('option');
	o.setAttribute('value','bascketball');
	o1.innerText='篮球';
	var o2= document.createElement('option');
	o2.setAttribute('value','run');
	o2.innerText='跑步';
	s.appendChild(o);
	s.appendChild(o1);
	s.appendChild(o2);
	c.appendChild(s);
	//插入节点
	var a_=document.createElement('a');
	a_.setAttribute("href","javascript:void(0);");
	var text=document.createTextNode("测试子节点前插入元素！");//前端插入文本节点
	a_.appendChild(text);
	// console.log(a_);
	//子节点前插元素   父节点.insertBefore(插入的节点对象,子节点)；
	father.insertBefore(a_,childen);

间接查找节点

//间接查找节点
	//查找前一个节点（包括空格文本节点）
	var pre=father.previousSibling;
	//查找前一个元素节点
	var preEl=father.previousElementSibling;
	//查找后一个元素节点
	var nex=father.nextElementSibling;
	//查找后一个节点
	var nexEl=father.nextSibling;
	//查找所有的子节点  包括空白文本节点
	var child=father.childNodes;
	  //查找所有的子元素节点
	var childEl=father.children;
	  //第一个子节点
	var ft=father.firstChild;
	   //第一个子元素节点
	var ftEl=father.firstElementChild;
	console.log(pre,preEl,nex,nexEl);
	console.log(child,childEl);

删除子节点

//删除本节点前  要先获取本节点的父节点  然后通过父节点删除本节点  
father.removeChild(a_);//a_是子节点

18、表单操作

表单html样式

<form action="http://www.baidu.com" method="get"  name="form1" id="form1" onsubmit="return checkForm2()" >
			     <label for="user">用户名：</label>
			     <input type="text" name="username" id="user"/>
				 <!--button标签普通按钮标签中只能使用 onclick="checkForm()" onclick里的值不能加return-->
				 <button type="button"  onclick="checkForm()">提交</button>
				 <!-- submit输入框或者button提交按钮中  只能使用 onclick="return checkForm2()" 或者  在表单标签中定义onsubmit="return checkForm2()" -->
				 <input  type="submit"  value="提交数据" onclick="return checkForm2()">
				 <button type="submit">提交表单</button>
		   </form>

javascript验证函数

//在普通button标签按钮中验证表单提交  onclick=""  不需要用返回布尔值。
		function checkForm () {
		var user=$('user');
		console.log(user.value);
			if(user.value==null||user.value.trim()==""){
				return ;
			}
			//submit是提交函数
			f1.submit();//提交
			// f1.reset();//重置函数
		}
		//onsubmit:  需要返回布尔值
		function checkForm1 () {
			var user1=$('user');
				if(user1.value==null||user1.value.trim()==""){
					return false ;
				}
				return true;
		}
		
		function checkForm2(){
			var user1=$('user');
				if(user1.value==null||user1.value.trim()==""){
					return false;
				}
				return true;
				
				
		}
		
		function $(id){
			return document.getElementById(id);
		}

表单对象获取方式

//表单的三种获取对象方式：
	 //1、通过document.name属性值获取表单对象
	   var form1=document.form1;
	   console.log(form1);
	   //2、通过id、类、标签选择器获取表单对象
	   var f1=document.getElementById('form1');
	    console.log(f1);
		//3、通过forms关键字获取表单数组，从表单数组中获取
		var formsV=document.forms;
		// var f2=formsV[0];//用默认索引查找数据
	var f2=formsV['form1'];  //用name属性值做为索引进行查找。
		console.log(f2);

提交表单总结

1、如果使用提交按钮提交表单，可以在提交输入标签和提交按钮标签定义onclick事件或者在表单标签中定义onsubmit事件，但是函数都必须要返回布尔值。
2、如果使用普通按钮提交，只能在普通按钮中定义onclick事件，执行函数可以不用返回布尔值，但是需要在函数中调用表单对象.submit()进行提交。
3、普通按钮不设置类型，默认就是提交按钮。

获取input元素

  <label for="user">用户名：</label>
 <input type="text" name="username" id="user"/><br/>
  //获取input对象
 var user=document.getElementById('user');
//获取属性值
console.log(user.name);
		//属性赋值
user.value='adminstor';
user.disabled=true;  //禁用输入框
		//设置必填
user.require=true;
		//获取值值长度
console.log(user.value.length);

获取单选按钮

 <label>性别：</label>
<input type="radio" name="radi" value="man" onclick="test()" />男
 <input type="radio" name="radi"  value="woman" onclick="test()"/>女

function test(){
//获取单选框对象  获取checked值需要使用点击事件监听，是一种状态！
			var sex=document.getElementsByName("radi");
			for(var i=0;i<sex.length;i++){
				if(sex[i].checked){  //判断是否被选中
					console.log(sex[i].value);
				}
			}

获取下拉框对象

<select name="hobby" onclick="test1()">
<option>=========请选择自己的爱好===========</option>
<option value="playball">打球</option>
<option value="lookbook">看书</option>
<option value="sing">唱歌</option>
<option value="dance">跳舞</option>
<option value="reader">朗诵</option>
</select>

//获取下拉框对象  获得name值是一个数组  必须根据索引取出下标
//selected判断是否选中， hobby[0].options获取所有option对象。
		function test1(){
var hobby=document.getElementsByName('hobby');
var opt=hobby[0].options;
for(var index in opt){
if(opt[index].selected){
							  console.log(opt[index].value);
						 }
//获取option的文本值  如果option不设置value值 会把文本值当做value值
	 console.log(opt[index].text);
			}
			
		}

获取复选框对象

 <input type="checkbox" name="hobby" value="playball" onclick="test3()" />打球
			       <input type="checkbox" name="hobby" value="lookbook" onclick="test3()"  />看书
				   <input type="checkbox" name="hobby" value="sing" onclick="test3()"  />唱歌
				   <input type="checkbox" name="hobby" value="dance" onclick="test3()"  />跳舞
				   <input type="checkbox" name="hobby" value="reader" onclick="test3()"  />朗诵

	function test3(){
			//获取多选框对象
	var hobby=document.getElementsByName('hobby');
var str="";
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked){  //判断是否被选中
str+=hobby[i].value+",";
}	 
	}
str=str.substring(str,str.length-1);
console.log(str);
		}

表单验证案例

需求：/**
 要求：
   1、验证用户名
     1)不能为空
     2)长度为 6-12 位
   2、验证密码
     1)不能为空 
     2)长度为 6-12 位
     3)不能包含用户名
   3、年龄: 必须选择 你懂得
   4、爱好: 必须选择一项
   5、来自: 必须选择一项
   满足以上条件
     1、弹出所有的内容
     2、提交表单
   否则
   1、说明错误原因
   2、不能提交表单
*/

<form id='myform' name="myform">
姓名:<input type="text" id="uname" name="uname"
/><br />
密码:<input type="password" id="upwd"
name="upwd" /><br />
年龄:<input type="radio" name="uage" value="0"
checked="checked"/>小屁孩
      <input type="radio" name="uage"
value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav"
value="篮球"/>篮球
      <input type="checkbox" name="ufav"
value="爬床"/>爬床
      <input type="checkbox" name="ufav"
value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
          <option value="-1"
selected="selected">请选择</option>
          <option value="0">北京</option>
          <option value="1">上海</option>
      </select><br />
      <div id="validate" style="color: red;">
</div>
      <button type="submit" onclick="return
checkForm();">提交</button>
      <button type="reset"
onclick="resetForm();">重置</button>
</form>

js验证

	//获取id选择器对象函数
		function $(id){
			return document.getElementById(id);
		}
		//清空消息提示框
		function resetForm(){
			$("validate").innerHTML="";
		}
		//表单验证
		function checkForm(){
			var uname=$("uname");
			if(uname.value==null||uname.value==""){
				$("validate").innerHTML="用户名不能为空";
				return false;
			}
			if(uname.value.length<6 || uname.value.length>12){
			
			$("validate").innerHTML="输入用户名长度应该在6到12位";
			return false;
		}
		   var upwd= $("upwd");
		  if(upwd.value==null||upwd.value==""){
			  $("validate").innerHTML="密码不能为空";
			  return false;
		  }
		   if(upwd.value.length<6 || upwd.value.length>12){
		  	
		  	$("validate").innerHTML="输入密码长度应该在6到12位";
			return false;
		  }
		
		  if(upwd.value.indexOf(uname.value)>=0){
		  			  $("validate").innerHTML="密码不能包含用户名";
					  return false;
		  }
		  var uage=document.getElementsByName("uage");
		  var a="";
		    for(var index in uage){
				if(uage[index].checked){
					a=uage[index].value;
				}
			}
			console.log(a);
			if(a==0){
				 $("validate").innerHTML="年龄选择你懂得！";
				 return false;
			}
		  var ufav= document.getElementsByName("ufav");
		    var str="";
		  for(var i=0;i<ufav.length;i++){
			  if(ufav[i].checked){
				  str+=ufav[i].value+",";
			  }
		  }
		  if(str==null||str==""){
			   $("validate").innerHTML="爱好必须选择一项！";
			   return false;
		  }
		  var ufrom=document.getElementsByName("ufrom")[0];
		    //获取选择框的索引
			var opts=ufrom.options;
			for(var i=0;i<opts.length;i++){
					
				if(opts[i].selected){
					if(opts[i].value==-1){
						$("validate").innerHTML="地点必须选择一项！";
								return false;
					}
				}
				
			} 
		   $("validate").innerHTML="";
		   return true;
	}

posted @ 2023-08-13 13:36 戴莫先生Study平台阅读(89) 评论(0) 编辑收藏举报

刷新页面返回顶部

Mr Demo Learn

戴莫先生Learn平台

JavaScript基础知识

JavaScript基础知识

1、简介

2、基本用法

3、js命名规则、标识符

4、变量

5、数据类型

6、运算符

7、控制流程语句

8、数组

9、函数

10、函数的作用域

11、内置对象

12、对象

13、this保留字

14、原型链

15、事件对象

16、BOM对象(Brower Object Model)

17、DOM对象(Document Object Model)

18、表单操作

公告