BCSP-玄子前端开发之JavaScript+jQuery入门CH11_jQuery操作DOM

已于 2023-04-24 11:37:30 修改
阅读量226 收藏
点赞数 1
分类专栏： 大前端技术栈 文章标签： javascript jquery 前端
于 2023-04-24 11:37:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62283694/article/details/130339355
版权

BCSP-玄子前端开发之JavaScript+jQuery入门CH11_jQuery操作DOM

4.11 jQuery 操作节点

DOM操作分为三类

  • DOM Core：任何一种支持DOM的编程语言都可以使用它

    • getElementById()
    • getElementsByTagName()

  • HTML-DOM：用于处理HTML文档

    • document.forms
    • document.getElementById(“title”).innerHTML

  • CSS-DOM：用于操作CSS

    • element.style.color=“green”

JavaScript对这三类DOM操作都提供了支持

4.11.1 Query中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

  • 节点操作
  • 节点属性操作
  • 节点遍历
  • 内容及Value值操作
  • 样式操作
  • CSS-DOM操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKAEIb45-1682307408164)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20230424084402755.png)]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>热门动画排行</h2>
<ul class="animationList">
     <li>名侦探柯南</li>
     <li>阿拉蕾</li>
     <li>海贼王</li>
</ul>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSEy2Qn2-1682307408167)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20230424084434063.png)]

4.11.2 jQuery中的节点操作

  • 查找节点
  • 创建节点
  • 插入节点
  • 删除节点
  • 复制节点
  • 替换节点

4.11.3 查找节点与创建节点

工厂函数 $() 可用于获取或创建节点

  • $(selector)：通过选择器获取节点
  • $(element)：把DOM节点转化成jQuery节点
  • $(html)：使用HTML字符串创建jQuery节点
$( function () {
    // 查找节点
    console.log( $("ul li") );
})

$( function () {
    // 创建节点
    var li1 = $("<li>大头儿子</li>");
    var li2 = $("<li>小魔仙</li>");
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-999pKnI6-1682307408167)(./assets/image-20230424084710594.png)]

4.11.4 插入节点

  • 元素内部插入子节点
// 创建节点
var li1 = $("<li>大头儿子</li>");
var li2 = $("<li>小魔仙</li>");
// 插入节点
$("ul").append(li1);
$("ul").prepend(li2);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K66nNfky-1682307408167)(./assets/image-20230424084808444.png)]

语法功能
append(content)$(A).append(B)表示将B追加到A中如：$("ul").append($newNode1);
appendTo(target)$(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo("ul");
prepend(content)$(A).prepend(B)表示将B前置插入到A中如：$("ul").prepend($newNode1);
prependTo(target)$(A).prependTo(B)表示将A前置插入到B中如：$newNode1.prependTo("ul");
  • 元素外部插入同辈节点
// 创建节点
var li1 = $("<li>大头儿子</li>");
var li2 = $("<li>小魔仙</li>");
// 插入节点
$("ul").after(li1);
$("ul").before(li2);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KulJDZlA-1682307408168)(./assets/image-20230424085017525.png)]

语法功能
after(content)$(A).after (B)表示将B插入到A之后如：$("ul").after($newNode1);
insertAfter(target)$(A).insertAfter(B)表示将A插入到B之后如：$newNode1.insertAfter("ul");
before(content)$(A).before(B)表示将B插入至A之前如：$("ul").before($newNode1);
insertBefore(target)$(A).insertBefore(B)表示将A插入到B之前如：$newNode1.insertBefore("ul");

4.11.5 删除节点

jQuery中删除节点的方法

  • 删除整个节点
$( selector ).remove( [selector] );
  • 删除整个节点，保留元素的事件、数据
$( selector ).detach( [selector] );
  • 清空节点内容
$(selector).empty();

4.11.6 复制节点

$( selector ).clone( [true|false] );
// 是否复制元素的事件和数据，默认为 false

$("ul li:eq(0)").clone(true).appendTo(".animationList");
$("ul li:eq(0)").clone(false).appendTo(".animationList");

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3izM3t2p-1682307408168)(./assets/image-20230424085504384.png)]

4.11.7替换节点

语法功能
replaceWith(content)$(A). replaceWith(B)表示用B替换A
replaceAll(target)$(A). replaceAll (B)表示用A替换B
$("ul li:eq(0)").replaceWith("<li>top1:名侦探柯南</li>");
$("<li>top2:阿拉蕾</li>").replaceAll("ul li:eq(1)");

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvcHNR7w-1682307408168)(./assets/image-20230424085530830.png)]

