js01 - limuma - 博客园

公告

js01

1、js：JavaScript一种直译式脚本语言（解释型脚本语言，执行前不需要编译；这一点和Java类似，Java也是解释型语言，源码变为字节码（jvm可执行的代码）的过程不是编译过程），是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

　　html是页面的框架，骨架，是静态的；

　　css能够使你的页面更加多样；

　　js则使你的页面能够动起来，由静态变为动态；

2、js组成

（1）ECMAScript（核心部分,描述了该语言的语法和基本对象）：核心语法，方法，关键字，保留字等：　　

　　1.语法
　　2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型（函数的形参不写var）！

　　　　　　变量的另一作用：对于重复代码，可以在定义函数的时候传入变量参数来控制，函数方法里传形参，标签里调用时传入实际的参数，代码示例见js的数遍移入/移出事件；

　　注：使用var时，有一个细节点：定义变量时，var i=1；这个i时局部变量，只能在方法里使用，如果只是i=1，则i是成员（全局）变量，可以在方法外的另外方法里使用；
　　3.数据类型：原始数据类型(undefined/null/string/number/boolean)

　　注：a、对null使用typeof（）方法，得到的是object；

　　　　 b、js中的null代表不存在，在某些情况下和undefined定义一样，比如null==undefined返回的是true；而undefined这表示未定义；undefined是个类型，null是个object；然而''则表示具体的类型的值了；如果一个变量申明了未赋值，则类型未定义，这里判断变量==null会返回true；

c、根本区别在于变量是否已经赋值，即是否已经初始化，这里要清楚：null是个object类型，且值只有null，undefined是个undefined类型，值只有undefined，只声明，未初始化，实例化，''是个 String 类型的值，已经实例化，只不过是空字符串，那么这里：

　　　　　null==undefined返回true，null===undefined返回false，null==""返回false，undefined==""返回false

　　4.语句：
　　5.运算符：==与===的区别，注意：js里边没有equals；
　　6.函数：两种写法(有命名称，匿名的)

　　　　着重介绍匿名的函数：

　　　　　　a.声明一个匿名函数，直接赋值给某一个事件：

　　　　　　window.onload=function(){ alert(123) }

　　　　　　b.使用匿名函数表达式。将匿名函数，赋值给一个变量

　　　　　　声明：var func=function(){ }
　　　　　　调用：func();

　　　　　　比如：var func = function(){ alert(123) }，

　　　　　　　　　直接用func()调用；这里匿名函数的调用语句，必须放在函数声明语句之后！！！（与普通函数的区别，普通函数的声明与函数的调用没有先后之分）

　　　　　　c.自执行函数：

　　　　　　　　1)可以使用多种运算符开头但一般用！！function(形参列表){}(实参列表)

　　　　　　　　　　！function（）{alert（123）}（）

　　　　　　　　2)使用()将函数及函数后的括号包裹
　　　　　　　　　　(function(){}());

　　　　　　　　3)使用()值包裹函数值
　　　　　　　　　　(function(){})();

（2）BOM（浏览器对象模型）：描述与浏览器进行交互的方法和接口。　

window对象（代表浏览器打开的窗口）的方法:window.alert()：弹出文本框(window一般省去)

　　　　　　　　　　 prompt()：弹出输入框

　　　　　　　　　　 confirm()：弹出确认框

　　　　　　　　　　 setInterval(),clearInterval()：设置/清除定时操作

　　　　　　　　　　 setTimeout(),clearTimeout()：设置/清除定时操作

　　history对象（包含在浏览器窗口中访问过的URL，history对象是window对象的一部分，可以通过window.history属性对其进行访问）的方法:

　　　　go(参数)：加载history列表中某一个具体页面，且需要设置参数；history.go(-1)可以实现back（）；history.go(1)可以实现back（）可以实现forward（）

　　　　back()：加载history列表中前一个URL；eg：function xxx（）{history.back()}

　　　　forward()：加载history列表中下一个URL

