JavaScript复习02 JSON BOM DOM JQuery

JSON

• JavaScript Object Notation 是一种轻量级数据交换格式
• 一切皆对象
  • 对象 {}
  • 数组[]
  • 键值对 key:value
• JSON.stringify()
• JSON.parse()

面向对象编程

• 原型: __proto__

let user ={
    name:"user",
    age:28,
    run:function(){
        return this.name + "  running";
    }
}

let xiaoming = {
    name:"xiaoming"
}

xiaoming.__proto__ = user;
xiaoming.run();

//ES6之前定义原型
function Student(name){
    this.name = name
}
Student.prototype.run = function(){
    return this.name + "  running";
}

let wu = new Student("wu");
wu.run();

//ES6之后
class Student{
     //构造器
    constructor(name){                   
        this.name = name;
    }
    run(){
        return this.name + "running";
    }
}

let wu = new Student("wu");
wu.run();

• 继承

class Pupil extends Student{
    //构造器 
    construtor(name,grade){
        super(name); //实现父类
        this.grade = grade;
    }
    play(){
        return this.name + this.grade + "playing";
    }
}

let li = new Pupli("li","first class");
li.play();
li.run();  //可调用父类方法

• 原型链 __proto__ 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针 而实例都包含一个指向原型对象的内部指针

操作BOM对象

• BOM(浏览器对象模型)
• window 代表 浏览器窗口 和 全局变量

window.innerHeight;
window.innerWidth;
window.outerHeight;
window.outerWidth;
//Navigator  封装浏览器信息(不建议使用)
window.navigator.appName;
navigator.appVersion;
//screen屏幕
screen.width;
screen.height;
//location 代表当前页面的URL信息
location;
href:"https://www.baidu.com"
host:"www.baidu.com"
location.reload(); //重新加载
location.assign([url]); // 重定向
//document  当前页面,可以获取具体文档节点
document.title;
document.cookie;  //获取cookie
//history(不建议使用)
history.back(); //后退
histoty.forward(); //前进

操作DOM对象

• DOM(文档对象模型)

//获得Dom节点
let h1 = document.getElementById("id1");  //注意单词为element
let p1 = document.getElementsByTagName("p");
let p2 = document.getElecmentsByClassName("cl1");

p1[0].innerText("新文本");
p1[0].innerHTML("<h1>新文本</h1>");

p1[0].style.color="red"; //改变样式
p1[0].style.fontSize="200px"; //注意驼峰命名

//删除节点  先获取父节点 再删除子节点
let father =p1[0].parentElement;  //获取父节点
father.removeChild(p1[0]);     //删除子节点
//删除节点时  children在时刻变化

//插入节点
father.appendChild(p2);
//创立新节点
let newDom = document.createElement("p"); //创立一个p标签
newDom.id="addp";  //将p标签id设置为addp
newDom.setAttribute("id","addp");
newDom.innerText ="大家好" ; //设置文本
father.appendChild(newDom);  //添加节点
father.insertBefore(newDom,p1[0]); //在p1[0]插入节点newDom


//操作表单(验证)
<form method="get" action="new_file.html" id="form1">
    <label for="txt1">账户:</label><input type="text" id="txt1" name="txt1" placeholder="输入账户名" required/>
    <input type="submit" name="submit1" value="提交" />
    <input type="radio" name="gender" value="man">男
	<input type="radio"  name="gender" value ="woman" checked>女
             
		</form>

let form1 = document.getElementById("form1");
form1[0].value;  //查看内容
form1[2].checked; //查看是否被选中 返回布尔值

//md5加密
<form method="post" action="https://www.baidu.com" id="form1">
			<label for="txt1">账户:</label><input type="text" id="txt1" name="user" placeholder="输入账户名" 
			required />
			<span>密码</span><input type="password" placeholder="输入密码" requird/>
			<input type="hidden" name="password" id="md5pasd" />
		<!-- 	<input type="submit" name="submit1" onclick="my()" value="提交吧犊子" /> -->
			<input type="radio" name="gender" value="男" />男
			<input type="radio" name="gender" value="女" checked="女"/>女		
			<button type="submit" onclick="my()" >提交大</button>
		
		</form>
		<script>
			function my(){
				let pass = document.getElementById("txt1");
				let mdpass  = document.getElementById("md5pasd");
				//alert("sdf");
				console.log(pass.value);
				mdpass.value = md5(pass.value);
				console.log(mdpass.value);
				
				return true;
				
			}

JQuery

• $(selection).action();

//当网页加载完后 响应事件
$(document).ready(function(){
    
})
==
$(function(){
    
})

<span id="sp" style="color: #FF0000;"></span>
<div id="dv" style="width: 300px;height: 400px;border: 2px solid #000;"></div>


$(function(){
    $("#dv").mousemove(
        function(e){
            $("#sp").text("x:" + e.pageX + "  y:" + e.pageY);
        })
})

//
<div id="test">
    <li class="li1">JavaScript</li>
	<li name="li2">Python</li>
</div>

$("#test .li").text("Java");
$("#test li[name=li2]").toggle();
$("#test .li").css({"color":"red","backgrond":"black","fontSize":"20px"});