创建JS对象的建立
利用function关键字声明对象，用new关键字创建对象。
内置对象
Window对象–代表浏览器中一个打开的窗口,了解一下即可。很多被UI替代
-------window.onload() 在浏览器加载完整个html后立即执行!
-------window.alert(“text”) 提示信息会话框
-------window.confirm(“text”) 确认会话框
-------window.prompt(“text”) 键盘输入会话框
-------window.event 事件对象
window.document 文档对象
Document对象–代表整个HTML文档，可用来访问页面中的所有元素
-------document.write() 动态向页面写入内容
-------document.getElementById(id) 获得指定id值的元素
-------document.getElementsByName(name) 获得指定Name值的元素
自定义对象
方式一：
声明对象：function Person(){}
创建对象：var p1 = new Person();
设置属性：p1.name = “张飞”; p1.age = 18;
设置方法：p1.run = function(){ alert(this.name+" : "+this.age); }
访问p1对象：
<script>
//1. 创建对象方式1：
function Person(){/* 定义对象 */
}
var p1 = new Person();/* 创建对象 */
/* 动态绑定属性 */
p1.name="李四";
p1.age=18;
console.log(p1);
/* 动态绑定方法 */
p1.say=function(){
console.log("张三你是张三丰什么人？")
}
p1.say();
2. 创建对象方式2：
var p2={
"name":"王五",
"age":20,
"say":function(a){
console.log(this.name+this.age+a);
}
}
console.log(p2);
p2.say(6);
</script>
js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。
DOM
*ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
*浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
--获取对象: window.document
--调用方法:
getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
innerHtml--设置或返回元素的内容
innerText--设置或返回元素的内容
innerText和innerHtml的区别？innerHtml能解析HTML标签
id--设置或返回元素的id
/* 1.获取ID=“a1” ,*/document.getElementById(“a1”);
<script>
function method(){
/* 1.获取ID="a1" */
var a = document.getElementById("a1");
a.innerText = "<h1>hello</h1>";//修改内容
//document.write(a.innerText);//直接向网页写出数据,可解innerText的html标签
console.log(a.innerText );//获取内容
var l = document.getElementById("a2");
l.innerHTML = "<h1>hello</h1>";//修改内容，直接可解innerText的html标签
//document.write(a.innerHTML);//直接向网页写出数据
}
</script>
<body>
<div name="d" onclick="method();">div1</div>
<div name="d">div2</div>
<div name="d">div3</div>
<a href ="#" id ="a1">a1</a>
<a href ="#" id ="a2">a2</a>
<p class ="f">p1</p>
<p>p2</p>
</body>
/* 2.name = “d” */ document.getElementsByName(“d”);
<script>
function method(){
/* 2.name = "d" */
var b = document.getElementsByName("d");//得到多个元素
b[0].innerHTML="TEST```";//修改第一元素
b[0].style.color ="blue";
console.log(b[0].innerHTML);
}
</script>
<body>
<div name="d" onclick="method();">div1</div>
<div name="d">div2</div>
<div name="d">div3</div>
<a href ="#" id ="a1">a1</a>
<a href ="#" id ="a2">a2</a>
<p class ="f">p1</p>
<p>p2</p>
</body>
/* 3.获取class = “f” */ document.getElementsByClassName(“f”);
<script>
function method(){
/* 3.获取class = "f" */
var c= document.getElementsByClassName("f");
c[0].innerHTML="hi```";
console.log(c[0].innerHTML);
}
</script>
<body>
<div name="d" onclick="method();">div1</div>
<div name="d">div2</div>
<div name="d">div3</div>
<a href ="#" id ="a1">a1</a>
<a href ="#" id ="a2">a2</a>
<p class ="f">p1</p>
<p>p2</p>
</body>
//4.获取标签名是P的//document.getElementsByTagName(“p”);
<script>
function method(){
//4.获取标签名是P的
var d = document.getElementsByTagName("p");
d[1].innerHTML="hi```";
console.log(d[1].innerHTML);
}
</script>
<body>
<div name="d" onclick="method();">div1</div>
<div name="d">div2</div>
<div name="d">div3</div>
<a href ="#" id ="a1">a1</a>
<a href ="#" id ="a2">a2</a>
<p class ="f">p1</p>
<p>p2</p>
</body>
jQuery
主要作用是用于简化JS代码，轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想：“写的更少，但做的更多”
jQuery 库包含以下功能：
-HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
-HTML 元素操作
-CSS 操作
-HTML 事件函数
-JavaScript 特效和动画
-HTML DOM 遍历和修改
-AJAX
使用前：先引入jQuery的文件
语法： $(选择器).事件
练习： 分别用dom 获取 元素和用jQuery获取 元素
<!-- 引入jQuery文件 -->
<script src = "jquery-1.8.3.min.js">
</script>
<script >
function f(){
/* //dom获取元素
var g = document.getElementsByTagName("p");
g[0].innerHTML="我不是p，你才是p"; */
//console.log(g[0].innerHTML);
//jq获取元素--语法$(选择器).事件
$("p").hide();//隐藏元素
$("p").text("我不是p，你才是p");//修改文字 .text// .html //.
}
</script>
</head>
<body>
<p onclick="f();">你是p2</p>
</body>
jQuery的文档就绪
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
$(document).ready(function(){ 运行代码}）； //全写
$(function(){运行代码}）； //简写
<script src="jquery-1.8.3.min.js"></script>
<script>
//写法1的问题：想用h1还没被加载。用时会报错
//解决方案：写在h1加载之后+使用文档就绪函数（先导入jq）
//Document.getElementsByTagName("h1")[0].innerHTML="变吧";
//写法2的：使用就绪函数（先导入jq）--是指文档都就绪了再用元素
//$(document).ready(function(){//全写
$(function(){//简写
//var a = document.getElementsByTagName("h1")[0].innerHTML="变吧";//js写法
$("h1").text("变身吧");//jq写法
});
//$("h1").text="变吧";
</script>
<body>
<h1>我是h1</h1>
</body>
综合练习jQuery测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<script>//单击id=1的元素，隐藏id=p1的元素
$(function(){
$("#d1").click(function(){
$("#p1").hide();
})
//双击class="dd"的元素，给div加背景颜色
$(".dd").dblclick(function(){
$("div").css("background-color","yellow");
})
//练习：鼠标进入id="d1" 的div ，隐藏href属性的元素
$("#d1").mouseenter(function(){
$("[href]").hide();
})
});
</script>
</head>
<body>
<div id="d1">div1</div>
<div class="dd" >div2</div>
<div>div3</div>
<div class="dd">div4</div>
<p id="p1">p1</p>
<p>p2</p>
<a></a>
<a href="#">a1</a>
<a class="dd">a2</a>
<a href="#">a3</a>
</body>
</html>
