前端基础js(四)
一、 js
【1】 html:用于显示页面
【2】 css:用于描述页面的样式
【3】 javaScript:用于描述页面的行为
二、js中三大部分内容
【1】 基本语法:函数、对象、事件类型(变量,数据类型,分支结构,循环,打印输出,函数)
【2】 BOM:浏览器对象模型Brower Object Model
【3】 DOM:文档对象模型 Document Object Model
三、js的使用方式
【1】 在事件名后直接写js代表 onclick事件:单击事件
<input type="button" id="test1" value="test1" onclick="alert('第一种方式')" />
【2】 写在<script></script>中:页面加载 onLoad()事件
<script type="text/javascript"> alert("第二种方式"); </script>
【3】 引入外部js文件
(1) 新建 一个以.js结尾的文件
(2) 在html中使用
<script src="js/base_js.js" type="text/javascript" charset="utf-8"></script>
四、js中的数据类型
js 中的变量是没有数据类型的 统一使用var声明
js中的值是有数据类型的
js中值的数据类型分两大类
4.1基本数据类型:
number:数值型 ,整数或浮点数
string:字符型 ,可以使用单引号,也可以使用双引号
boolean :布尔型, 值可以为true或false
undefined: 未定义 :可声明未赋值
null值: 声明变量赋值为null 类型是object,值是null
Infinity值:无穷 10/0
4.2引用(对象)数据类型
Array ,Date,String,自定义对象
4.3 数据类型的转换
4.3.1自动类型转换
function test2(){
var numa=3;
var numb='4';
var numc=true;
var numd=9;
//alert(numa+numb); //number+string-->string
//alert(numa+numc);//number+boolean-->number 4 true的值是1 ,false的值为0
//alert(numb+numc);//string+boolean-->string
alert(numa+numd);//number+number-->number
}
4.3.2强制类型转换
alert(numa+parseInt(numb));
parseFloat(numb)
alert(parseInt('4fd4')); //如果第一个字符是数字,将转数字部分,第一个字符非数字,将出现NaN
五、运算符
【1】 == 比较值
var nume; //undefined
var numf=null;//null
alert(nume==numf);//true
【2】=== 比较类型和值
算术运算符
逻辑运算符
赋值运算符
关系运算符
连接运算符:+
六、获取文本框的值
//1.获取第一个文本框的值
var numa=document.getElementById("numa").value;//get是获取Element元素 by根据...
//2.获取第二个文本框的值
var numb=document.getElementById("numb").value;
//3.获取运算符
var ope=document.getElementById("oper").value;
//获取div
var divEle=document.getElementById('result');//获取的是div元素
divEle.innerHTML='运算结果是:'+result;
七、 js中的数组对象
数组的声明
var a=[]; //声明数组的第一种方式 var arr1=new Array(); //创建数组第二种方式 var arr2=new Array(4); //创建数组的第三种方式 var arr3=new Array('a','b',true,2,9);//创建数组的第四种方式 for(var i=0;i<arr3.length;i++){ document.write(arr3[i]+" "); }
js中的二维数组
var cityList=new Array(); cityList['河北省']=['石家庄市','邯郸市']; cityList['北京市']=['昌平区','海淀区']; alert(cityList['河北省']); //cityList['河北省'],下标是 '河北省' /*for(var i=0;i<cityList.length;i++){ alert(cityList[i]); 因为下标是字符串, }*/ for(var i in cityList['河北省']){ //相当于java中加强for循环 alert(i); }
八、js中的输出方式
//[1]第一种输出方式
var divEle=document.getElementById("div1");
divEle.innerHTML='hellow';
//[2]第二种输出方式
document.write('javascrip');
九、 js中的函数
9.1 系统内置函数
isNaN(), parseInt (), parseFloat()
系统内置的定时器函数
window.setInterval('test1()',1000);//一秒钟调用一次test1()函数
9.2 自定义函数
//[1]第一种方式 -->最常使用的方式 function test1(){ alert("第一种方式"); } //[2]最不常用的方式 var test2=new Function("alert('第二种方式')"); //使用关键字new,说明函数是对象alert('第二种方式')是test2函数中函数体 //[3]创建函数 var test3=function (){ alert('第三种方式,匿名函数'); } //[4]js中的带参的函数 ,函数的定义处参数称为形式参数 //注意事项:js中实参的个数和形参的个数可以不相同 function test4(numa,numb){ alert("实参的个数为:"+test4.arguments.length); alert("形参的个数:"+test4.length); alert(numa+numb); } function test4(){ alert('无参'); } //在js中没有函数重载的概念,后面的声明的同名的函数,会将前边声明的函数进行覆盖 //[5]函数调用函数 function test5(m,n){ m(n); //函数调用,调用带一个参数的函数 } function test6(num){ alert(num); return 'hellow';使用return返回函数的返回值 } html代码 <input type="button" id="" value="test5" onclick="test5(test6,4);"/><!--test6叫函数的名称--> <input type="button" id="" value="test2" onclick="alert(test6(8));"/><!--弹出test6的函数的返回值 -->
十、 js中的对象
10.1系统内置对象
(1) Date对象
function test1(){
var d=new Date();//得到了一个时间对象
var year=d.getFullYear();
//var year2=d.getYear();得到是2017与1900之间的时间差
var month=d.getMonth()+1;//得到是0-11之间的整数
var date=d.getDate(); //日期
var day=d.getDay(); //得到的是星期几
var hour=d.getHours();//得到小时
var min=d.getMinutes();//分钟
var sec=d.getSeconds();
var divEle=document.getElementById("div1");
divEle.innerHTML=year+"年"+month+"月"+date+"日"+hour+":"+min+":"+sec;
}
(2) String对象
alert(str.substring(2,6)); //截取索引为2到索引为5的字符
alert(str.substr(2,6)); //从2开始,一共截取6个字符
(3) Math对象
var str=Math.random()*8999+1000;//对象名.函数名
var num=Math.floor(str);
10.2 自定义对象
function testObject(){
var per1=new Object();
per1.name='张三';
per1.age=30;
//匿名函数
per1.show=function(){
alert('姓名是:'+per1.name+"\t"+per1.age);
}
per1.show(); //调用函数
}
十一、js中的事件
<input type="button" id="" value="鼠标单击" onclick="alert('被单击了')" /> <input type="button" name="" id="" value="鼠标双击" ondblclick="alert('被双击了')" /> <div id="div1" onmouseover="alert('鼠标移动到了div上')" onmouseout="alert('鼠标移出了')"> </div> <hr /> <input type="text" id="" value="张三" onfocus="alert('文本框获得了焦点')" onblur="alert('文本框失去了焦点')"/> <hr /> <input type="text" id="" value="李四" onchange="test1(this);"/> <div id="div2"></div> <input type="text" name="" id="" value="" onkeydown="alert(this.value);" /> <select name="" onchange="alert(this.value);"> <option value="北京市">北京市</option> <option value="上海市">上海市</option> <option value="重庆市">重庆市</option> </select> 鼠标类 onclick(单击事件) , ondblclick(双击事件) , onmouseover(鼠标移入), onmouseout(鼠标移出) , onblur(失去焦点), onfocus(获得焦点), onchange(文本改变) 键盘类 onkeydown(键盘按下), onkeyup(键盘松开) 表单类 onsubmit (表单提交) return true 允许提交 return false不允许提交 onreset(表单重置) return true 允许重置 return false不允许重置 页面: onload (页面加载) 事件对象 Event function change(eve){ var e=eve||window.event; var x=e.x||e.pageX; var y=e.y||e.pageY; } <input type="button" id="" value="事件对象" onmousemove="change(event);" />
十二、BOM:浏览器对象模型
BOM:浏览器对象模型
(Window,Navigater,Screen,History,Location)
historyHistory
document
location Location
window:对象
常用方法: alert();警告框
confirm();确认框 确定true,取消false
prompt();对话框
3秒后执行alert(),执行一次
window.setTimeout("alert('hello')",3000); //3秒后执行alert方法
每隔1秒执行一次alert()
window.setInterval("alert('helloworld')",1000);
close();关闭窗口
open();打开窗口
常用属性:
(1) history历史记录
function backd(){//后退
//window.history.back();
window.history.go(-1);//后退一步
}
function next(){//前进
//window.history.forward();
window.history.go(1);//前进一步
window.history.go(0); // 刷新本页面
}
(2) location:用于获取url相关信息
十三、DOM文档对象模型
DOM:Document ObejctModel文档对象模型
document:每个载入浏览器窗口的html页面都称为一个document对象
12.1 使用document文档对象中的方法来获取文档中的元素
//[1]根据id来获取文档中的元素
function testId(){
var divEle=document.getElementById('div1'); //object HTMLDivElement
alert(divEle);
}
//[2]根据name来获取文档中的元素 --》获取一组
function testName(){
var fruits=document.getElementsByName('fruit');
alert(fruits.length);
}
//根据标签名称获取文档中的元素-->获取一组
function testTag(){
var inputs=document.getElementsByTagName('input');
alert(inputs.length); //获取了8个input元素
}
//根据class名称获取文档中的元素-->一组
function testClassName(){
var b=document.getElementsByClassName('b_1');
alert(b.length);
}
12.2 操作文档中的元素
12.2.1属性
function changeImge(){
//获取img元素
var imgEle=document.getElementById('imgid');
//imgEle.src='img/class1-2.jpg'; //操作src属性
var srcAtt=imgEle.getAttribute('src'); //src是属性 ,获取的是属性值
//alert(srcAtt);
imgEle.setAttribute('src','img/class1-2.jpg');
//设置 图片的title属性值
//imgEle.setAttribute('title','这是一个广告图片');
imgEle.title='这是一个广告图片........';
}
语法
(1)元素对象名称.属性=‘值’
(2)元素对象名称.setAttribute(‘属性名’,’属性值’);
元素对象名称.getAttribute(‘属性名’);对应的值
12.2.2样式
function testStyle(){
//给div边框改颜色
//获取div
var divEle=document.getElementById('div1');
//改变样式
divEle.style.border='2px dashed green'; //solid 实线 dashed 虚线
divEle.style.display='none'; //不显示 -->不占浏览器空间
divEle.style.visibility='hidden'; //隐藏 ,占浏览器空间
}
语法:元素对象名称.style.属性=’值’;
.bac{
background: #ccc;
}
divEle.className='bac'; //bac是class选择器的名称
语法:元素对象名称.className=’类样式的名称’;
12.2.3 内容
function testcontent(){ //获取第一个数 var numA=window.prompt('请输入第一个数:',''); var numB=window.prompt('请输入第二个数:',''); var result=parseInt(numA)+parseInt(numB); //将计算结果显示到div中 var divEle=document.getElementById("div1"); //divEle.innerHTML='<h1>计算结果为:'+result+"</h1>"; divEle.innerText='<h1>计算结果为:'+result+'</h1>'; } 区别:innerHTML可以解析html标签 innerText :将所有””或’’中的内容通通作为文本显示
12.2.4 文档结构
[1]创建文档元素 createElement (‘标签名称’);
[2]元素添加到文档中 appendChild( 元素);
[3]从文档中删除元素 removeChild(元素);
[4]获取父元素 parentElement;
获取第一个子元素 firstElementChild
获取最后一个子元素 lastElementChild
案例:文件上传
function createE(){
//[1]创建一个input元素, 类型是file
var fileEle=document.createElement('input');
fileEle.type='file';
//[2]创建一个br元素
var brEle=document.createElement('br');
//[3]创建一个input元素, 类型是button
var btnEle=document.createElement('input');
btnEle.value='删除';
btnEle.type='button';
btnEle.onclick=function(){
document.body.removeChild(fileEle);
document.body.removeChild(btnEle);
document.body.removeChild(brEle);
}
document.body.appendChild(brEle);
document.body.appendChild(fileEle);
document.body.appendChild(btnEle);
}
在所有的矛盾中,要优先解决主要矛盾,其他矛盾也就迎刃而解。
不要做个笨蛋,为失去的郁郁寡欢,聪明的人,已经找到了解决问题的办法,或正在寻找。