简单学习JavaScript和DOM

基本语法

变量

var i = 0; var s = "";

## 函数
函数也是对象，是引用数据类型，函数名是其内存空间地址的引用

访问修饰符和返回值都不需要，使用 function声明函数
function add(i,j) {
return i+j;
}
如果是匿名函数直接 function() {}

函数调用时，不检查参数的匹配情况 
- 形参>实参
 - 实参为number型，返回NaN：not a number
 - 实参为string型，返回 +undefined
- 形参<实参
自动忽略后面多余的参数

Json对象

var jsonobj = {key:value,key2:value2,key3:value3};



# 事件驱动

window.onload = function(){

function d1() {
alert("11");
}

var btnEle = document.getElementById("btnId");
btnEle.onclick = d1;

<body> <button id="btnId">SayHello</button> </body> ```

DOM操作

文档对象模型 Document Object Model
DOM定义了访问和处理HTML文档的标准方法。
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

  • 整个文档是一个文档节点Document
  • 每个HTML元素是元素节点Element
  • HTML元素内的文本是文本节点Text
  • 每个HTML属性是属性节点Attribute
  • 注释是注释节点
非空验证&取消默认行为
btnEle.onclick = function() {
var uname = document.getElementById("username");
if(uname == null || "" == uname) {
    alert("用户名不能为空，请重新输入！");
    return false;
}
}

window.onload与$(function(){})区别

$(function(){}):当前文档绘制成功后执行
window.onload:当前文档完全加载后执行
前者只能书写一次，后者可以书写多次。
前者语法只有一种，后者有两种语法

事件冒泡和change事件

<script type="text/javascript">
    $(function(){
        $("#content").click(function(){
            alert("div");
         });

      $("span").click(function(){
            alert("span");
      //取消默认行为，取消冒泡
      return false;
      });
});

<body>
    <div id="content">
       外层div元素
          <span>内层span元素</span>
       外层div元素
    </div>
</body>

change事件：当元素失去焦点且文本改变时触发。

posted @ 2020-12-27 21:35  Lylee  阅读(67)  评论(0)    收藏  举报