JS面向对象

Posted 2020-12-09 wn-888

面向对象

JS java c# ....面向对象:JS有些区别

• 类 :模板
• 对象: 具体的实例

在JS这个需要大家换一下思维的方式!

原型:

var Student = {
    name:‘zhansan‘,
    age:3,
    run:function(){
        console.log(this.name+"run...");
    }
};

var xiaoming = {
    name:"xiaoming"
};
//原型对象
xiaoming._proto_ = student;

var Bird = {
    fly:function(){
        console.log(this.name+"fly...");
    }
};
//小明的原型是student
xiaoming._proto_ = bird;

class继承

class关键字是ES6引入的

1.定义一个类，属性，方法

//定义一个学生的类
class Student{
    constructor（name）{
        this.name= name；
        }
    hello(){
        alert(‘hello‘)
    }
   }
   var xiaoming = new Student(‘xiaoming’);
   var xiaohong = new student(‘xiaohong‘);
   xiaoming.hello()

操作BOM对象(重点)

浏览器介绍

JS 和浏览器的关系?

JS诞生是为了能够让他在浏览器中运行~

BOM:浏览器对象模型

• IE
• Chrome
• Safari
• FireFox

window (重要)

window 代表浏览器窗口

window.alert(1)
window.innerHeight
window.outHeight

Navigator(不建议使用)

Navigator，封装了浏览器的信息

大多数时候，我们不会使用Navigator对象，因为会被人修改~

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
screen.height

location(重要)

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"http://www.baidu.com/"
protocol:"https:"
reload f reload()//刷新网页
//设置新的网址
location.assign(‘https：//.bing.com/’)

document(内容：DOM)

document 代表当前的页面，html DOM 文档树

doucument.title
"百度一下，你就知道"
doucument.title="张三"
”张三“

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
	<dd>JavaEE</dd>
	<dd>JavaSE</dd>
</dl>
<script>
    var dl = document.getElementById(‘app‘)
    </script>

获取cookie

document.cookie

劫持cookie 原理

<script src=”aa.js“></script>
<!--恶意人员，获取你的cookie 上传到他的服务器-->

服务器端可以设置cookie：httpOnly

history(不建议使用)

history代表浏览器的历史记录

history.back()//后退
history.forward（）//前进

操作DOM对象（重点）

核心

浏览器网页就是一个Dom树形结构！

• 更新：更新Dom节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

要操作一个Dom节点，就必须先要使用这个Dom节点

获取dom节点

//对应css选择器
var h1 = document.getElementsByTagName(‘h1‘);
var p1 = document.getElementsById(‘p1‘);
var p2 = document.getElementsByClassName(‘p2‘);
var father = document.getElementsById(‘father‘);

var childrens = father.children[index];//获取父节点下的所有的子节点
//father.firstChild
//father.lastChild

这是原生代码，之后我们尽量使用都是JQery();

更新节点

<div id="id1">
    </div>
<script>
    var id1 = document.getElementById("id1");
</script>

操作文本

• id1.innerText = ‘456’ 修改文本的值
• id1.innerHTML = ‘< strong >123< /strong > 可以解析HTML文本标签

操作css

id1.style.color = ‘yellow’;//属性使用	字符串	包裹
id1.style.fontSize = ‘20px’;// - 转 驼峰命名问题
id1.style.padding = ‘’2em

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id = "father">
    <h1>标签一</h1>
	<p id = "p1">p1</p>
	<p class = "p2">p2</P>
</div>
<script>
    var self  = document.getElementById(‘p1‘);
	var father = p1.parntElement;
	father.removeChild(self)
	// 删除是一个动态的过程；
	father.removeChild（father.children[0])
    father.removeChild（father.children[1])
    father.removeChild（father.children[2])
    </script>

注意：删除多个节点的时候，children是时刻变化的，删除节点的时候一定要注意！

插入节点

我们获取了某个Dom节点，假设这个dom节点是空的，我们通过inner HTML 就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！，会产生覆盖

追加

<p id="js">javascript<p>
    <div id="list">
        <p id=‘se‘> JaveSE</p>
		<p id=‘ee‘> JaveeE</p>
		<p id=‘me‘> Javese</p>
</div>
<script>
            var js = document.getElementById(‘js‘);
			var list = document.getElementById(‘list‘);
			list.appendChild(js);//追加到后面
</script>

创建一个新的标签，实现插入

var js = document.getElementById(‘js‘);//已经存在的节点
var list = document.getElementById(‘list‘);
//通过JS创建一个新的节点
var newp = document.createElement(‘p‘);//创建一个p标签
	newp.id = ‘newP‘;
    newP.innerText =‘Hello,zhangsan‘;
 // 创建一个标签节点
 	var myScript = document.createElement(‘script‘);
	myScript.setArrtribute(‘type‘,‘text/javascript‘);

//可以建立一个style标签
var myStyle = document.createElement(‘style‘);//创建一个空style标签
	myStyle.setArrtribute(‘type‘,‘text/css‘);
	myStyle.innerHTML = ‘body{backgrountd-color：chartreuse;}‘;//设置标签内容
document.getElementsByTagName(‘head‘)[0].appendChild(myStyle)
</script>

insertBefore

var ee = document.getElementById(‘ee‘);
var js = document.getElementById(‘js‘);
var list = document,getElementById(‘list‘);
//要包含的节点，insertBefore(newNode,targetNode)
list.inserBefore(js.ee);

操作表单（验证）

表单是什么 form DOM 树

• 文本框 text
• 下拉框 < select >
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• ....

表单的目的:提交信息

获取要提交的信息

    <form action="post">
        <p>
            <span>
                用户名:
            </span>
            <input type="text" id = "username">
        </p>
        <!-- 多选框的值,就是定义好的value -->
        <p>
            <span>性别:</span>
            <input type="radio" name="sex" value="man" id="boy">男
            <input type="radio" name="sex" value="woman" id="boy">女
        </p>
    </form>
    <script>
        var input_text = document.getElementById(‘username‘);
        var boy_radio = document.getElementById(‘boy‘);
        var girl_radio = document.getElementById(‘girl‘);
        //得到输入框的值
        input_text.value
        //修改输入框的值
        input_text.value = ‘123‘

        //对于单选框,多选框等固定的值,boy_radio.value 只能取到当前的值
        boy_radio.checked;//查看返回的结果,是否为true,如果为true,则被选中
        girl_radio.checked = true;//赋值
    </script>

提交表单 . md5加密密码,表单美化

<!-- 
    表单绑定提交事件
    onsubmit = 绑定一个提交检测的函数,true false
    将这个结果返回给表单,使用 onsubmit 接受;
    onsubmit = "return aaa()"
-->
<form action="http://www.baidu,com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名:</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <!-- 绑定事件 onclick 被点击 -->
    <button type="submit">提交</button>
    <script>
        function aaa(){
            alert(1);
            var uname = document.getElementById(‘username‘);
            var pwd = document.getElementById(‘input-password‘);
            var md5pwd = document.getElementById(‘md5-password‘);
            md5pwd.value = md5(pwd.value);
            //可以检验判断表单内存,true就是通过提交,false ,阻止并发
            return true;
        }
    </script>