JS高级语法与JS选择器

元素（element)和节点(node)#

childNode属性和children属性的区别#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div id="parentDiv">
     <!--注释-->
     <div></div>
 </div>
 <script>
     console.log(document.getElementById('parentDiv').childNodes); //NodeList[5]
     console.log(document.getElementById('parentDiv').children) ;  //HTMLCollection[1]
 </script>
</body>
</html>

childNodes属性返回的是NodeList数组，是属于节点（也包括元素）的属性，而children属性返回的是子元素，是属于元素的属性

而在Nodelist数组里面也有元素存在，证明了元素也是节点的一种，即元素节点。

W3C中的解释是：

在 HTML DOM （文档对象模型）中，每个部分都是节点
 
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点 （包括回车符，空格，空白字符也是属于文本节点）
注释是注释节点

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。
总结：元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点

nodeName（纯大写）属性含有某个节点的名称#

元素节点的nodeName 是标签名称
属性节点的nodeName 是属性名称
文本节点的nodeName 永远是 #text
文档节点的nodeName 永远是 #document
<br>nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值<br>
nodeValue 属性对于文档节点和元素节点是不可用的　

nodeType 属性可返回节点的类型#

Element 元素     1
Attribute 属性   2
Text 文本        3
CDATA Section CDATA断     4
Entity Reference 实体参数  5
Entity 实体    　　　6
Processing Instrucion 处理指令  7
Comment 注释    8
Document 文档    9
Document Type 文档类型   10
Document Fragment 文档片断   11

回到顶部

添加和删除节点（HTML 元素）#

创建新的 HTML 元素#

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
</div>
 
</body>
<script>
var para=document.createElement("p");
 
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
 
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</html>
 
<!-- 为这段代码创建新的 <p> 元素：
var para=document.createElement("p");
此时检查页面可以看到div里面已经生成了<p>元素
 
如需向 <p> 元素添加文本，您必须首先创建文本节点。
这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素：
element.appendChild(para); -->

删除已有的 HTML 元素#

如需删除 HTML 元素，您必须首先获得该元素的父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
  
</body>
<script>
var parent=document.getElementById("div1");
 
var child=document.getElementById("p1");
 
parent.removeChild(child);
</script>
</html>
 
<!-- 例子解释：
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
 
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
 
从父元素中删除子元素：
parent.removeChild(child);
 
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：
找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child); -->

回到顶部

常用节点操作#

1.节点查找
document.getElementById，document.getElementByTagName，document.getElementByName ，document.getElementByClassName
document.querySelector() 参数为选择器
document.forms 选取页面中的所有表单元素
2.增加节点
增加节点前必须先使用document.createElement()创建元素节点，参数为标签名
m.appendChild(n) 为m元素在末尾添加n节点
m.insertBefore(k,n) 在m元素的k节点前添加n节点
3.删除节点
m.removeChild(n)删除m元素中的n节点
m.replaceChild(k,n)用n节点取代m元素中的k节点
4.复制节点
m.cloneChild() 复制m节点，并将复制出来的节点作为返回值
参数为true时，则将m元素的后代元素也一并复制。否则，仅复制m元素本身
 
 
节点属性操作
 
节点(自身)属性:
   
attributes - 节点（元素）的 属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值
 
1.节点属性值选取
m.属性名  (：驼峰形式 )     m.className
m[“属性名”]      m.['className']
 
m.getAttribute(“属性名”)  ：加引号，html的形式       m.getAttribute("class")
 
2.节点属性修改
前两种选取方法时，直接赋值即可
m.setAttribute("属性名"，“值”)
 
 
3.创建属性节点并设置属性值
var info_node=document.createAttribute(\"info\");//创建
info_node.value='123'；//设置
sup1.setAttributeNode(info_node);//添加
 
4.复制节点
var body = document.querySelector('body');
true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签
var cl_body = body.cloneNode(true);
console.log(cl_body);
 
 
  
JS DOM节点（当前标签和同级、父级、子级..之间的关系）
1. 通过顶层document节点获取
    1) document.getElementById(elementId) //根据id获得
    2) document.getElementsByName(elementName) //根据name获得
    3) document.getElementsByTagName(tagName) //根据标签名获得
2、通过父节点获取
    1) parentObj.firstChild //获得第一个子节点
    2) parentObj.lastChild //获得第二个子节点
    3) parentObj.childNodes //获取作为指定对象直接后代的HTML元素和TextNode对象的集合
    4) parentObj.children //非标准dom集合，建议使用childNodes
    5) parentObj.getElementsByTagName(tagName) //获得该标签下标签名为tagName的所有标签
