当前位置：首页 > news >正文

jquery复习

news 2025/6/4 18:06:17

选择器复习：

再开始的时候需要的是等待DOM文档载入后执行的操作，类似于windows.onload

<script>$(document).ready(function(){alert("如果是想要在DOM元素都加载完了再进行操作的话需要写在这里面！")});//这里也可以简写成：$((function(){});
</script>

代码的链式风格：

这里的代码的解释是：鼠标点击level1下的a元素时，给其添加一个current的class,然后将近邻其后的元素显示出来，同时将它的父辈的同辈元素的子元素a去掉名为current的class,并且将紧邻它们后面的元素都隐藏。

$(document).ready(function(){$(".level1 > a").click(function(){$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();return false;});
});

js获取DOM元素的方法：

通过ID获取（getElementById） var element=document.getElementById(id) 返回一个对象
通过name属性（getElementsByName） var element=document.getElementByName(name) 返回一个对象
通过标签名（getElementsByTagName） var elements=document.getElementsByTagName(tag) 返回一个对象数组
通过类名（getElementsByClassName） var elements=document.getElementsByClassName(class) 返回一个对象数组

js获取DOM元素的属性：

var element=document.getElementById(id) //返回一个对象
element.style.backgroundColor=“red”
element.innerHTML=“你好”
let img = document.getElementById("myImage"); //获取对应属性的值
let src = img.getAttribute("src");       // src属性中的"image.jpg"值
element.id       //修改或返回元素的 id
element.innerHTML   //修改或者返回元素的内容，可包含节点中的子标签以及内容
element.nodeValue  //返回该节点的文本值（如文本节点的内容）,也可以是属性值，元素节点的该值为null
element.children	//获取所有子元素节点(只返回元素节点（Element），忽略文本和注释节点)
element.childNodes  //返回一个实时的 NodeList 对象，表示当前元素的所有子节点(包括：元素节点（Element）文本节点（Text）注释节点（Comment）)
element.firstChild/element.lastChild  返回元素的第一个/最后一个子节点(包含注释节点和文本节点)<div id="box"><p>Paragraph</p><!-- Comment -->Text node
</div>let box = document.getElementById("box");
console.log(box.childNodes); // 包含 p 元素、注释节点、文本节点
console.log(box.children);   // 只包含 p 元素