4.11.8 属性操作

  • 获取和设置元素属性
  • 删除元素属性

4.11.9 获取和设置元素属性

获取和设置属性值可使用attr()方法

  • 获取属性值
$( selector ).attr( attribute )
  • 设置单个属性值
$( selector ).attr( attribute, value )
  • 设置多个属性值
$( selector ).attr( { attribute:value, attribute:value, … } )
  • 示例
console.log( $("ul").attr("class") ); // 获取ul元素的class属性值
$("h2").attr( { id:"title", class:"title" } ); // 设置h2元素的id和class
console.log( $("h2").attr("class") );

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6d5CVUSK-1682307408169)(./assets/image-20230424085753888.png)]

4.11.10 删除元素属性

$( selector ).removeAttr( attribute )

$("ul").removeAttr("class"); // 移除元素的class属性
console.log( $("ul").attr("class") ); // 输出：undefined

4.11.11 节点遍历

  • 遍历子元素
  • 遍历同辈元素
  • 遍历前辈元素
  • 其他遍历方法

4.11.12 遍历子元素

获取元素的子元素可以使用children()方法

$( selector ).children( [selector] );
  • 仅获取直接子元素
  • 不包括文本节点
  • 可选参数selector对子元素进行过滤

4.11.13 遍历同辈元素

语法功能
next( [selector] )获取紧邻匹配元素之后的元素$(“li:eq(1)”).next().addClass(“orange”);
prev( [selector] )获取紧邻匹配元素之前的元素$(“li:eq(1)”).prev().addClass(“orange”);
slibings( [selector] )获取匹配元素的同辈元素$(“li:eq(1)”).siblings().addClass(“orange”);

可选参数selector对兄弟元素进行过滤

4.11.14 遍历前辈元素

parent( [selector] )

  • 获取匹配元素的父级元素，可选参数selector对父元素进行过滤

parents ( [selector] )

  • 获取匹配元素的祖先元素，可选参数selector对祖先元素进行过滤

4.11.15 其他遍历方法

each()方法规定对每个匹配元素执行的函数

$( selector ).each( function( index, element ) );
  • 参数index表示当前元素的下标，从0开始
  • 参数element表示当前元素，也可在函数中使用this表示
  • 当function函数返回false时可以停止循环

4.12 jQuery 操作元素内容

4.12.1 内容操作

  • 操作HTML代码
  • 操作元素内容
  • 操作元素的属性值

4.12.2 操作HTML代码

设置和获取元素中的HTML内容可以使用html()方法，类似于JS中的innerHTML属性

$( selector ).html( [content] );

4.12.3 操作元素内容

获取或设置元素的文本内容可以使用text()方法

$( selector ).text( [content] );

4.12.4 html()方法与text()方法的比较

语法格式方法功能描述
无参数html()获取第一个匹配元素的HTML内容或文本内容
text()获取所有匹配元素的文本内容
有参数html( content )设置所有匹配元素的HTML内容或文本内容
text( content ）设置所有匹配元素的文本内容

4.12.5 操作元素的属性值

获取和设置元素的value属性值可以使用val()方法

$( selector ).val( [value] );

4.13 jQuery 操作样式

4.13.1 设置和获取样式值

设置或获取指定元素的样式值可以使用css()方法

// 获取样式值
$( selector ).css( "属性" );
$( selector ).css( [ "属性1", "属性2", ... ] );
// 设置样式值
$( selector ).css( "属性", "属性值" );
$( selector ).css( { "属性1":"属性值1", "属性2":"属性值2", ... } );

4.13.2 追加和移除样式

如果一次需要设置多个样式值，使用css()过于繁琐

  • 追加样式
$( selector ).addClass( "classname" );
$( selector ).addClass( "classname1 classname2  …" );
$( selector ).addClass( [ "classname1", "classname2", ... ] );
  • 移除样式
$( selector ).removeClass( "classname" );
$( selector ).removeClass( "classname1 classname2  …" );
$( selector ).removeClass( [ "classname1", "classname2", ... ] );
$( selector ).removeClass();

4.13.3 样式的切换与判断

  • 样式切换
$( selector ).toggleClass( "classname" );
$( selector ).toggleClass( "classname1 classname2  …" );
$( selector ).toggleClass( [ "classname1", "classname2", ... ] );
$( selector ).toggleClass();

模拟了addClass()与removeClass() 交替执行的过程，实现样式切换

  • 判断匹配元素是否存在指定的类样式
$( selector ).hasClass( "classname" );

4.14 CSS-DOM 操作

4.14.1 CSS-DOM操作

除css()方法外，jQuery还提供有获取和设置元素高度、宽度等样式的操作方法

语法功能
height([value])设置或返回匹配元素的高度
width([value])设置或返回匹配元素的宽度
offset([value])返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )返回第一个匹配元素相对于父元素的位置
scrollLeft([position])参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])参数可选。设置或返回匹配元素相对滚动条顶