3、通过临近节点获取
    1) neighbourNode.previousSibling //获得同级前一个标签
    2) neighbourNode.nextSibling //获得同级后一个标签
4、通过子节点获取
    1) childNode.parentNode //获得父标签

回到顶部

事件#

onload：页面加载完毕事件，只附属于window对象
onclick：鼠标点击时间
onmouseover：鼠标悬浮事件
onmouseout：鼠标移开事件

on事件绑定方式#

document.onclick = function() {
console.log("文档点击");
}

on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法

document.onclick = function() {
console.log("文档点击");
}

事件的移除

1	`document.onclick = null;`

非on事件绑定方式#

document.addEventListener('click', function() {
console.log("点击1");
})<br>
document.addEventListener('click', function() {
console.log("点击2");
})

非on事件可以同时绑定多个方法，被绑定的方法依次被执行
addEventListener第三个参数(true|false)决定冒泡的方式

1 2	`function fn () {}` `document.addEventListener('click', fn);`

事件的移除
document.removeEventListener('click', fn，false);

事件的三种绑定方式的思考#

方法一:嵌入dom
把onclick绑定在标签上
HTML元素行间事件（也可以叫HTMl事件处理程序）,直接在html标签里添加事件。
缺点：html和js代码紧密耦合
<input id="btn1" type="button" onclick="test();" />
  
方法二:直接绑定
onclick的js绑定办法
 
//把一个函数赋值给一个事件处理程序属性。（这种方式也叫做Dom0级事件处理程序）
var btn1 = document.getElementById('btn1');
function abc() {
    alert('abc');
}
btn1.onclick = abc; //当点击的时候执行abc这个函数，等价于 btn1.onclick=function abc(){alert('abc');}
//btn1.onclick = null； //去掉绑定的事件
 
方法三:事件监听
 
 click的js绑定办法(js的话推荐这种)
//通过“事件监听”的方式来绑定事件（也叫Dom2级事件处理程序）
 
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  
function showMsg() {
    alert("事件监听");
}
//btn2.removeEventListener('click', showMsg, false); //去除绑定
 
 
方法一
最原始的写法：和html混合在一起写，缺点是代码高冗余，且无法添加多个事件处理函数如上文对事件的举例则为典型的**html事件处理程序*写法
 
方法二
dom0级：将html代码和js代码分离，且支持匿名函数，可以看到完美的改进了1的冗余缺憾，所有的事件相关操作都在js中完成
 
方法三
dom2级：ie使用attachEventListener其他非ie使用addEventListener，可以支持绑定多个事件，瞧吧，又一个缺憾被完美解决了~，而且dom2级还可以自定义事件流，下一篇会分析事件流模型
 
dom3级：对事件进行了更广而全的分类，请自行查阅

实例运用一#

</head>
<body>
    <div class="div"></div>
    <div class="div"></div>
</body>
<script>
    // js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
    // 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
    // 指定功能: 就是开发者根据实际需求完整相应的功能实现
 
    // 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
 
    // 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)
    var div = document.querySelector(".div");  // 找到的是第一个.div
    div.onclick = function () {
        // alert(123)
        this.style.backgroundColor = "pink";
    }
 
    // 明确第一个及第二个
    var divs = document.querySelectorAll('.div');
    divs[1].ondblclick = function () {
        divs[0].style.backgroundColor = "yellow";
    }
 
</script>
</html>

实例运用二#

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

复习并延伸
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
    <style>
        [key='value'] {
            color: #0f8209;
        }
    </style>
</head>
<body>
    <div class="ele" alert="OK">div div div</div>
