文章目录
为什么script标签放在页面末尾是更好的选择？
document是什么
document对象表示js可访问的当前页面。
对象
对象都有属性。
例如对象car有三个属性：var car={color："blue"，doors：4，windows：6}
属性访问方式有两种：1、car.color="red"或者car["color"]="red";
可以给对象添加属性：car.length=20,就添加了length属性。
属性也可以是方法：var aaa=function(){……}
window对象是浏览器环境中的顶级对象。他有几个很重要的子对象。
1、location：包含有关当前web文档位置的信息，包括URL及其组成部分，如协议、域名、路径、端口。
2、history：存储了浏览器在当前会话中访问过的所有网站，还让您能够访问在历史记录中前进和后退的内置函数。
3、document：包含当前网页的完整细节。网页的左右标签和内容都包含在一个以document为根的层次结构中。可以通过document查看和操作页面内容。
当然还有其他的子对象，可以网上再查查。
事件
代码关联事件的方式有三种：
1、使用html属性。例如<div onclick="alert('haha')"></div>。
2、将代码关联到合适的元素属性。例如，如果有指向链接的js变量myLink，可以这样添加单击事件，myLink.onclick=function(){......};
但是这种方式下，只能将一个函数关联到单击事件。
3、使用addEvnetListener。讲处理程序关联到元素的事件。如
myButton.addEventListener(‘click’，function(){......}，false);
这种方式可以将任意数量的事件处理程序关联到同一个元素的同一个事件。
常用事件有：
| 事件 | 什么时候调用 |
|---|---|
| onblur | 访客离开指定的表单字段时 |
| onchange | 访客修改指定表单字段的内容时 |
| onclick | 访客单击指定的元素时 |
| onfocus | 访客进入指定的表单字段时 |
| onload | 页面及其所有图像都已加载完毕时 |
| onmouseover | 访客将鼠标指向指定的对象时 |
| onselect | 访客选择指定字段的内容时 |
| onsubmit | 访客提交指定的表单时 |
| onunload | 当前网页发生变化时 |
this是什么意思
this指的是当前对象。
AJAX是什么
它是脚本。这种脚本用于与服务器通信，而且不用重新加载整个网页。
它在后台使用js功能XmlHttpRequest向服务器发出请求，在得到结果后反应到网页上。
jQuery是什么
是一个JavaScript库。jQuery让js程序员再编写代码时无需考虑不同浏览器之间的差别，还提供了大量其他的功能。
当然也提供了与AJAX相关的方法。
我理解就像是对js进行了封装的库。当然还有其他类似的库。
使用jQuery
符号 $ 是一个函数所以经常看到 $(...)这样使用，传递的参数通常是一个对象。
隐藏和显示元素：
$("#id").hide(); 隐藏
$("#id").show(); 显示
$("#id").toggle(); 在隐藏和显示之间来回切换
获取和修改样式表属性
$("#id").css("width"); 获取宽
$("#id").css("width", "76px");设置宽
添加和删除类
$("#id").addClass("highlighted");
$("#id").removeClass("highlighted");
$("#id").toggleClass("highlighted"); 来回切换有的就变没有
$("#id").hasClass("highlighted"); 检查是否已经属于某个类
操作元素属性
$("#id").attr("disabled", "disabled"); 设置
$("#id").removeAttr("disabled"); 移除
添加和删除页面元素
$("#id").append("<h2>hahaha</h2>");
$("#id").remove();
on方法
$(document).on('事件'， ‘“元素选择器”，处理程序);
$(document).on('click', "#id", function()
{
$(this).remove();
});
特效
jQuery提供了4中特效：淡出fadeOut、淡入fadeIn、上滑slideUp、下滑slideDown。而jQuery UI提供了其他更多的效果，要是用的话下载js文件即可。
下面是使用fadeout淡出效果。fadeout第一个参数是动画速度（slow和fast）。第二个参数是回调函数，在动画结束时会被调用。
$(document).on('click', "#id", function()
{
$(this).fadeOut('slow', fucntion()
{
$(this).remove();
});
});
查找元素
1、getElementByTagName(name)，匹配元素标签名称
2、getElementById(id)，匹配id属性
3、getElementByName(name)，匹配name属性
在DOM中导航
1、childNodes，一个数组，包含所有子节点
2、firstChild，第一个子节点
3、innerHTML，节点中的标记和内容，可通过设置这个属性来修改节点的内容
4、lastChild，最后一个子节点
5、nextSibling，下一个兄弟节点
6、parentNode，当前节点的父节点
7、previousSibling，位于当前节点前面且属于同一层级的节点
如果没有就是null。
js修改文档的方法
1、appendChild(element)，在目标元素中添加子元素
2、insertBefore(new,ref)，在目标元素中的ref子元素前插入子元素new
3、removeAttribute(name)，将目标元素的属性name删除
4、removeChild(element)，从目标元素中删除参数指定的子元素
5、replaceChild(inserted,replaced)，将目标元素中的子元素replaced替换为元素inserted
6、setAttribute(name,value)，将目标元素的属性name的值设置为value
框架
框架可以让我们在网页中显示其他的网页。
首先说一下a标签的属性target，它的值为浏览上下文的名称。通过target，可指定在新窗口或其他既有窗口打开连接的页面。使用框架时，可以通过target指定在不同的框架中打开链接的页面。
可用于设置target的关键字：
1、_blank，在一个未命名的新窗口中加载<a>标签指定的文档
2、_self，在当前浏览上下文中加载该标签指定的文档。
3、_parent，只能用于框架，指定在父文档的浏览上下文中加载链接。
4、_top，指定在当前Web浏览器窗口中加载链接，以替代整个网页。
可使用标签<base>来给网页中的所有链接指定全局目标。
内嵌框架<iframe>,其重要属性有：
1、width，框架宽度
2、height，框架高度
3、src，要显示的html文档的URL
4、srcdoc，要显示的HTML内容
5、name，框架名称，用于将链接与框架关联起来
6、sandbox，用于对内嵌框架的内容做额外限制
