limuma

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理
  24 Posts :: 0 Stories :: 1 Comments :: 0 Trackbacks

公告

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代码比较少的时候)

      <input  type="button"  value="跳转"   onclick="javascript:location.href='xxx.html'"/>

4、js案例

(1)实现图片轮播

(2)定时弹出广告图片

(3)注册表单js校验,结合正则表达式

(4)隔行换色

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

(6)js实现全选和全不选,批量操作等

  

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