JavaScript函数详解(二)

JavaScript函数的使用方法

  1. 直接使用,也就是直接写funcName()来进行调用
  2. 将函数返回值赋值给某个变量上,如:var demo = funcName();
  3. 将函数绑定到某个事件上,如 document.getElementById('hid').onclick = function(){
       // 单击事件响应的效果
    }
实例一:
<script type="text/javascript">
  function func(){
    document.write('这是一个函数');
  }
  func(); // 调用函数
</script>



实例二:
<script type="text/javascript">
  function func(){
    return 10+20;
  }
  var demo = func();  // 将返回值赋值给demo变量
  document.write(demo); // 30
</script>



实例三:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>Examples</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
</ul>
<script type="text/javascript">
  // 这个是获取标签节点的方法,这里是获取了页面上所有的li
  var list = document.getElementsByTagName("li");
  for(var i = 0; i < list.length ; i++){  // length是一个属性,表示list对象的长度
    list[i].onclick = function(){ // 将单击事件绑定到页面所有的li上
      /**
       * 下面的 list[i] 是一个错误的写法
       * 因为,当页面加载完成后,for循环已经循环完成
       * 只是中间的单击事件未执行
       * 所以,当点击页面上的li时,会产生一个错误 提示 list[i] 未定义
       */
      // list[i].style.color = "red";
      
      // 正确的写法是
      // this 代表当前事件源节点,这里也就是表示你点击的那个li
      this.style.color = "red";
    }
  }
</script>
</body>
</html>

你可能感兴趣的:(JavaScript函数详解(二))