</body>
<script>
    // 1.面向对象js
    // ES5
    // 普通的单一对象
    var obj = {
        // 普通对象的属性
        key: "value",
        fn: function () {
            console.log("普通对象的方法")
        }
    };
    console.log(obj.key);
    console.log(obj["key"]);
    // 1.key的类型为字符串类型
    // 结论:
    //      js支持的标识符可以省略引号, 反之不可以省略
    //      不支持的标识符访问方式: 不可以采用.语法,需要采用[]语法,eg:obj["background-color"]
 
    var obj1 = {
        "name": "obj1",
        // key有时候会出现js不能直接支持的标识符书写方式
        // 需求: obj1用来描述页面标签的各种颜色
        color: "red",
        // "color": "red",
        "background-color": "yellow"
    }
    console.log(obj1.name);
    console.log(obj1["name"]);
    console.log(obj1.color);
    // obj1.background = 12;
    // color = 10;
    console.log(obj1["background-color"]);
 
    // 2. 对象可以任意添加或删除属性
    var obj2 = {
        name: "obj2"
    };
    console.log(obj2);
    // 删除属性
    delete obj2.name;
    console.log(obj2);
    // 添加属性
    obj2.age = 8;
    console.log(obj2);
 
    // 拓展: 获取的页面元素就是标签对象, 可以对其添加任意属性
    var ele = document.querySelector('.ele');
    console.log(ele.info);  // 直接使用无值, 原因ele并没有添加该属性
    ele.info = "添加的属性信息";  // 添加属性
    console.log(ele.info);  // 添加属性后就可以正常方式添加的属性值
    delete ele.info;  // 删除操作
    console.log(ele.info);  // 删除后属性又会消失
 
    // 构造函数
    function Perple(name, age) {
        this.name = name;
        this.age = age;
        this.fn = function () {
            console.log("fn")
        }
    }
    // 实例化对象
    var p = new Perple("张三", 18);
    p.fn();
 
    // ES6
    class Student {
        constructor (name, age) {
            this.name = name;
            this.age = age;
        }
        fn () {
            console.log("fn")
        }
    }
    var s = new Student("张三", 18);
    s.fn();
 
</script>
<script>
    // getElementById只能由document调用
    var ele = document.getElementsByClassName("ele")[0];
    console.log(ele);
    ele = document.querySelector(".ele");
    console.log(ele);
    ele = document.querySelectorAll(".ele")[0];
    console.log(ele);
 
    // 该添加属性的方式只映射到js代码中
    ele.index = 123;
    console.log(ele.index);
 
    // js如何操作元素(页面标签)的全局属性, 映射到html代码中
    ele = document.querySelector('[alert]');  // 通过全局属性获取元素
    console.log(ele);
    // 获取全局属性值
    var info = ele.getAttribute('alert');
    console.log(info);
    // 修改全局属性值
    ele.setAttribute('alert', 'no ok');
    // 添加全局属性值(映射到html代码中) => 结合CSS来控制页面标签的样式
    ele.setAttribute('key', 'value');
 
</script>
</html>

回到顶部

事件参数event#

存放事件信息的回调参数

在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）
所有浏览器都支持Event对象，但支持方式不同
IE中的事件对象：window.event

阻止事件冒泡 
 
DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行
IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用 
  
jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();
 
默认行为
 
阻止默认行为 
DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行
IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用
jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式　

事件注意点#

1、event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；
2、event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；
firefox里的要用参数引导才能用，是运行时的临时变量
 
在IE/Opera中是window.event，在Firefox中是event；
而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用

回到顶部

处理冒泡与默认事件#

事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件

如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
因此它支持W3C的stopPropagation()方法
e.stopPropagation(); 
else
否则，我们需要使用IE的方式来取消事件冒泡 <br>window.event.cancelBubble = true;<br>return false;

处理冒泡实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <style>
        body {
            margin: 0;
        }
        .box {
            background-color: pink;
        }
        .sup {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
 
    <div class="sup">
        <div class="sub"></div>
    </div>
 
    <a href="https://www.baidu.com">只想相应点击事件</a>
</body>
<script>
    var box = document.querySelector('.box');
    // 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象
    box.onclick = function (ev) {  // 回调函数
        console.log(ev)
        // 特殊按键 altKey | shiftKey | ctrlKey
        console.log(ev.altKey)
        // 鼠标的点击点
        console.log(ev.clientX, ev.clientY)
    }
</script>
<script>
    var sup = document.querySelector('.sup');
    var sub = document.querySelector('.sub');
 
    // 事件默认有冒泡, 子级相应事件后,会将事件传递给父级,如果父级有相同事件,也会被激活, 最终传递给document
    sub.onclick = function (ev) {
        console.log(ev);
        // 取消冒泡, 当自身处理事件后, 该事件就处理完毕, 结束, 不再向上传递
        ev.cancelBubble = true;
        console.log("子级被点击了")
    };
    sup.onclick = function () {
        console.log("父级被点击了")
    };
    document.onclick = function () {
        console.log("文档被点击了")
    }
</script>
</html>

事件默认行为:当一个事件发生时浏览器自己会做的事情

如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.preventDefault ) 
阻止默认浏览器动作(W3C) 
e.preventDefault(); 
else
IE中阻止函数器默认动作的方式 
window.event.returnValue = false; 
return false;
 
既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为

