JavaScript学习笔记2

6 面向对象编程

6.1 什么是面向对象

javascript的面向对象与其他有些区别
类：模板
对象：具体的实例
在javascript中这个需要大家换一下思维方式
原型：

var user={
            name:"小明",
            sex:"男",
            run:function () {
                console.log(this.name+"run...");
            }
        };
        var xiaohong={
            name:"小红"
        }
        //原型对象
        xiaohong.__proto__=user;

给user新增一个方法

user.prototype.hello=function()
        {
            alert("hello");
        };

class继承
class关键字是在es6引入的
1 定义一个类，属性，方法

class Student{
            constructor(){
                this.name=name;
            }
            hello(){
                alert("hello");
            }
        }
         var xiaoming=new Student("小明");
class XiaoStudent extends Student{
            constructor(name,grade)
            {
                super(name);
                this.grade=grade;
            }
        }
        var xiaohong=new XiaoStudent("小红",1);

两种继承方式本质上是一样的

7 操作BOM对象

JavaScript和浏览器的关系
JavaScript的诞生就是为了在浏览器中运行
BOM：浏览器对象模型
ie6-11
chrome
safari
firefox
Opera
window
window代表浏览器窗口
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
Navigator
Navigator，封装了浏览器信息
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform
大多数时候，我们不会使用navigator对象，因为会被人为修改
不建议使用这些属性来判断和编写代码
screen
屏幕尺寸
screen.width
screen.height
location
location代表当前页面的URL信息
host
hostname
href
origin
pathname
port
protocol
document
document代表当前页面
document.title
document.getElementById(“test”);
获取cookie
document.cookie;
劫持cookie
服务端可以设置cookie:httpOnly
history
history.back()//后退
history.forward()//前进

8 操作DOM对象

浏览器网页就是一个DOM树形结构
更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新节点
要操作一个DOM节点，就必须先获得这个DOM节点
获得DOM节点

//对应css选择器
var h1=document.getElementsByTagName('h1');
        var p1=document.getElementById("p1");
        var p2=document.getElementsByClassName("c1");
        //获取父节点下的所有子节点
        var children=p2.children;

原生代码，之后我们尽量使用JQuery()
更新节点

var p1=document.getElementById("p1");
修改p1文本
p1.innerText="1234"
解析HTML文本标签
id.innerHTML="<strong>123</strong>"
//操作css
p1.style.color='yellow';
p1.style.fontSize='20px';

删除节点
删除节点的步骤先获取父节点，再通过父节点删除
p1.removeChild(p2);
删除多个节点的时候children是时刻变化的，删除节点的时候一定要注意
插入节点
我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素，但是这个DOM已经存在元素，我们就不能这门弄，会产生覆盖
创建新标签实现插入

var p1=document.getElementById("p1");
//通过js创建一个新节点
var newA=document.createElement('p');
newA.id="test";
newA.innerText="test";

创建新的 HTML 元素 (节点) - appendChild()
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
实例

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

9 操作表单

表单 form DOM树
文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单目的：提交信息
选择器（JQuery）
$(‘p’).click()//标签选择器
$(’#id’).click()//id选择器
$(’.class1’).click()//class选择器
JQuery鼠标事件，键盘事件，其他事件