JS与JQuery知识回顾

mac2022-06-30  18

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

最新回复(0)