目录
一、JS 对象
所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。通过 JavaScript 我们可以创建自己的对象。 JavaScript 对象满足的这种”键值对”的格式我们成为JSON 格式。
1. 对象的创建
JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过 new Object 对象创建 、通过 Object 对象的 create 方法创建对象。
（1）字面量形式创建
var 对象名 = {};//创建一个空的对象
var 对象名 = {键:值,键 2:值 2,...}
（2）通过 new Object 对象创建
var 对象名 = new Object();//创建一个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);
（3）通过 Object 对象的 create 方法创建
var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls'
obj.gender = true
console.log(obj)
var objn = Object.create(obj)
objn.age = 18
console.log(objn)
console.log(objn.gender)
2. 对象的序列化与反序列化
（1）序列化对象，将对象转为字符串
JSON.stringify(object)
（2）反序列化，将一个 Json 字符串转换为对象。
JSON.parse(jsonStr)
3. eval()
可借助 eval()动态函数，将参数字符串解析成 js 代码来执行，只接受原始字符串作为参数。
eval(“console.log(‘你好’)”);//控制台输出你好
（1）可将 json 串转为 json 对象
1）第一种解析方式：得到的 json 对象名就是 jsonObj
eval("var jsonObj = " + jsonStr);
2）第二种解析方式：对象中有多个属性
var jsonObj = eval("(" + jsonStr + ")");
3）第二种解析方式：对象中只有一个属性
eval(jsonStr);
解析 json 串
var jsonStr = "{'name':'zs', 'pwd':'123'}"; //json 串
//第一种解析方式
eval("var jsonObj = " + jsonStr);
//第二种解析方式：对象有多个属性值
var jsonO = eval("(" + jsonStr + ")");
//第二种解析方式：对象只有一个属性值
var str = "{name:'zs'}";
var namestr = eval(str);（2）将 json 格式数组字符串解析为 json
第一种解析方式
eval("var arrObj = " + arrStr);
第二种解析方式：
eval(arrStr);
解析 json 格式数组字符串
var arr="[{name:'zs',pwd:'123'},{name:'ls',pwd:'123'},
{name:'ww',pwd:'123'}]";
eval("var arrObj = " + arr);
var arrObj2 = eval(arr);4. this
this 是 JavaScript 语言的一个关键字， 表示当前这个方法所属的上级对象。
（1）在函数中使用 this
在函数中使用 this 属于全局性调用，代表全局对象，通过 window 对象来访问。
function test () {
this.x = 1;
console.log(this.x);
}
test();
console.log(x);//相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
console.log(this.x) //10
this.x = 1;
console.log(this.x) //1
console.log(this)
}
test()
console.log(x) //1
console.log(this)（2）在对象的方法中使用 this
在对象中的函数使用 this，代表当前的上级对象。
var obj = {
name : '张三',
age : 20,
sayHello : function () {
console.log(this.name)
console.log(this)
}
}
obj.sayHello();二、JS 内置对象
1. String
- charAt(idx)： 返回指定位置处的字符
- indexOf(Chr)： 返回指定子字符串的位置，从左到右。找不到返回-1
- substr(m,n)： 返回给定字符串中从 m 位置开始，取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。
- substring(m,n)： 返回给定字符串中从 m 位置开始，到 n 位置结束，如果参数 n 省略，则意味着取到字符串末尾。
- toLowerCase()： 将字符串中的字符全部转化成小写。
- toUpperCase()： 将字符串中的字符全部转化成大写。
- length： 属性，不是方法，返回字符串的长度。
2. Math
- Math.random()： 生成 [0，1）之间的随机小数
- Math.ceil()： 天花板 大于最大整数
- Math.floor()： 地板 小于最小整数 String
3. Date
获取
- getFullYear()年，getMonth()月，getDate()日，
- getHours()时，getMinutes()分，getSeconds()秒
设置
- setYear()，setMonth() 。。。
- toLoacaleString() //根据当地的时区来计算时间
三、事件
事件(Event)是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中Web 页面进行某些类型的交互时，事件就发生了。
1. 作用
（1）验证用户输入的数据。
（2）增加页面的动感效果。
（3）增强用户的体验度
2. 事件中几个名词
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办
3. 事件类型
- Window 事件属性 :针对 window 对象触发的事件（应用到<body>标签）
- Form 事件:由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）
- Keyboard 事件 : 键盘事件
- Mouse 事件:由鼠标或类似用户动作触发的事件
几个常用的事件：
- onload：当页面或图像加载完后立即触发
- onblur：元素失去焦点
- onfocus：元素获得焦点
- onclick：鼠标点击某个对象
- onchange：用户改变域的内容
- onmouseover：鼠标移动到某个元素上
- onmouseout：鼠标从某个元素上离开
- onkeyup：某个键盘的键被松开
- onkeydown：某个键盘的键被按下
4. 事件流和事件模型
事件顺序有两种类型： 事件捕获和 事件冒泡。推荐使用事件冒泡。
（1）事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）。
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>如果点击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：
1、<div>
2、<body>
3、<html>
4、document
（2）事件捕获
Netscape 提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。还以前面的例子为例。那么单击<div>元素就会按下列顺序触发 click 事件：
1、document
2、<html>
3、<body>
4、<div>
5. 事件处理程序
响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头。
（1）HTML 事件处理程序
<input type="button" value="Press me" onclick="alert('thanks');"（2）DOM0 级事件处理程序
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除 DOM0 级方法指定的事件处理程序，只要将属性值设为 null 即可：
btn.οnclick= null；
<body>
<button id="myBtn">按钮</button>
<script type="text/javascript">
varbtn= document.getElementById('myBtn')
btn.onclick= function(){
alert('you click a button')
}
</script>
</body>（3）DOM2 级事件处理程序
“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段调用事件处理程序。
<body>
<button id="myBtn">按钮</button>
<script type="text/javascript">
varbtn= document.getElementById('myBtn')
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2')
},false)
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2 again')
},false)
function thread(){
alert('you add a eventListener by DOM2 第三次')
}
btn.addEventListener('click',thread,false)
btn.removeEventListener('click',thread,false)
</script>
</body>注意：这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注意，在删除的时候，不能删除匿名处理函数。
三、BOM
BOM是浏览器对象模型，BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何的网页内容无关。
1. window 对象
BOM 的核心对象是 window，它表示浏览器的一个实例。
（1）window 对象方法
1）系统对话框
浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。
1）消息框:alert，常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
2 ）打开窗口
window.open() 方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口。
3 ）关闭窗口
window.close()：关闭窗口。
4 ） 时间 函数
- setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以 cliearTimeout(id) 来清除指定函数的执行。在 times 毫秒后执行 function 指定的方法，执行之前也可以取消。
- setInterval() :可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
（2）window 对象属性
window 对象的双重身份决定着，在该对象中既有着核心语法中的全局方法和属性，又有着和浏览器相关的属性和方法，一下的一些对象都是属于 window 对象的属性值。
2. histroy
history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是window 对象的一部分，可通过 window.history 属性对其进行访问。
history 对象的属性：length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
- back()：加载 history 列表中的前一个 URL。
- forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
- go(number): number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
3. location 对象
location 对象是 window 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。
location 对象的属性 href：设置或返回完整的 URL
location 对象的方法：
- reload()：重新加载当前文档。
- replace()：用新的文档替换当前文档。
4. document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。
document 对象的 body 属性，提供对<body>元素的直接访问，cookie 属性，用来设置或返回与当前文档有关的所有 cookie，write()方法，向文档写 HTML 表达式或 JavaScript 代码。还有其他属性和方法。
四、DOM
DOM：Document Object Model 文档对象模型。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过window.document 属性对其进行访问。
1. 节点
节点树
2. 元素节点的操作
（1）获取节点
注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:
- 把 script 调用标签移到 html 末尾即可；
- 使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。
获取方式如下：
（2）创建节点和插入节点
1）创建节点
2）插入节点
3. 间接查找节点（了解）
注意：只有 parentNode 较为实用，其他都不准确。
4. 属性操作
在操作 DOM 对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个属性。
<body>
<input type="text" value="加油，胜利就在眼前" id="txt" class="test"/>
性别
<input type="radio" checked="true" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<imgsrc="img/timg.jpg" id="sxtimg" title="sxt"/>
</body>
<script>
var txt =document.getElementById("txt");
varsxtimg =document.getElementById("sxtimg");
var sex =document.getElementsByName("sex")[0];
//获取值
//txt---》加油，胜利就在眼前 --》testsxt --true
alert(txt.id+"-->"+txt.value+"-->"+txt.className+"--
>"+sxtimg.title+"-->"+sex.checked);
//txt.getAttribute("class")// IE 不支持
//txt.getAttribute("className") //IE 支持
varclz
=(txt.getAttribute("class")=='undefined')?txt.getAttribute("className"):txt
.getAttribute("class");
alert(txt.getAttribute("id") +"-->"+txt.getAttribute("value")+"-->"+
clz);
//修改值
txt.className = 'test1';
sxtimg.style.display ='none';
txt.setAttribute("value","success");
txt.setAttribute("aaa","000000"); //自定义属性
alert(txt.getAttribute("aaa")); //获取自定义属性值
//删除属性
txt.removeAttribute("aaa");
alert(txt.getAttribute("aaa"));
</script>
扫一扫
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
