JS中的函数

函数: 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="马上就要秋天了"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数 命名函数 function show(){ //函数的定义 code } show() //函数的...
    BrightenSun阅读 113评论 0 2
  • 认识函数:在一个完整的项目中,某些功能会被反复的使用到,那么我们就将 该功能封装进一个函数,当要使用该功能时,直...
    Victor细节阅读 120评论 0 1
  • 作者:伯乐在线专栏作者 - winty链接:http://web.jobbole.com/88733/ 函数节流的...
    开车去环游世界阅读 503评论 0 3
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17