BOM：(Browser Object Model)浏览器对象模型，使js可以和浏览器对话

DOM：(Document Object Model)文档对象模型，通过它访问HTML文档的所有元素

Window是全局对象，表示浏览器窗口

window.open();

 

location对象：

　　location.href　　// 当前地址

　　location.href = "url"　　//打开地址

　　location.reload()　　// 重载

 

弹出框：

　　alert("AlexSB");

　　confirm("是否年满18周岁？")　　// 返回true或false

　　prompt("请在下方输入","你的答案")　　// 返回输入内容

 

计时相关：

　　setTimeout()

　　　　var t = setTimeout(foo,毫秒)　　// foo加括号就直接执行了

　　clearTimeout(t)　　// 清除计时

　　var t = setInterval(foo,毫秒)　　//每隔多少毫秒启动

　　clearInterval(t)

 

DOM:

　　涉及到DOM操作的JS语句要放在body的最下面(载入顺序)

　　DOM标准规定HTML文档中的每个成分都是一个节点(node):

　　　　文档节点(document对象)：代表整个文档

　　　　元素节点(element)：代表标签

　　　　文本节点(text)：代表标签中的文本

　　　　属性节点(attribute对象)：代表一个属性。标签才有属性[s9]

　　　　注释节点(comment对象)

 

JS查找标签的三种方式：

 　　document.getElementById("d1")

 　　document.getElementsByClassName("c1")

 　　document.getElementByTagName("p")

　　　　var d3Ele = document.getElementById("d3");

　　　　d3Ele.parentElement;　　// 父标签

　　　　d3Ele.chidren;　　// 所有子标签

　　　　d3Ele.firstElementChild;

　　　　d3Ele.lastElementChild;

　　　　d3Ele.previousElementSibling;　　// 上一个兄弟标签

　　　　d3Ele.nextElementSibling;

　　　　

创建节点：

　　var imgEle = document.creatElement("img");　　// 创建自定义标签

　　d1Ele.appendChild(imgEle);　　// 在内部的最后添加

　　imgEle.src = ""　　// 添加图片地址

　　

　　var aEle = document.creatElement("a");

　　d2Ele.insertBefore(aEle,d3Ele);　　// 在d2内部，d3之前插入a标签

　　aEle.innerText = "点我";

　　aEle.href = "http://www.baidu.com";

 

操作标签的属性：

　　标签的属性：

　　　　.setAttribute("s9","hao")

　　　　.getAttribute("s9")

　　　　.removeAttribute("s9")

 

　　文本内容：

　　　　.innerText = ""

　　　　改父的text子标签都会被删除

　　标签内容：

　　　　.innerHTML = "<p>我是p标签</p>"　　// 用来快速添加简单标签

　　

删除节点：

　　d2Ele.removeChild(sonPEle);

替换节点：

　　d2Ele.replaceChild(aEle, sonPEle);　　// 在d2内部替换

　　

获取值：

　　.value

　　适用于：.input  .select  .textarea

 

class操作：

　　className　　获取所有样式类名

　　class.List.remove(cls)　　

　　classList.add(cls)

　　classList.Contains(cls)

　　classList.toggle(cls)　　存在就删除，否则添加

 

指定CSS操作：

　　没横线的用style.属性名

　　　　obj.style.margin

　　　　obj.style.width

　　有横线的后面第一个字母大写

　　　　obj.style.marginTop

　　　　obj.style.fontFamily

 

事件：

　　onclick

　　ondbclick

　　onfocus

　　onblur

　　onchange

　　onselect

事件绑定方式：

　　1.

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

　　

　　2.

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

带默认值的搜索框：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="古剑奇谭3" >
    <input type="button" value="搜索">

<script>
    var inputEle=document.getElementById("d1");
    inputEle.onfocus = function () {
        this.value = "";
    }

    inputEle.onblur = function () {
        if (!this.value.trim()){
            this.value = "还不买等啥呢";
        }
    }
</script>
</body>
</html>

 

select联动：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>select联动</title>
</head>
<body>

<select name="" id="s1">
    <option value="0">请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>

<select name="" id="s2">
    <option value=""></option>
</select>

<script>
    var data = {1:['沙河区','朝阳区','海淀区'],2:['静安区','闵行区','浦东区']};

    var s1Ele = document.getElementById("s1");
    s1Ele.onchange = function () {
        var area = data[this.value];
        var s2Ele = document.getElementById("s2");
        s2Ele.innerHTML = '';
        for (var i = 0;i<area.length;i++){
            var opEle = document.createElement("option");
            opEle.innerText = area[i];
            s2Ele.appendChild(opEle);
        }
    }

</script>

</body>
</html>