技术文章 | Technical articles

JavaScript进阶课堂笔记 第一天(下午)

下午复习:

dom是由节点组成。

节点一共分为12种。

我们需要记住的节点类型:

1 元素类型

3 文本类型

8 注释类型

9 文档类型

 

节点属性:

nodeType: 标记的是节点的类型

nodeName: 标记的是节点名称

nodeValue: 标记是的节点的值

 

节点关系:

分为3种:

父子:

father.childNodes // 所有子节点

father.firstChild  // 第一个子节点

father.lastChild  // 最后一个子节点

 

子父:

child.parentNode   // 父节点

 

兄弟:

node.previousSibling  // 前一个兄弟节点

node.nextSibling     //  下一个兄弟节点

 

元素操作:

创建元素:

document.createElement(type)

type: 元素类型

 

上树:  

father.appendChild(child)

 

下树:

father.removeChild(child)

 

1.1 插入

使用方式:

father.insertBefore(newChild, oldChild)

newChild: 要插入的元素

oldChild: 参照元素

返回值:newChild

最终效果: newChild插入到oldChild的前面作为它的兄弟节点存在

举例:

// 创建元素

var li = document.createElement("li");

// 添加内部文本

li.innerHTML = 11;

// 获取ul

var ul = document.getElementById("list");

// 通过ul调用insertBefore方法

10 ul.insertBefore(li, null); // 第二个参数可以接受null, 效果等价于appendChild方法

11 

12 // 获取Ul的所有子节点

13 var arr = ChildNodes(ul);

14 console.log(arr);

15 

16 ul.insertBefore(li, arr[5])

结果:

11.png

 

1.2 替换

使用方式:

father.replaceChild(newChild, oldChild)

newChild: 要替换上的元素

oldChild: 被替换下的元素

返回值:oldChild

最终效果:newChild替换掉oldChild

举例:

// 创建元素

var li = document.createElement("li");

// 添加内部文本

li.innerHTML = 11;

// 获取所有的Li

var lis = document.getElementsByTagName("li");

// 获取ul

10 var ul = document.getElementById("list");

11 // 将创建出来的li元素,替换掉lis中的某一项

12 setTimeout(function() {

13  ul.replaceChild(li, lis[2]);

14 }, 3000)

 

1.3 克隆

使用方式:

node.cloneNode(boolean)

接受一个参数就是布尔值, 默认是false, 只复制自身,当传递true的时候,则连同子节点一起复制

举例:

var newUl = ul.cloneNode();

console.log(newUl);

12.png

传递参数:

// 传递true

var newUl = ul.cloneNode(true);

console.log(newUl);

13.png

 

一、jquery中的元素操作

1.1 创建元素

可以使用$()函数的功能来创建元素

举例:

$(<div class=aaa id=aaa data-info=nihao>content</div>)

 

结果:

14.png

 

1.2 上树

jquery中的上树方法分为很多种,可以是父元素选择子元素,可以是子元素选择父元素,还可以是兄弟选择兄弟

 

父元素选择子元素:

append(selector|jquery|element):   往父元素的后面追加元素

prepend(selector|jquery|element):  往父元素的前面追加元素

 

子元素选择父元素:

appendTo(selector|jquery|element): 往父元素的后面追加

prependTo(selector|jquery|element): 往父元素的前面追加

 

兄弟之间的插入:

$(box).after(selector|jquery|element): box的后面插入某个元素

$(box).before(selector|jquery|element): box的前面插入某个元素

$(box).insertAfter(selector|jquery|element): box插入到某个元素的后面

$(box).insertbefore(selector|jquery|element): box插入到某个元素的前面

 

1.3 wrap

DOM结构:

<p>A</p>

<p>B</p>

<p>C</p>

<p>D</p>

<p>E</p>

执行代码:

// wrap 让某个元素的外层多一层元素

$("p").wrap("<div></div>");

结果:

15.png

 

1.4 wrapAll

DOM结构:

<p>A</p>

<p>B</p>

<p>C</p>

<p>D</p>

10 <p>E</p>

执行代码:

// wrapAll 将所有匹配到的元素的外层多一层元素

$("p").wrapAll("<div></div>")

结果:

16.png

 

1.5 unwrap

DOM结构:

<div id="box">

<p id="p1">我是一个p标签</p>

</div>

执行代码:

// unwrap 将匹配到的元素去掉一层父元素

$("#p1").unwrap();

结果:

17.png

 

1.6 replaceWithreplaceAll

DOM结构:

<p>A</p>

<p>B</p>

<p>C</p>

<p>D</p>

<p>E</p>

执行代码:

// replaceWith 将匹配到元素替换掉指定元素

// $("p").replaceWith("<div>123</div>");

// replaceAll 将指定的元素替换掉所匹配到的元素

$("<div>321</div>").replaceAll($("p"));

结果:

18.png

 

1.7 empty

DOM结构:

<div id="box">

<ul>

 <li>1</li>

 <li>2</li>

 <li>3</li>

 <li>4</li>

</ul>

</div>

执行代码:

 //empty 表示清空后代,但是自己还在

 $("#box").empty();

结果:

19.png

 

1.8 remove

DOM结构:

<div id="box">

10  <ul>

11   <li>1</li>

12   <li>2</li>

13   <li>3</li>

14   <li>4</li>

15  </ul>

16 </div>

执行代码:

 //empty 表示自杀,自己和后代都没有了

 $("#box").remove();

结果:

20.png

 

1.9 clone

clone(boolean)

boolean: 是一个布尔值

默认是false的时候,天生连同自己的后代一起复制

true的时候,连同事件一起复制

举例:

// 使用clone 复制box

// $("#box").after($("#box").clone());

// 使用clone 传递参数true

$("#box").click(function() {

alert(123);

})

10 $("#box").after($("#box").clone());


爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 

从小白到就业,我们全权负责!

爱创课堂 言行一致、从不忽悠!

请把自己放心的交给我们吧!


6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !



上一篇文章: 前端学习费用多少钱?
下一篇文章: JavaScript进阶课堂笔记 第二天(上午)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>