JavaScript 基础

一、javascript的简介

js是什么?

js是可以嵌入html中,js是基于对象和事件驱动的脚本语言特点:交互性    安全性:js不能访问本地磁盘    跨平台性:浏览器内部都内置js解析器

js的作用

js可以动态的修改(增删)html及css的代码js可以动态的校验数据

js历史及组成

ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)

js的引入方式

(1)内嵌脚本

<input type="button" value="button" onclick="alert(1)"/>

(2)外部脚本

首先、创建js文件其次、在html中进行引入<script type="text/javascript" src="myjs.js"></script>

js在页面中写在哪儿?
js放在哪儿都可以,但是在不影响页面效果的情况下 js越晚加载越好

二、js的基本语法

变量

java:强类型语言int x = 5;String str = "hello";boolean bool = true;js:弱类型语言var x = 5;var str = "hello";var bool = true;

原始类型

number:数字类型string:字符串boolean:布尔型undefined:未定义null:空转成字符串number和boolean转成字符串toString()在js当中一切皆对象 原始类型是伪对象转成数字字符串转数字parseInt()parseFloat()强制转换Boolean() 将字符串和数字转换成布尔字符串转布尔:非空就是true 空串是false数字转布尔:非0为true 0就是falsenull是false 非null是true

引入类型

var obj = new Object();

运算符

赋值运算符:var x = 5;算数运算符:+ - * / %    注意:字符串具有加号运算 会将非字符串的 转成字符串进行拼接    注意:- * / % 字符串没有这种运算符 现将字符串转成数字 然后在    进行运算逻辑运算符:&& || 必须使用双与 双或比较运算符:> < >= <= != <> == ===类型运算符:typeof:判断数据类型          instanceof:断言某种类型          var obj = new Object();          alert(obj instanceof Object);void运算符:    <a href="javascript:void(0);">xxx</a>

js的逻辑语句

if else 语句switch 语句for 循环语句for in循环语句

三、js的内置对象

• Number
• Boolean
• String
• Math
• Date
• Array
• RegExp

四、js的函数

js的自定义函数

(1)普通方法

语法:function 函数名称(参数列表){函数体}// 普通方式function method(a,b){    alert(a+b);}method(2,3);

(2)匿名函数

语法:function(参数列表){函数体}var method = function(a,b){    return a+b;}    method():调用函数 执行函数体    method:代表函数对象本身

(3)对象函数

语法:var fn = new Function("参数1","参数2",..."函数体");// 参数和函数都写在括弧中 并且需要用引号包裹// 最后一个必须是函数体var fn = new Function("a","b","c","alert(a+b+c)");fn(2,3,3);其中:参数列表NaN:not a numberarguments对象 : 对实参的封装对象 它是一个数组对象// 参数列表var fn = function(a,b){    // arguments 是一个数组对象 封装的实际参数    for(var i = 0;i<arguments.length;i++){        alert(arguments[i]);    }}// fn(1,2,3);// 1+2=3// fn(1); //NaN 不是一个数字fn(2,3,4);

返回值:在定义函数时无需声明 直接使用return返回 return后的js代码不执行

js的全局函数

(1) 编码解码

// 编码解码的全局函数/*    区别:对特殊字符的编码范围不同    经常使用第一个encodeURI*/var path = "http://www.baidu.com?name=张三&password=123";alert(encodeURI(path));// http://www.baidu.com?name=%E5%BC%A0%E4%B8%89&password=123alert(encodeURIComponent(path));// http%3A%2F%2Fwww.baidu.com%3Fname%3D%E5%BC%A0%E4%B8%89%26password%3D123alert(escape(path));    // http%3A//www.baidu.com%3Fname%3D%u5F20%u4E09%26password%3D123

(2) 强转类型的

String() Boolean() Number()

(3) 转成数字

parseInt() parseFloat()

(4) eval()函数

把字符串作为脚本代码来执行// eval函数/*var str = "var a=2; var b=3; alert(2+3);";eval(str);function fn(str){    eval(str);} */

五、js的事件

• 事件:
• 事件源:
• 响应行为:
• 动作的施加者:
  

常用事件

onchange