处理默认事件实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <style>
        body {
            margin: 0;
        }
        .box {
            background-color: pink;
        }
        .sup {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
 
    <div class="sup">
        <div class="sub"></div>
    </div>
 
    <a href="https://www.baidu.com">只想相应点击事件</a>
</body>
<script>
    var box = document.querySelector('.box');
    // 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象
    box.onclick = function (ev) {  // 回调函数
        console.log(ev)
        // 特殊按键 altKey | shiftKey | ctrlKey
        console.log(ev.altKey)
        // 鼠标的点击点
        console.log(ev.clientX, ev.clientY)
    }
</script>
<script>
    // 默认事件
    var aBtn = document.querySelector('a');
    aBtn.onclick = function (ev) {
        ev.cancelBubble = true;
        console.log("a被点击了");
        // 手动转跳页面
        open('https://www.oldboyedu.com', '_self');
        // a标签默认会完成转跳, 如果取消默认事件
        return false;
    }
 
</script>
</html>

再补充一些

默认操作具体指的是什么呢？
(1)把单击事件处理程序注册到一个锚元素，而不是一个外层的<div>上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。

(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。
这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。

如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事，因为默认操作不是在正常的事件传播流中发生的
在这种情况下，处理方法有：

1、w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。
1 <a href="http://www.cnblogs.com/yycode/" id="testA" >caibaojian.com</a>
 
var a = document.getElementById("testA");
a.onclick =function(e){
    if(e.preventDefault){
        e.preventDefault();//
    }else{
        window.event.returnValue = false;//IE
　　　　　//注意：这个地方是无法用return false代替的 
　　　　　//return false只能取消元素
    }
}
 
 
2、return false;
javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡

回到顶部

常见事件#

鼠标事件#

var box = document.querySelector('.box');
 
1. 点击事件
box.onclick = function () {
    console.log("单击");
};
2. 双击事件(应用场景不广)
box.ondblclick = function () {
    console.log("双击");
};
3. 鼠标右键
box.oncontextmenu = function () {
    console.log("右键了");
    return false;
};
4. 鼠标悬浮 | 移动 | 按下 | 抬起 | 离开
box.onmouseover = function () {
    console.log("悬浮");
};
box.onmousemove = function () {
    console.log("移动");
};
box.onmousedown = function () {
    console.log("按下");
};
box.onmouseup = function () {
    console.log("抬起");
};
box.onmouseout = function () {
    console.log("离开");
}
 
事件参数ev
ev.clientX：点击点X坐标
ev.clientY：点击点Y坐标

over | out VS enter | leave#

总结:
1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合
2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合
3. 单独考虑一个盒子的悬浮离开事件, 两套均可以
 
特性
从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级
 
从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发
 
悬浮子级:
sub over => sup over  支持冒泡
sup enter => sub enter  不支持冒泡

键盘事件#

键盘事件
onkeydown：键盘按下会触发，长按持续触发
onkeyup：键盘抬起
 
事件参数ev
 
ev.keyCode：按键编号
ev.altKey：alt特殊按键
ev.ctrlKey：ctrl特殊按键
ev.shiftKey：shift特殊按键
 
 
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    // 键盘长按会一直触发按下事件
    document.onkeydown = function (ev) {
        console.log(ev);
        // 按下的键盘编号
        console.log("按下", ev.keyCode);
        // console.log(ev.which);
    }
    document.onkeyup = function (ev) {
        console.log("抬起", ev.keyCode);
    }
 
    // 左上右下: 37-40
    var box = document.querySelector('.box');
    document.onkeydown = function (ev) {
        switch (ev.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - 10 + 'px';
                break;
            case 38:
                box.style.top = box.offsetTop - 10 + 'px';
                break;
            case 39:
                box.style.left = box.offsetLeft + 10 + 'px';
                break;
            case 40:
                box.style.top = box.offsetTop + 10 + 'px';
                break;
        }
    }
</script>
</html>

表单事件#

onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件

文档事件#

文档事件由window调用
onload：页面加载完毕触发
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意

图片事件 #

1	`onerror：图片加载失败`

页面事件#

onscroll：页面滚动
onresize：页面尺寸调整
window.scrollY：页面下滚距离

文档页面事件运用实例#

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>其他事件</title>
    <script>
        // 当页面加载完毕之后再回调
        window.onload = function () {
            var box = document.querySelector('.box');
            console.log(box);
        }
 
        // 页面滚动可以设置给 window | document
        var isShow = false;
        window.onscroll = function () {
            console.log(window.scrollY);
            if (window.scrollY >= 1200) {
                if (!isShow) {
                    console.log("将返回Top按钮显示");
                    isShow = true;
                }
            } else  {
                if (isShow) {
                    isShow = false;
                }
            }
        }
    </script>
</head>
<body>
    <div class="box"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
 
</html>

回到顶部

JS选择器#

getElement系列#

通过id名获取唯一满足条件的页面元素

document.getElementById('id名');
该方法只能由document调用
任何HTML元素可以有一个id属性，在文档中该值必须唯一
若浏览器中出现多个id名的情况，CSS样式对所有该id名的元素都生效，但javascript脚本仅对第一个出现该id名的元素生效。
getElementById()该方法接收一个参数：要取得元素的id，若找到则返回该元素，若不存在则返回null
注意：document.getElementById方法的内部实现需要用到this，这个this本来被期望指向document
 
跨浏览器兼容
1：在ie7中，使用getElementById()的时候，接收的参数id不区分大小写。
2：在表单元素中，如果表单设置有name属性，其name属性会被当做id识别出来。
3:id是唯一的，但name属性并不是唯一的。具有该名称的隐式全局变量会引用一个类数组对象，包括所有该命名的元素

通过class名获取所有满足条件的页面元素

document.getElementsByClassName('class名');
该方法可以由document及任意页面元素对象调用
document.getElementsByClass（"class1
class2"）可以拿到同时拥有class1和class2的元素，中间用空格隔开，不区分class1和class2的顺序。
 
兼容性：IE8及其以下版本的浏览器未实现getElementsByClassName方法
返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
没有匹配到任何结果返回空HTMLCollection对象 ([])　

通过name属性获取元素

getElementsByName（返回值是一个nodeList集合（区别于Array），可作用于Dom元素）
getElementsByName()方法接收一个参数，即要取得元素的name值。
 
document.getElementsByName("Name");Name为要获取元素的name属性值,这个方法一般适用于提交表单数据,当
元素为form、img、iframe、applet、embed、object的时候设置name属性时,会自动在Document对象中创建以该
name属性值命名的属性。
所以可以通过document.domName引用相应的dom对象。
 
在ie9中，getElementsByName()只对表单元素起作用。
IE9-浏览器中使用getElementsByName()方法也会返回id属性匹配的元素。因此，不要将name和id属性设置为相同的值。

通过tag名获取所有满足条件的页面元素

document.getElementsByTagName('tag名');
该方法可以由document及任意页面元素对象调用
返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
没有匹配到任何结果返回空HTMLCollection对象 ([])　
可以使用方括号语法或item()方法来访问类数组对象中的项，length属性表示对象中元素的数量。
[注意]通过getElementsByTagName()方法取得的类数组对象有一个namedItem()方法，可以通过元素的name属性取得集合中的第一个值。safari和IE不支持该方法。document.getElementsByTagName（"*"）表示匹配文档的所有元素

querySelect系列#

获取第一个匹配到的页面元素

1 2	`document.querySelector('css语法选择器');` `该方法可以由document及任意页面对象调用`

获取所有匹配到的页面元素

document.querySelectorAll('css语法选择器');
该方法可以由document及任意页面对象调用
返回值为NodeList (一个类数组结果的对象，使用方式同数组)
没有匹配到任何结果返回空NodeList对象 ([])

id名#

可以通过id名直接获取对应的页面元素对象，但是不建议使用

js选择器运用实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js选择器</title>
    <style>
        #d {
            color: red;
        }
    </style>
</head>
<body id="bd">
    <!--注释-->
    <div id="d" class="dd">我是ddd111</div>
    <div id="d" class="dd">我是ddd222</div>
 
    <div class="sup1">
        <div id="div"></div>
    </div>
    <div class="sup2">
        <div id="div"></div>
    </div>
</body>
<script>
    // 节点(了解): 在文档(document)中出现的所有内容都是document中的节点
    // 节点(node): 标签节点(元素element) | 注释节点 | 文本节点 | <!doctype>节点
    console.log([bd]) // 文本 注释 文本 标签 文本 标签 文本 标签 文本 标签 文本
</script>
<script>
    // js选择器: 将js与html建立起连接
    // js中一般称标签为页面元素
 
    // 1.直接通过id名进行匹配
    console.log(d);  // 两个都可以找到
 
    // 2.getElement系列(最严谨)
    // 所有显示在页面中的内容(展现给用户看的), 都是属于文档(document)对象的内容, 存放在文档中
    // console.log(document)
    // 获取文档中的标签 => document对象通过.语法去获取具体的目标标签元素
    // ① id
    var div = document.getElementById('d');  // 检索得到页面中出现的第一个满足条件的目标
    console.log(">>>", div);
 
    var body = document.getElementById("bd");
    console.log(body);
 
    // 注: getElementById该方法只能由document来调用
    // 原因: 我们需要保证一个文档中一个id只能出现一次, document检索的就是文档,
    // 而某父级标签只能检索自身标签内部区域, document可以保证文档中只能一个id
    // 只出现一次,某父级标签只能保证自身内部区域id不重复,能不能保证与外界不重复?
    // 不能, 所以从安全角度出发, 获取唯一对象的getElementById方法只能由能确定唯一id的
    // 对象来调用, 能被document调用, 不能被sup来调用
 
    // ② 类名
    var divs = document.getElementsByClassName('dd');
    console.log(divs);
    // 两个div在body之中, 上方已经获取了body, 那能否通过body来获取body中的div
    var divs1 = body.getElementsByClassName('dd');
    console.log(divs1);
 
    // ③ 标签名
    var divs = document.getElementsByTagName('div');
    console.log(divs)
 
    console.log('--------------------------------------------------');
 
    // 3.querySelector系列(最方便)
    // 参数: 就是css选择器语法
    // querySelector检索第一个
    var div = document.querySelector('body > .dd');
    console.log(div);
 
    // querySelectorAll检索所有满足结果
    var divs = document.querySelectorAll('body > .dd');
    console.log(divs);
    var divs = body.querySelectorAll('.dd');
    console.log(divs)
 
    var divs = body.querySelectorAll('#d');  // 不严谨
    console.log(divs)
 
 
</script>
</html>

回到顶部

选择器分类#

1. ID选择器
 
使用ID选择器时，需在前面添加“#”，区分大小写，语法如下：document.querySelector('#id'); //等同于document.getElementById('id')
 
2. 元素选择器
 
元素选择器通过指定的标签查询元素，此时querySelectorAll等同于getElementsByTagName，语法如下：document.querySelectorAll('a'); //获取页面上的所有a元素并返回元素
 
3. 样式类选择器
 
使用元素的样式类获取一个或一类元素，样式名字前使用“.”（英文句号）开头，语法如下：document.querySelectorAll('.btn'); //获取所有样式类中包含btn类名的元素
 
4. 分组选择器
 
使用querySelectorAll不仅可以获取一个或一类元素，还可以同时获取其他类别元素，两种类型之间使用逗号隔开，语法如下：document.querySelectorAll('a,p'); 
//获取页面上所有a元素和p元素，并通过一个列表返回document.querySelectorAll('.btn,.txt'); //获取页面上所有包含btn和txt样式类名的元素
 
5. 属性选择器
 
获取页面上包含指定属性的元素，属性名称可以是元素原生属性和用户自定义属性，语法如下：document.querySelectorAll('a[target="_blank"]'); 
//获取页面上所有target属性为_blank的a元素document.querySelectorAll('img[data-id]'); //获取页面上所有带有自定义属性data-id的img元素
 
6. 后代选择器
 
主要用于选择作为某元素后代的元素，规则左边的选择器一端包含两个或多个用空格分隔的选择器，如div a可以理解为查找所有被div包围的所有a元素，语法如下：document.querySelectorAll('div a'); 
//获取页面上所有被div包含的a元素document.querySelectorAll('div .btn'); //获取页面上所有被div包含的带有btn样式类名的元素
  
7. 子元素选择器
 
后代选择器会将元素底下的所有相关元素都搜索出来，如果想进一步缩小范围，可以使用子元素选择器，只会选择某个元素的一级子元素，子元素用“>”（大于号）表示，代码如下：
<html>    <div id="first">        <div></div>        <div></div>    </div></html>     <script>    document.querySelectorAll('html>div'); //只返回一个id为first的div元素</script>
  
8. 相邻兄弟选择器（比较少用）
 
选择紧接在另一个元素后的元素，而且两者有相同的父元素，相邻兄弟选择器使用“+”（加号），代码如下：
<div>    <div></div>    <div></div></div><p id="p1"></p><p id="p2"></p><script>    document.querySelectorAll('div+p'); 
//只返回一个id为p1的p元素</script>
  
9. 伪类选择器
 
“:first-child”表示选择元素的第一个子元素，“:last-child”表示选择元素的最后一个子元素，“:nth-child(n)”表示选择元素的第n个子元素。“:first-child”的使用例子，代码如下：
<div>    <p id="p1"></p>    <p id="p2"></p></div> <script>    document.querySelectorAll('p:first-child'); //只返回一个id为p1的p元素</script>

回到顶部

闭包#

function outer() {
var data = {}
function inner() {
return data;
}
return inner;
}

闭包目的：不允许提升变量作用域时，该函数的局部变量需要被其他函数使用
闭包本质：函数的嵌套，内层函数称之为闭包
闭包的解决案例：①影响局部变量的生命周期，持久化局部变量；②解决变量污染

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
闭包
</body>
<script>
    // 了解知识点
    // 闭包: 局部的函数(被一个函数包裹的函数)
    // 为什么使用闭包:
    // 1.一个函数要使用另一个函数的局部变量
    // 2.闭包会持久化包裹自身的函数的局部变量
    // 3.解决循环绑定
 
    // 函数的嵌套定义
    function outer() {
        var num = 10;
        function inner() {
            // 1.在inner函数中,使用了outer的局部变量num
            return num;
        }
        return inner;
    }
    var innerFn = outer();
    // 2.借助闭包,将局部变量num的生命周期提升了
    var num = innerFn();
    console.log(num);
 
 
</script>
</html>

回到顶部

循环绑定#

.html文件

<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>

.js文件

var lis = document.querySelector('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
// 打印列表项的索引
console.log(i);
}
}

