JS中的函数

2017-10-15  本文已影响0人  凉粉的世界

函数: function(){}

函数声明:

function name(){

}

函数执行:

name();

函数类型的划分

一、根据调用环境的不同来划分:

1、事件函数 (绑定在事件中的函数,叫做事件函数,触发该事件时,函数才会被执行)

事件调用时,不需要加括号

2、非事件函数 非事件调用:

非事件调用时,需要加括号

二、根据有无名字划分:

有名字的函数

匿名函数

变量和函数的命名:

1. 不能以数字开头

2. 绝大部分的特殊字符都不能使用,目前只能用(_,$)

3. 建议不要用中文

4. 不能使用关键字和保留字

5. 最好都带有含义

6. js中一般使用驼峰命名(从第二个单词开始首字母大写)

函数书写的位置:

1、行间样式

eg.  <input  type = "button"  onclick = "alert('弹出框')">

2、外部样式

eg.   <script  type = "text/javascript"  src = "js/index.js" ></script>

3、内部样式

3-1  紧接着页面的结构书写

eg. <input   type =  "button"   id = "btn" >

      <script  type = "text/javascript">

             btn.onclick = function(){

                    alert('弹出框');

               }

         </script>

3-2  引用window.onload 可以写在html中的任何位置

eg.    <script type = "text/javascript" >

             window.onload = function(){

                  btn.onclick = function(){

                         alert('弹出框');

                      }

                 }

      </script>

函数事件:

1、事件包括:

onclick、onmouseover、onmouseout

2、事件绑定:

eg.      el.onclick = function(){}

注意:事件绑定是会前后覆盖的,一个元素的某个事件 只能添加一个操作

若想有多种显示结果,可以考虑用函数调用

eg.    btn.onclick = function(){        // btn这一个元素的点击事件可以有多种操作

             fn1();               //   弹出1(调用下面的函数)

             fn2();              //    弹出2(调用下面的函数)

          };

         function fn1(){

           alert(1);   

         };

       function fn2(){

          alert(2);

       };

属性操第一种操作:(通过.的操作,此处的  .   =  "的"  )

一、读操作

eg.    console.log(div.id);

         console.log(div.className);

         console.log(div.innerHTML);

         console.log(text.value);

         console.log(select.value);

注意问题:

1. class不叫class,叫作className

2. 要获取元素的内容的话,可以使用innerHTML

- innerHTML代表元素的开始标签和闭合标签之间的所有内容(如:包含在元素中的标签,也属于innerHTML)

- 获取textarea 既可以用innerHTML 也可以用value

- 获取select 选中的值 用value

3. style 获取元素的行间样式

- cssText 行间所写的所有样式

- 具体的样式名

4. js中不能出现"-",去掉"-"之后,后边的单词首字母大写

5. 注意 img 和 link 等外链内容,获取路径时,获取到的是绝对路径

二、属性的写操作

在js中 包含在一对引号之间的一串字符叫做“字符串”,引号可以是单引号‘   ’,也可以是双引号“   ”。

eg.  var box = document.getElementById("box")

       box.innerHTML = '百度';

        box.style.cssText = "border: 2px solid #000";

        box.style.border = "2px solid #000";

注意问题:

1. 直接设置innerHTML,会直接替换掉之前的所有内容

2. 直接设置cssText,会直接替换掉之前的所有内容

3. 一般不要修改id名

属性操第二种操作:(通过[‘属性名’]操作,此处的 []  =  "的" )

eg.  console.log(box['innerHTML'])

box['innerHTML']   =    box.innerHTML

var s = "innerHTML";  //属性名可以是个变量

box[s] = "马上就要秋天了"  ===   box.innerHTML="马上就要秋天了"

上一篇下一篇

猜你喜欢

热点阅读