欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js

程序员文章站 2022-07-08 18:46:56
1、js:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 html是页面的 ......

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属性

(3)DOM(Document文档对象模型):描述处理网页内容的方法和接口:

  js

                                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对象

    js

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

    

js
<!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 :

     js

    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(双击);

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

   注:这里的function init(){

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

    setInterval("xx1()",3000)

              ....

              ....       

              setInterval("xxn()",3000)

}      

    function xx1(){}

    ...

    ...

    function xxn(){}

js
 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鼠标移动事件),代码如下:

js
 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实现全选和全不选,批量操作等