会发生变量污染

解决方法

1 获取局部作用域解决 2 闭包解决 3 对象属性解决

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>循环绑定</title>
</head>
<body>
<div class="box">0000000000000000001</div>
<div class="box">0000000000000000002</div>
<div class="box">0000000000000000003</div>
</body>
<script>
    var divs = document.querySelectorAll(".box");
    /* 存在污染
    for (var i = 0; i < divs.length; i++) {
        // i = 0 | 1 | 2 | 3
        // 循环绑定
        divs[i].onclick = function () {
            console.log("***", i)
        }
    }
    // i = 3
    console.log(">>>", i);
    */
 
    /* 利用块级作用域解决
    for (let i = 0; i < divs.length; i++) {
        // {i=0 <= i} {i=1 <= i} {i=2 <= i}
        // i = 3
        // 循环绑定
        divs[i].onclick = function () {
            console.log("***", i)
        }
    } // for运行结束, i=3会被销毁
    console.log(">>>", i)
    */
 
    // 利用标签的属性解决
    /*
    for (var i = 0; i < divs.length; i++) {
        divs[i].index = i;
        divs[i].onclick = function () {
            // console.log("###", i)
            console.log(this.index)
        }
    }
    */
 
    // 利用闭包处理循环绑定
    for (var i = 0; i < divs.length; i++) {
        (function () {
            var index = i;
            divs[index].onclick = function () {
                console.log("###", index)
            }
        })()
        /*
        (function (index) {
            divs[index].onclick = function () {
                console.log("###", index)
            }
        })(i)
         */
        /*
        (function (i) {
            divs[i].onclick = function () {
                console.log("###", i)
            }
        })(i)
         */
    }
 
 
