一、 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+"\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）

          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);

}

巴特西

前端基础js（四）