JS与JQuery知识回顾

1.配置JQuery环境

<script type = "text/javascript" src="JQueryURL"></script>

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: 绑定的属性值会出现在标签上。

转载于:https://www.cnblogs.com/jiayiblog/p/10953392.html