2021/10/28 前端开发之JavaScript+jQuery入门 第十一章jQuery操作DOM

目录

1.DOM操作分为三类

2.节点操作

        2.1查找节点

        2.2创建节点

        2.3插入节点

        2.4删除节点

        2.5复制节点

        2.6替换节点

3.遍历节点

        3.1遍历子元素

        3.2遍历同辈元素

        3.3遍历前辈元素

        3.4其他遍历方法

4.节点属性操作

        4.1获取与设置元素属性

        4.2删除属性

5.HTML代码与文本内容操作

        4.1 html()方法

        4.2 text()方法

6.属性值操作

7.设置丶获取样式值

8.追加丶移除样式

9.样式的切换与判断

10.jQuery中的CSS-DOM操作表

 本章总结

---

1.DOM操作分为三类

1. DOM Core(核心)：任何一种支持DOM的编程语言都可以使用它，getElementById(“title”)
2. HTML-DOM：用于处理HTML文档，如document.getElementById(“title”).innerHTML
3. CSS-DOM：用于操作CSS，如document.getElementById(“title”).style.color="green"

jQuery继承并发扬了JavaScript对DOM对象的操作特性，使开发者可以方便地操作DOM对象。

2.节点操作

        2.1查找节点

//在控制台查看id为aaa的节点
$(function(){
    console.log($("#aaa"));
})

        2.2创建节点

