1.配置JQuery环境
<script type = "text/javascript" src="JQueryURL"></script>
2.页面加载时执行JSwindow.onload()= functionName;functionName() // 会覆盖,不能编写多个。执行慢,得等到网页所有内容(节点,图片视频音频等)加载完毕他才能加载。没有简写JQuerydocument.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
