JavaScriptDOM

JavaScript导入

  1. 将JavaScript代码放到<header>标签中的<script>
  2. 将JavaScript代码存进.js文件中,使用<script src="">导入。最好的方法是放到</body>之前

javascript 语法

  • 语句

    • 多条语句放在不同得行上就可以分隔它们
    • 多条语句放在同一行上:用分号分隔
    • 建议在每条语句后都加入分号
  • 注释

    • // 注释单行,/**/注释多行
  • 声明和赋值

    • var a="happy",x = 33
  • 转义

    • 使用反斜线\进行转义
  • 关联数组(不推荐使用) var lemon = Array();lemon["name"] = "John"

  • 拼接

    • 字符串+数值 返回字符串;alert("10"+20) //返回“1020”
    • 数值+字符串 返回数值的算术和alert(10+“20”) //返回30
  • 对象

    • 有属性和方法

    • 继承

实例

  • 点击链接切换图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <ul>
    <li>
    <a href="1.jpg" title="罗云熙" onclick="showpic(this);return false;">罗云熙</a>
    </li>
    <li>
    <a href="2.jpg" title="王一博"onclick="showpic(this);return false;">王一博</a>
    </li>
    <li>
    <a href="3.jpg" title="赵丽颖"onclick="showpic(this);return false;">赵丽颖</a>
    </li>

    </ul>
    <img src="1.jpg" id="placeholder" alt="image">


    <script>
    function showpic(whichpic){
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    }
    </script>
    </body>
    </html>
  • window.open(url,name,features)创建新的浏览器窗口

    • features : 新窗口的属性,如尺寸、启动和禁用的功能等

DOM Core

  • getElementById
  • getElementByTagName
  • getElementByClassName
  • getAttribute
  • setAttribute

动态创建标记

  • document.write
  • createElement
  • appendChild
  • createTextNode
  • nextSibling 查找下一个节点
  • setTimeout 让某个函数在经过一段时间后才开始执行
  • CSS中的overflow属性用来处理一个元素的尺寸超出其容器的情况。可取值如下:
    • visible:不裁剪溢出的内容。浏览器吧溢出的内容呈现在其元素的显示区域以外,全部内容都可见。
    • hidden:隐藏溢出的内容。内容只显示在容器的显示区域里,只有以部分内容可见。
    • scroll:对溢出的内容进行隐藏,但显示一个滚动条以便让用户看到内容的其他部分。
    • auto:只有发生溢出时才显示滚动条。