<select id="city">    <option value="bj">北京市</option>    <option value="bj">天津市</option>    <option value="bj">上海市</option></select><select id="area">    <option value="bj">朝阳区</option>    <option value="bj">海淀区</option>    <option value="bj">东城区</option></select>var city = document.getElementById("city");city.onchange = function(){    var options = city.getElementsByTagName("option");    for(var i=0;i<options.length;i++){        var option = options[i];        if(option.selected){            var val = option.value;// bj tj sh            switch(val){                case "bj":                    var area = document.getElementById("area");                    area.innerHTML = "<option value="bj">朝阳区</option>"+                                    "<option value="bj">海淀区</option>"+                                    "<option value="bj">东城区</option>";                    break;                case "tj":                    var area = document.getElementById("area");                    area.innerHTML = "<option value="bj">xx区</option>"+                                    "<option value="bj">xx区</option>"+                                    "<option value="bj">xx区</option>";                    break;                case "sh":                    var area = document.getElementById("area");                    area.innerHTML = "<option value="bj">xx区</option>"+                                    "<option value="bj">xx区</option>"+                                    "<option value="bj">xx区</option>";                    break;            }        }    }}

onfocus-onblur

<form action="">    <table>        <tr>            <td>账号</td>            <td><input id="account" type="text" value="请输入姓名" /></td>        </tr>        <tr>            <td>密码</td>            <td><input type="text" /></td>        </tr>    </table></form>// 获取input输入框的元素对象var account = document.getElementById("account");// 绑定事件account.onfocus = function(){    // 将提示去掉    this.value = "";}account.onblur = function(){    var inputText = this.value;    if(inputText.trim() == ""){        this.value = this.defaultValue;    }}

onload

整个页面或者图像被加载完成

onmouseover-onmouseout

鼠标覆盖和移除事件

onsubmit

提交事件

事件的绑定方式

(1) 事件和响应行为内嵌到事件源中

<!-- 1、事件和响应行为内嵌到事件源中 --><input type="button" value="button" onclick="alert(1)"/>

(2) 事件内嵌到事件源中 而响应行为使用函数封装

<!-- 2、事件内嵌到事件源中 而响应行为使用函数封装 --><!-- this 代表当前事件源 --><input type="button" value="button" onclick="fn(this)"/>function fn(obj){    // alert("xxx");    alert(obj.value);}

(3) 事件和响应行为与事件源完全分离

<!-- 3、事件和响应行为与事件源完全分离 --><!--借助dom对象 --><input id="btn" type="button" value="button">// btn代表button的元素对象var btn = document.getElementById("btn");// 为元素对象绑定事件btn.onclick = function(){    alert("yyy");};

阻止事件的默认行为

第一种方式 :

为a标签绑定点击事件 在事件中返回false就可以<a href="http://www.baidu.com" onclick="return false">click me</a>

第二种方式 :

设计浏览器兼容性IE规范:window.event.returnValue = false;W3C规范:e.preventDefault(); // 代表事件的传递对象注意:注意低版本的ie不支持event对象的传递function prev(e){    // alert(e);    if(e&&e.preventDefault){        // 火狐        alert("w3c");        e.preventDefault()    }else{        // IE        alert("ie");        window.event.returnValue = false;    }}<a href="http://www.baidu.com" onclick = "prev(event)">click me</a>

阻止事件的传播

IE规范：window.event.cancelBubble = true;W3C规范：e.stopPropagation();//代表传递的事件对象function stop(e){    // w3c    if(e&&e.stopPropagation){        // 火狐        alert("w3c");        e.stopPropagation();    }else{        // IE        alert("ie");        window.event.cancelBubble = true;    }}<div style="width:300px;height:300px;background: red" onclick="alert(1);"><div style="width:200px;height:200;background: green" onclick="stop(event);"/></div>

六、BOM（浏览器对象模型）

window

(1) 弹框的方法

提示框:alert(提示内容);确认框:confirm(提示内容);返回值:确认返回true 取消返回false输入框:prompt(提示内容);返回值:确认返回输入框的内容 取消返回null

(2) 打开新网页的方法

open(url);open("http://www.baidu.com");重新打开新页

(3) 定时器

执行一次 语法:setTimeout(function,毫秒值);setTimeout(    function(){        open("http://www.baidu.com");    },3000);关闭方式:clearTimeout(定时器名称);循环执行 语法:setInterval(function,毫秒值);关闭定时器 clearInterval(定时器名称);var timer = setInterval(    function(){        open("http://www.baidu.com");    },    3000);function stop{    clearInterval(timer);}

location对象

location.href = "url";// 页面跳转location.href="http://www.baidu.com";

history

返回上一页:back()进入下一页:forward()跳转:go() 参数:-1 1<a href="3.html">跳转到3页</a><input type="button" value="pre" onclick="history.back()"><input type="button" value="next" onclick="history.forward()"><input type="button" value="pre-go" onclick="history.go(-1)"><input type="button" value="next-go" onclick="history.go(1)">

七、DOM 文档对象模型

getElementById

//输出 <input type="text" name="username" value="IT"  id="tid" >标签value属性的值var inputNode = document.getElementById("tid");alert(inputNode.value);//输出 <input type="text" name="username" value="IT"  id="tid" >标签type属性的值alert(inputNode.type);

getElementsByName

<body>       <form name="form1" action="test.html" method="post" >          <input type="text" name="tname" value="IT_1"  id="tid_1"  ><br>          <input type="text" name="tname" value="IT_2"  id="tid_2"  ><br>          <input type="text" name="tname" value="IT_3"  id="tid_3"  ><br>          <input type="button" name="ok" value="保存1"/>       </form>  </body>  <script type="text/javascript">   //通过元素的name属性获取所有元素的引用  name="tname" 的节点对象   var inputs = document.getElementsByName("tname");   //遍历元素,输出所有value属性的值   for(var i=0;i<inputs.length;i++){        alert(inputs[i].value);   }  </script>

getElementsByTagName

<body>       <form name="form1" action="test.html" method="post" >          <input type="text" name="tname" value="测试_1"  id="tid_1"  ><br>          <input type="text" name="tname" value="测试_2"  id="tid_2"  ><br>          <input type="text" name="tname" value="测试_3"  id="tid_3"  ><br>          <input type="button" name="ok" value="保存1"/>       </form>       <select name="edu" id="edu">          <option value="博士">博士^^^^^</option>          <option value="硕士" selected="selected">硕士^^^^^</option>          <option value="本科"  >本科^^^^^</option>          <option value="幼儿园">幼儿园^^^^^</option>       </select>       <select name="job" id="job" >          <option value="美容">美容^^^^^</option>          <option value="IT">IT^^^^^</option>          <option value="程序员">程序员^^^^^</option>          <option value="建筑师">建筑师^^^^^</option>       </select>       <br/>       <input id="btn" type="button" value="输出select被选中的值" />  </body>  <script type="text/javascript">    //输出表单中type="text"中 value属性的值 不包含按钮(button)    var inputs = document.getElementsByTagName("input");    /* for(var i=0;i<inputs.length;i++){        if(inputs[i].type!="button"){            alert(inputs[i].value);        }   } */    //输出所有下拉选 id="edu"中option标签中 value属性的值    /* var edu = document.getElementById("edu");    var options = edu.getElementsByTagName("option");    for(var i=0;i<options.length;i++){        alert(options[i].value);   } */    //输出下拉框中被选中的值    document.getElementById("btn").onclick = function(){        var options = document.getElementsByTagName("option");         for(var i=0;i<options.length;i++){            if(options[i].selected){                alert(options[i].value);            }       }    };  </script>

Attribute

<body>      您喜欢的城市:<br>        <ul>         <li id="bj" value="beijing">北京</li>         <li id="sh" value="shanghai">上海</li>         <li id="cq" value="chongqing">重庆</li>       </ul>      您喜欢的游戏:<br>        <ul>         <li id="fk" value="fangkong">反恐</li>         <li id="ms" value="moshou">魔兽</li>         <li id="xj" value="xingji" xxx="yyy">星际争霸</li>         <li id="pp" value="paopao">跑跑卡丁车</li>       </ul>     </body>  <script type="text/javascript">      //<li id="xj" value="xingji">星际争霸</li>节点的value属性的值      var inputNode = document.getElementById("xj");      //.value方式不通用         //alert(inputNode.value);      //alert(inputNode.getAttribute("value"));      //为<li id="pp" value="paopao">跑跑卡丁车</li>添加discription属性为paopaoKT      var inputNode = document.getElementById("pp");      inputNode.setAttribute("discription","paopaoKT");      alert(inputNode.getAttribute("discription"));  </script>

createElement

<body>      您喜欢的城市:<br>        <ul id="city">         <li id="bj" value="beijing">北京</li>         <li id="sh" value="shanghai">上海</li>         <li id="cq" value="chongqing">重庆</li>       </ul>      您喜欢的游戏:<br>        <ul>         <li id="fk" value="fangkong">反恐</li>         <li id="ms" value="moshou">魔兽</li>         <li id="xj" value="xingji">星际争霸</li>       </ul>  </body>  <script type="text/javascript">     //增加城市节点 <li id="tj" value="tianjin">天津</li>放置到city下     var li = document.createElement("li");     li.setAttribute("id","tj");     li.setAttribute("value","tianjin");     li.innerHTML = "天津";     var city = document.getElementById("city");     city.appendChild(li);     //appendChild  </script>

insertBefore

<body>       <ul>         <li id="bj" name="beijing">北京</li>         <li id="sh" name="shanghai">上海</li>         <li id="cq" name="chongqing">重庆</li>       </ul>  </body>  <script type="text/javascript">     //在重庆的前面插入新节点天津<li id="tj" name="tianjin">天津</li>     var li = document.createElement("li");     li.setAttribute("id","tj");     li.setAttribute("value","tianjin");     li.innerHTML = "天津";     var city = document.getElementById("city");     var cq = document.getElementById("cq");     city.insertBefore(li,cq);  </script>

removeChild

<body>       <ul id="city">         <li id="bj" name="beijing">北京</li>         <li id="sh" name="shanghai">上海</li>         <li id="cq" name="chongqing">重庆</li>       </ul>  </body>  <script type="text/javascript">     //删除<li id="bj" name="beijing">北京</li>这个节点     var city = document.getElementById("city");     var bj = document.getElementById("bj");     city.removeChild(bj);  </script>

innerHTML

<body>      <div id="city"><h1>哈哈哈哈哈</h1></div>  </body>  <script language="JavaScript">        //使用innerHTML读出id=city中的文本内容        var city = document.getElementById("city");        //alert(city.innerHTML);        //将<h1>哈哈哈哈哈</h1>写到div的层中        city.innerHTML = "<h1>哈哈哈哈哈</h1>";  </script>