　　　　location对象(包含有关当前URL的信息，也是window对象的一部分): href属性，从当前页面跳转到某一个页面：location.href="xxx.html"

（3）DOM（Document文档对象模型）：描述处理网页内容的方法和接口：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　DOM文档结构图

　　HTML DOM对象：

　　　　a.DOM Element：HTML页面中所有的标签；常见方法有：

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.setAttribute()	把指定属性设置或更改为指定值。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。

　　　　b.DOM Document；每个载入浏览器的HTML文档都会成为Document对象

　　　　另外还有两个重要的方法：创建文本（标签中间的内容）节点：document.createTextNode()；创建元素（标签）节点document.createElement()，但在手册中查不到；这两个方法使用示例如下（动态添加城市）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态添加城市</title>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    //1.获取ul元素节点
                    var ulEle = document.getElementById("ul1");
                    //2.创建城市文本节点
                    var textNode = document.createTextNode("深圳");//深圳
                    //3.创建li元素节点
                    var liEle = document.createElement("li");//<li></li>
                    //4.将城市文本节点添加到li元素节点中去
                    liEle.appendChild(textNode);//<li>深圳</li>
                    //5.将li添加到ul中去
                    ulEle.appendChild(liEle);
                }
            }
        </script>        
    </head>

    <body>
        <input type="button" value="添加新城市" id="btn"/>
        <ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    </body>
</html>

动态添加城市

　　　　c.DOM Attribute：HTML页面中所有标签的属性都是attribute ：

　　　　d.DOM Event：

3、js的对象获取，js输出，js事件，js引入

　　（1）、js获取对象

　　document.getElementById();

　　document.getElementsByName();

　　document.getElementById().value;这里value是属性，不需要加括号，当然这里的属性也可以换为其他的标签属性：src等等；

　　document.getElementById().style.display="none"(隐藏显示)；每一个元素标签都有一个style属性；如：<p style="color:red;">哇哈哈</p>

　　（2）、javascript输出：

　　a.document.getElementById().innerHTML="HTML标签";

　　b.document.write("<h1>welcome,friedns!</h1> ");　

　　c.alert("abc");注：括号内为变量时，不加引号，为字符串时，需加引号

　　（3）、javascript的事件

　　a.表单提交事件：onsubmit=“return checkForm（）”；在定义函数的时候需要给出一个返回值：

　　　　例如：<form action="#" method="post" name="form" onsubmit="return checkForm()"></form>，代码如下：

<script>
    function checkForm(){
      var uValue = document.getElementById("id名").value;
      if(uValue==""){//js里的判空只能用“”
          alert("用户名不能为空！");
          return false;   //意思是，为空时，表单不提交；
      }
   }
</script>
<form action="#" method="post" name="form" onsubmit="return checkForm()">

</form>

　　b.普通按钮点击事件：onclick（单击）/ondblclick（双击）；

　　onclick的两种写法（普通的写法未展示）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>JQ的获取</title>
 6         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 7         <script>
 8             $(function(){
 9                 //1.JS方式获取
10                 document.getElementById("btn").onclick= function(){//这里也可以把onclick（属性）定义在input标签里
11                     location.href="惊喜.html";
12                 }   
15             });
16         </script>
17     </head>
18     <body>
19         <input type="button" value="点我有惊喜" id="btn"/> 
20     </body>
21 </html>

　　c.页面加载事件：onload；写在body标签里边且只能写一次，表示页面或者图片加载完毕之后才会触发该事件，window.onload表示页面加载完成之后触发该事件，例如：<body onload="init()"></body> ，代码如下：

　　　注：这里的function init（）{

这里边可以有很多个setInterval("xxx()",3000);

　　　　setInterval("xx1()",3000)

....

setInterval("xxn()",3000)

}　　　　　　

　　　　function xx1(){}

　　　　...