</script>
</html>

回到顶部

面向对象JS#

属性与方法#

1	`var obj = {}; \| var obj = new Object();`

属性

1	`obj.prop = "";`

方法

1	`obj.func = function () {}`

删除属性与方法

1 2	`delete obj.prop` `delete obj.func`

属性和方法实际使用

对象: 特征与行为的结合体, 是一个具象的实体
 
// js对象语法
var obj = {
// 属性
name: 'Zero',
// 方法
teach: function () {
 console.log("教学");
}
};
// 对象使用属性与方法, 采用.语法
console.log(obj.name);
obj.teach();

JS中中括号（[ ]）与 .#

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符
中括号运算符可以用字符串变量的内容作为属性名。点运算符不能
中括号运算符可以用纯数字为属性名。点运算符不能
中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能

下面的例子中，a.b表示对象a的属性b，既可以设置也可以读取

1	`object[key]=>key为常量时，object[key]等价于object.key，例如：a.b == a['b']`

特殊的，object[key] 中key为变量时，只能用中括号形式

var a = {};
 // a.b = 1; 
a['b'] = 1; 
c = a.b; 
// c = a['b'];
alert(c);

标识符是否合法对两种用法的影响

var obj = {}; 
// 为obj添加一个属性name，name是合法的标识符，即也可以通过obj.name方式来定义
 