$(html)
//创建一个li节点
var nodes= $("
第六个
");

        2.3插入节点

                                                                                                 jQuery的节点插入方式

插入方式	语法	描述
内部插入	append(content)	在匹配元素结尾插入指定内容
内部插入	appendTo(content)	把选择的元素追加到另一个指定的元素集合内部
内部插入	prepend(content)	在匹配元素开始的位置插入指定内容
内部插入	prependTo(content)	将所有匹配元素前置到指定的元素集合内部
外部插入	after(content)	在匹配元素之后插入内容
外部插入	insertAfter(content)	将匹配的元素插入另一个指定的元素集合的后面
外部插入	before(content)	在匹配元素之前插入内容
外部插入	inseBefore(content)	将匹配的元素插入另一个指定的元素集合的前面

 注意：内部插入为匹配元素的子类，外部插入为匹配元素的兄弟节点

$(function(){
    //创建节点
    val li1=$("
大头儿子
");
    val li2=$("
小魔仙
");
    //插入节点
    $("ul").append(li1);
    $("ul").prepend(li2);
})

        2.4删除节点

                1）remove()方法         

                其中，selector为可选参数，表示被匹配元素的选择器表达式。如果接收参数，则根据传入的jQuery选择器表达式筛选出要删除的元素，并执行删除操作。 

remove([selector])

                2）detach()方法

                detach()方法和remove()方法一样，都是从DOM文档中移除指定的元素。二者的区别在于 detach()方法在于删除元素时会保留与删除的元素关联的数据丶事件等。当需要将删除的元素重新插入DOM时，detach()方法更为适用。

detach([selector])

                3)empty()方法

                empty()方法不接收任何参数，严格意义上而言， empty()方法并不是删除元素，而是清空元素及其后代元素。

//清空id为aaa的内容及其子元素
$("#aaa").empty()

小结：

jQuery提供的三种删除方法的适用场景

1. 如需移除元素及其数据和事件，适合使用remove()方法。
2. 如需移除元素，但保留数据和事件，适合使用detach()方法。
3. 如不需移除元素本身，仅清空元素及其所有子元素的内容，适合使用empty()方法。

        2.5复制节点

        其中，参数includeEvents为可选参数，它是布尔类型，默认值为false，表示是否复制匹配元素的所有事件处理。

clone([includeEvents])

        2.6替换节点

         jQuery中提供了两个替换节点的方法，分别是replaceWith()和replaceAll()方法。

        replaceWith()方法用于将所有匹配的元素替换成指定的HTML内容或元素，replaceWith()和replaceAll()方法作用相同，二者的区别在于语法上内容和选择器的位置。

//selector:替换的元素 content:被替换的元素
$(selector).replaceWith(content)
$(content).replaceAll(selector)

3.遍历节点

        3.1遍历子元素

        在jQuery中使用children()方法返回指定元素的所有直接子元素。

        其中，expr为可选参数，表示传入的jQuery选择器表达式。通过它可以缩小搜索范围。

children([expr])

$(function(){
    //遍历ul元素的所有子元素
    var lis=$("ul").children();
    console.log(lis);
    console.log(lis.length);
})

        3.2遍历同辈元素

        jQuery提供了三种遍历同辈元素的方法，分别是next()丶prev()丶和siblings()方法。

next([expr])          //用于获取紧邻匹配元素的下一个元素
prev([expr])          //用于获取紧邻匹配元素的前一个元素
siblings([expr])      //用于获取匹配元素前面和后面的所有同辈元素

        3.3遍历前辈元素

        jQuery提供了两种种遍历前辈元素的方法，分别是parent()和parents()方法。

        二者的区别在于，parent()方法获取当前匹配元素集合中每个匹配元素的父级元素，而parents()方法获取当前匹配元素集合中每个匹配元素的祖先元素。

parent([selector])        //获取父级元素
parents([selector])       //获取祖先元素(父级的父级元素)

        3.4其他遍历方法

        除以上介绍的节点遍历方法为，jQuery还有许多其他遍历方法，如each()丶end()丶find()丶filter()丶eq()丶first()丶last()等。主要介绍each()方法，其他遍历方法使用较为简单，可以在jQuery官网的API中找到相关的使用说明文档，这里不再详细讲解。

$(selector).each(function(index,element){})

each()方法为每个匹配的元素提供了运行函数，其中，参数index表示选择器的位置；element表示当前元素；当function函数返回值为false时，可以停止循环。

4.节点属性操作

        4.1获取与设置元素属性

         使用jQuery中的attr()方法获取与设置元素属性。

        其中，attribute表示属性名，value表示属性值。如果只传入attribute，则表示获取属性值；传入attribute与value则表示设置属性值。设置属性值时可以传入多个属性和值。

$(selector).attr(attribute)    //获取属性值

$(selector).attr(attribute,value)    //设置单个属性值
$(selector).attr({attribute:value,attribute:value,attribute:value...})    //设置多个属性值

        4.2删除属性

         在jQuery中使用removeAttr()方法删除元素的属性。

$(selector).removeAttr(attribute)

小结： 与js操作DOM不一致的地方是：增删改都不需要用父节点来执行对应的操作。

5.HTML代码与文本内容操作

        4.1 html()方法

        其中，content为可选参数，当传入参数时，表示设置指定元素的新内容为传入内容(可以包含HTML标签)，而未传入参数时，则返回指定元素的当前内容。

$(selector).html([content])

        4.2 text()方法

        text()方法用于获取或设置匹配元素的文本内容

 $(selector).text([content])

6.属性值操作

        jQuery还提供了获取元素value属性值的val()方法。val()方法类似于JavaScript的value属性。通常情况下，结合表单标签进行使用，如文本框丶下拉列表和单选框等。

$(selector).var([value])

7.设置丶获取样式值

        在jQuery中，使用css()方法设置或获取样式值

$(selector).css(name,value);    //设置单个css属性
$(selector).css({name:value,name:value,name:value...});    //设置多个css属性
$(selector).css(name);    //获取单个css属性 
//键值对的方式，要加引号

8.追加丶移除样式

        在jQuery中，对元素class类样式的操作有追加样式和移除样式。

        addClass()方法为追加样式，removeClass()方法为移除样式，其中参数classname为class类样式名称。如需设置多个class类样式，使用空格进行分隔。

$(selector).addClass(classname);        //设置单个class类样式
//设置多个class类样式
$(selector).addClass(classname1 classname2 classname3);

$(selector).removeClass(classname);    //移除单个class类样式
//移除多个class类样式
$(selector).removeClass(classname1 classname2 classname3);

9.样式的切换与判断

        在使用jQuery实现网页交互过程中，可以使用toggleClass()和hasClass()方法对样式进行切换或判断当前元素是否存在指定样式。

        其中，classname为class类样式名称，使用toggleClass()方法对指定元素的class类样式进行添加和移除切换。使用hasClass()方法可以判断指定元素是否指定了class类样式。如果指定了class类样式，则返回true；否则返回false。

$(selector).toggleClass(classname);        //切换class类样式
$(selector).hasClass(classname);           //判断class类样式是否存在

10.jQuery中的CSS-DOM操作表

方法	描述	示例
css(name[,value])	设置或获取指定元素的样式值	$("div").css("color","red")
height([value])	设置或获取指定元素的高度	$("div").height(200)
width([value])	设置或获取指定元素的宽度	$("div").width(300)
offset([value])	设置或获取指定元素相对于文档的偏移	$("div").offset()
position()	获取第一个匹配元素相对于父元素的位置	$("div").position()
scrollLeft([position])	设置或获取指定元素相当于滚动条左侧的偏移	$("div").scrollLeft(40)
scrollTop([position])	设置或获取指定元素相当于滚动条顶部的偏移	$("div").scrollTop(50)

 本章总结

1. jQuery中的DOM操作主要包括节点操作与遍历节点丶元素内容操作丶元素样式操作和CSS-DOM操作。
2. 节点操作主要包括查找丶创建丶插入丶删除丶复制和替换。
3. jQuery提供了许多遍历节点的方法，根据遍历方法的使用范围，可以划分为遍历子元素丶遍历同辈元素丶遍历前辈元素和一些特别的遍历方法。
4. jQuery提供了attr()方法和removeAttr()方法用于获取丶设置和删除元素属性。
5. jQuery提供了html()和text()方法用于获取或设置元素内容。
6. jQuery中对元素class类样式的操作包括：
   1. 使用addClass()方法追加样式。
   2. 使用removeClass()方法移除样式。
   3. 使用toggleClass()方法切换样式。
   4. 使用hasClass()方法判断样式是否存在。

练习小作业

1. 改造手机详情页面
2. 改造简易留言板
3. 改造论坛发帖页面