标签：function console log 对象 JavaScript 基础知识 var 节点
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、表单操作
<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>
//在普通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、普通按钮不设置类型，默认就是提交按钮。
<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>
//获取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;
}
标签：function,
console,
log,
对象,
JavaScript,
基础知识,
var,
节点
From： https://www.cnblogs.com/smallzengstudy/p/17626482.html