obj['name'] = 'jack'; 
 
// 为obj添加一个属性2a，2a不是合法的标识符（不能以数字开头），不能通过obj.2a来定义
 
obj['2a'] = 'test';
 
var obj = {name:'jack'};
obj['2a'] = 'test';
obj['name']; // --> jack 
obj['2a']; // --> test (不能通过obj.2a获取)

总结：常量用点，变量就用中括号

运算符左侧应当是一个表达式，它返回一个对象。
对于点(.)来说，右侧必须是一个以属性名称命名的简单标识符。
对于方括号([])来说，方括号里必须是一个计算结果为字符串的表达式，这个字符串就是属性的名字

当通过点运算符(.)方法对象属性时，属性名用一个标识符来表示。标识符必须直接出现在js程序中，它们不是数据类型，因此程序无法修改它们。
反过来讲，当通过[]来方式对象的属性时，属性名通过字符串表示。字符串是js的数据类型，在程序运行时可以修改和创建它们

<script type="text/javascript">
var addr = "";
for(i=0;i<4;i++){
addr += cutomer["address" + i] + "\n";
}
</script>

这段代码读取customer对象的address0,adddress1,address2,adddress3属性，并将他们连接起来

类字典结构使用#

结构

1	`var dict = {name: "zero", age: 18}`

