1.配置JQuery环境
2.页面加载时执行
JS
window.onload()= functionName;functionName() // 会覆盖，不能编写多个。执行慢，得等到网页所有内容(节点，图片视频音频等)加载完毕他才能加载。没有简写
JQuery
document.ready(function(){}) //可以写多个。网页中所有DOM文档结构绘制完毕后即刻执行。可以简写为$(function(){})
$(function(){})
3.获取页面节点的方式
JS
document.getElementById("标签ID名");
document.getElementsByTagName("标签名");
document.getElementsByClassName("类名");
doucment.getElmentByName();
JQuery
$("#XX").action
$("标签名")
$(".XX")
$(标签名[属性名 = 'value']);
4.获取标签内容的两种方式
JS
innerHTML innerText
区别
JS节点.value = ""：标签的value属性。(主要获取input的值)
innerHTML = "" ：双闭合标签里面的内容（识别标签）。
innerText = "" ：双闭合标签里面的内容（不识别标签）。（老版本的火狐用textContent）
JQuery
val:标签的value属性。
text("")
html("")
5.获取样式(css)
JS
currentStyle属性和getComputedStyle属性不能设置属性,只能获取.
console.log(div.currentStyle["width"]); //IE上兼容
console.log(window.getComputedStyle(div,null)["width"]);//火狐谷歌上兼容
style.attr(这样为获取) //获取不了外部样式
.style.attr="值";
.style(属性,值);
JQuery
$("li").css("font-weight","bold");
$("li").css({"font-weight":"bold","color":"red"});
6.DOM节点的操作（重要）
上一段的内容：节点的访问关系都是属性。
本段的内容：节点的操作都是函数（方法）。
创建节点
document.createElement("标签名");
插入节点
方式一：父节点.appendChild(新的子节点);//父节点最后插入一个新的子节点
方式二：父节点.insertBefore(新的子节点,作为参考的子节点)
//在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。
特别强调
删除节点
父节点.removeChild(子节点);
复制节点
要复制的节点.cloneNode(ture);
//不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。
设置节点的属性
1.获取节点的属性值
方式1：元素节点.属性;
元素节点[属性];
方式二：
元素节点.getArrtibute("属性名称");
方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。
2.设置节点的属性值
方式1：（设置节点的属性值）
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
方式2：
元素节点.setAttribute(属性名, 新的属性值);
3.删除节点的属性
元素节点.removeAttribute(属性名);
总结：
获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的。
方式一的元素节点.属性和元素节点[属性]:绑定的属性值不会出现在标签上。
方式二的get/set/removeAttribut: 绑定的属性值会出现在标签上。