前端基础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]+"&emsp;");

}

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+"	"+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）
          historyHistory
          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);
}