jquery复习

选择器复习：

再开始的时候需要的是等待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 元素

• 改变 id 为 one 的元素的背景色为 红色