BCSP-玄子前端开发之JavaScript+jQuery入门CH11_jQuery操作DOM

玄子Share
关注
专栏目录
2024年BCSP-X小学高年级组初赛真题解析
m0_46192147的博客
06-05 625
一、单项选择题(共15题,每题2分,共计30分)正确答案是 D. ROM。首先,我们来看看计算机中几种不同的存储器:1 . 缓存(Cache):位于CPU内部或非常靠近CPU,用于存储CPU即将使用的数据和指令。缓存的访问速度非常快,但容量相对较小,而且属于易失性存储器,断电后数据会丢失。2 . 寄存器(Register):位于CPU内部,用于存储CPU当前正在处理的数据和指令。寄存器的访问速度是最快的,但容量最小,同样属于易失性存储器,断电后数据会丢失。3 . RAM(Random Access Memo
2024年BCSP-X小学高年级组初赛真题
m0_46192147的博客
06-03 715
假设输入的所有数是正整数，其中n以及数组元素h[1]，h[2]，…,h[n]均不超过1000000，m不超过h[1]，h[2]，…23.若将第011行的while循环执行条件改为"L
【JavaScript进阶学习】jQuery的DOM操作
qq_66972523的博客
04-04 1044
jQuery的DOM操作 jq的选择器（jQuery最有用的部分：jQuery选择器引擎！jQuery的选择器依赖css1~css3的选择器。） jq的使用方式：作为函数执行。功能：DOM操作 $(); jq的使用方式：作为对象使用；功能：非DOM操作，工具类功能 $.xxx(); 根据css样式来进行选取。css叫做添加样式，但是jQuery叫做添加行为。 获取所有div标签的DOM元素：$('div') 获取一个ID为box的DOM对象：$('#box') 获取所有class名为box的DOM对象
jQuery基础——操作DOM
weixin_57575133的博客
11-10 714
DOM操作可分为3个方面：DOM Core(核心）、HTML DOM和CSS DOM。jQuery作为一种JavaScript库，继承优化了JavaScript访问DOM对象的特性，使开发人员更加方便地操作DOM对象。
BCSP-玄子前端开发之JavaScript+jQuery入门CH01_JavaScript基础
qq_62283694的博客
04-20 627
BCSP-玄子前端开发之JavaScript+jQuery入门CH01_JavaScript基础
BCSP-玄子前端开发之JavaScript+jQuery入门CH04_DOM操作
qq_62283694的博客
04-24 634
BCSP-玄子前端开发之JavaScript+jQuery入门CH04_DOM操作
北京市bcsp-x样题
05-25
这是第一届bcsp 这是样题 文件列表 BCSP-X2024第一轮报名通知.pdf BCSP-X活动方案.pdf 活动范围.zip 样例题目.zip 希望可以帮助到大家 更多报名内容请关注 文件内报名通知 登陆网站后报名
BCSP-X 2024第一轮报名开始啦!
m0_46192147的博客
05-01 760
2024北京中小学信息学能力测评活动(BCSP-X 2024)第一轮即将开始,4月20日起开始报名。本次活动包括基础知识测评和编程能力测评两部分,不收取任何费用。
BCSP-X 2024年活动文件，包含活动范围和模拟题
05-01
《BCSP-X 2024年活动文件详解——挖掘信息学能力测评的深度与广度》 BCSP-X，全称北京市中小学信息学能力测评，是一项旨在提升北京市中小学生信息科学素养的重要活动。该活动每年举办一次，为学生提供了一个展示、...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 854
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 464
【代码】【JavaScript】LeetCode：707设计链表。
记录开发一个英语听力训练网站
最新发布
业余程序员Blue的博客
09-14 428
目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 441
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 873
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1294
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 360
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 254
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 203
js中严格区分大小写。
bcsp-x小高组复赛题解
07-15
BCSP-X（Blockchain Challenge Summer Program - X届）是由区块链技术相关的比赛或训练项目，"小高组复赛题解"很可能是指某个特定阶段的比赛题目及其解决方案。这类题解通常包括对区块链基础知识、智能合约设计、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值