拓展

1	`var dict = {"my-name": "zero", fn: function () {}, fun () {}}`

使用

1	`dict.name \| dict["my-name"] \| dict.fn()`

构造函数（ES5）#

// 构造函数: 声明与普通函数一样, 只是函数名采用大驼峰命名规则
function Person(name) {  // 类似于python中的类一样来使用
   // 构造函数内部属性方式不同于普通函数
   this.name = name;  // this代表Person构造函数实例化出的所有具体对象中的某一个
   this.teach = function () {
       console.log(this.name + "正在教学");
   }
}
// 如何使用构造函数中的属性与方法
// 1. 通过构造函数实例化出具体对象
// 2. 通过对象.语法调用属性与方法
var p1 = new Person("杨虎虎");  // name: 杨虎虎
var p2 = new Person("刘xx");  // name: 刘xx
console.log(p1.name);
console.log(p2.name);
p1.teach();
p2.teach();
 
 
为什么要用new？
 
new  会创建  pre 的对象，
但是没有 new 的话就没有没有可返回的值或对象了，所以是  undefined。
如果不想new 新的对象的话，可以在 pre 的方法里 返回一个值或对象。
function pre(){
    this.radius = Math.random();
    return this.radius;
}
 
加 new 会把这个函数当作是一个构造器，返回一个对象。
不加的话，就是调用一个普通的函数，结果视函数返回值而定。 
有new，就返回对象，不管函数返回值如何。
无new，就看函数返回值。
构造函数最好返回 this 或者无返回值， 否则容易混淆。

类及继承（ES6）#

// ES6
// 引入了类
class Student {  // 类, 可以实例化对象, 但实例化出的对象需要加以区分
// 需要构造器(构造函数)来完成对象的声明与初始化
// ES6规定方法的语法
constructor (name) {
   // 属性在构造器中声明并完成初始化
   this.name = name;
}
// 类中规定普通方法
study () {
   console.log(this.name + "正在学习");
}
// 类方法
static fn() {
console.log("我是类方法")
  }
}
// 1.实例化类的对象
let stu1 = new Student("嘿嘿");
// 2.使用属性与方法
console.log(stu1.name);
stu1.study();
 
let stu2 = new Student("嘻嘻");
console.log(stu2.name);
stu2.study();
 
Student.fn()
 
<script>
// 类方法
class Tool { // 功能类(工具类)中的方法都定义为类方法
static max (num1, num2) {
return num1 > num2 ? num1 : num2;
}
}
// 通过Tool类来求两个数中的大值, 需要Tool类的对象出现吗? 不需要 => 功能有类直接使用
console.log(Tool.max(666, 888));
 
 
// throw "自定义异常";
// console.log("上面如果出现了异常, 逻辑将会被强制停止");
// var num = 10 / 0;
// console.log(num)
</script>

posted @ 2018-12-19 17:31 鲸鱼的海老大阅读(2050) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

公告

昵称：鲸鱼的海老大
园龄： 7年1个月
粉丝： 2
关注： 8

+加关注

2025年3月

日

一

二

三

四

五

六

不积跬步无以至千里

JS高级语法与JS选择器

元素（element)和节点(node)#

childNode属性和children属性的区别#

nodeName（纯大写） 属性含有某个节点的名称#

nodeType 属性可返回节点的类型#

添加和删除节点（HTML 元素）#

创建新的 HTML 元素#

删除已有的 HTML 元素#

常用节点操作#

事件#

on事件绑定方式#

非on事件绑定方式#

事件的三种绑定方式的思考#

实例运用一#

实例运用二#

事件参数event#

事件注意点#

处理冒泡与默认事件#

常见事件#

鼠标事件#

over | out VS enter | leave#

键盘事件#

表单事件#

文档事件#

图片事件 #

页面事件#

文档页面事件运用实例#

JS选择器#

getElement系列#

querySelect系列#

id名#

选择器分类#

闭包#

循环绑定#

面向对象JS#

属性与方法#

JS中中括号（[ ]）与 .#

类字典结构使用#

构造函数（ES5）#

类及继承（ES6）#

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

相册

阅读排行榜

评论排行榜

最新评论

nodeName（纯大写）属性含有某个节点的名称#