Js与Jq实战：第八讲：jQuery中的DOM操作

第八讲：jQuery中的DOM操作

一.预习笔记

1.属性操作

var img=document.getElementById(“img1”);//获取img对象

img.setAttribute(“src”,“路径值”);//设置img对象的src属性的属性值

var path=img.getAttribute(“src”);//获取img对象的src属性的属性值

img.removeAttr(“src”);//删除img对象的src属性

2.节点操作

创建节点：$(“<span></span>”)–创建一个span节点

追加节点：

删除节点：

remove()----删除所有匹配元素

detach()—删除元素，但是事件等保留

empty()—清空所有后代元素节点

复制节点：clone()

替换节点：

replaceWith()—替换某个匹配的节点

replaceAll()—替换某个匹配的节点(顺序颠倒)

遍历节点：

children()–获取子元素集合

next()—获取后面相邻的同辈元素

prev()—获取前面相邻的同辈元素

siblings()–获取前后的所有同辈元素

parent()–获取父元素

parents()–获取祖辈元素

each()—遍历

4.设置jq对象的样式 对象名.css();

5.jq对象的class操作

添加class：addClass()

移除class：removeClass()

判断是否包含某个class：hasClass()

二.课堂笔记

1.className与addClass的区别

className是js对象的属性，寓意设置对象的类名，会对js对象的类进行赋值，赋值时会覆盖掉以前的类名

addClass是jq对象的方法，寓意添加对象的类名，不会对jq对象的原来的类名造成影响

2.remove()----删除所有匹配元素

此方法一般不传递参数，谁调用的就删除谁，所以是匹配元素.remove()

三.课后回顾

–行动是治愈恐惧的良药，犹豫拖延将不断滋养恐惧