　　　　function xxn(){}

 1 <script>
 2     function init(){
 3     setInterval("changeImg()",3000);
 4 }
 5     var i=1;
 6     function changeImg(){
 7     i++;
 8     document.getElementById("img1").src="../../img/"+i+".jpg";
 9     if(i==3){
10         i==0;
11     }
12 }
13 </script>

onload事件

 1 onload事件的两种写法
 2 1、写在body标签里边（因为body包含了整个页面的内容，body加载即页面加载）
 3 <body  onload="init()"></body> ,然后再js里定义init函数：
 4 <script>
 5     function init(){}
 6 </script>
 7 2、直接写在script里(匿名函数)
 8 <script>
 9     window.onload=function(){
10         alert("aaa");
11     }
12 </script>

　　d.定时操作：

　　　　a.setInterval("changeImage()",3000);周期性循环操作，3000ms；会不停的调用，直到窗口关闭或调用clearInterval（）,他是window对象的方法，调用时window.setInterval（），其中window可以省略不写；

　　　　另外，setInterval是有返回值的，time=setInterval("changeImage()",3000);，可以在使用clearInterval（）时传入参数time：clearInterval（time），代表清除上一步的定时操作，这里的time没有var修饰，表示成员变量

　　　　b.setTimeout（），只执行一次；　

　　e.聚/离焦事件：onfocus/onblur；用于表单校验

　　f.鼠标移入移出事件：onmouseover/onmouseout（onmousemove鼠标移动事件），代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表格隔行换色</title>
 6         <script>
 7             function changeColor(id,flag){
 8                 if(flag=="over"){
 9                     document.getElementById(id).style.backgroundColor="red";
10                 }else if(flag=="out"){
11                     document.getElementById(id).style.backgroundColor="white";
12                 }
13             }
14         </script>
15 
16     </head>
17     <body>
18         <table border="1" width="500" height="50" align="center">
19             <thead>
20                 <tr>
21                     <th>编号</th>
22                     <th>姓名</th>
23                     <th>年龄</th>
24                 </tr>
25             </thead>
26             <tbody>
27                 <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
28                     <td>1</td>
29                     <td>张三</td>
30                     <td>22</td>
31                 </tr>
32                 <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
33                     <td>2</td>
34                     <td>李四</td>
35                     <td>25</td>
36                 </tr>
37                 <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
38                     <td>3</td>
39                     <td>王五</td>
40                     <td>27</td>
41                 </tr>
42                 <tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
43                     <td>4</td>
44                     <td>赵六</td>
45                     <td>29</td>
46                 </tr>
47                 <tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
48                     <td>5</td>
49                     <td>田七</td>
50                     <td>30</td>
51                 </tr>
52                 <tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
53                     <td>6</td>
54                     <td>汾九</td>
55                     <td>20</td>
56                 </tr>
57             </tbody>
58         </table>
59     </body>
60 </html>

js实现鼠标移入移出颜色变更

　　g.onkeydown/onkeypress：搜索引擎使用的比较多

　　h.用户改变内容时使用onchange事件（用于二级联动sellect表单选项），比如：<select onchange="changeCity(this.value)"></select>，this.value表示该select中某个被选中的option的value值

　　（4）、js的引入：

　　　　a.内部引入：直接将js代码写在<script type="text/Javascript "></script>，这里的type="text/Javascript "可以省去不写，默认就是

b.<script type="text/Javascript " src="1.js"></script >

　　　　注：js文件里直接写方法，function。。。，不需要再写script 标签；

　　　　　　区别于css的引入方式：<link rel="stylesheet" type="text/css" href="xxx.css"/>

　　　　c.特殊的，直接写在标签里边的（js代码比较少的时候）

4、js案例

（1）实现图片轮播

（2）定时弹出广告图片

（3）注册表单js校验，结合正则表达式

（4）隔行换色

（5）使用js完成省市二级联动的效果（见随笔js02）

（6）js实现全选和全不选，批量操作等

posted on 2018-02-19 13:09 limuma 阅读(556) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部