JQuery技术总结(DOM篇)
jQuery 操作 DOM
DOM(Document Object Model,文档对象模型)为文档提供了一种结构化表示方法,通过该方法可以改变文档的内容和展示形式。在实际运用中,DOM 更像是桥梁,通过它可以实现跨平台、跨语言的标准访问。
与 DOM 模型密不可分的是 JavaScript 脚本技术,DOM 在客户端的应用也是基于该技术,通过该技术我们可以很方便地访问、检索、操作文档中的任何一个元素。因此,学好JavaScript 脚本技术,是掌握 DOM 对象的一个重要条件。单词 Document 即文档,当我们创建一个页面并加载到 Web 浏览器时,DOM 模型则根据单词 Object 即对象,是指具有独立特性的一组数据集合,
该页面的内容创建了一个文档文件;与对象相关联的特征称之为对象属性,访问单词“Model”即模型,在页面文档中,通过树状模型展示页面对象的函数称之为对象方法;的元素和内容,其展示的方式则是通过节点(node)来实现的。
在访问页面时,需要与页面中的元素进行交互式的操作。在操作中,元素的访问是最频繁、最常用的,主要包括对元素属性、内容、值、CSS 的操作。
在 jQuery 中,可以对元素的属性执行获取、设置、删除的操作,通过 attr() 方法可以对元素属性执行获取和设置操作,而 removeAttr() 方法则可以轻松删除某一指定的属性。
1. 获取元素的属性
获取元素属性的语法格式如下:
attr(name)其中,参数 name 表示属性的名称。
在页面中,attr() 方法不仅可以获取元素的属性值,还可以设置元素的属性,其设置属性语法格式如下所示:
attr(key, value)
其中,参数 key 表示属性的名称,value 表示属性的值。如果要设置多个属性,也可以通过 attr() 方法实现,其语法格式如下所示:
attr({key0:value0, key1:value1})
attr() 方法还可以绑定一个 function() 函数,通过该函数返回的值作为元素的属性值,其语法格式如下所示:
attr(key, function(index))
其中,参数 index 为当前元素的索引号,整个函数返回一个字符串作为元素的属性值。
jQuery 中通过 attr() 方法设置元素的属性后,使用 removeAttr() 方法可以将元素的属性删除,其使用的语法格式为:
removeAttr(name)
其中,参数 name 为元素属性的名称。
例如,可以通过如下的代码删除标记 <img> 中的 src 属性:
$("img").removeAttr("src");
在 jQuery 中,操作元素内容的方法包括 html() 和 text()。前者与 JavaScript 中的 innerHTML属性类似,即获取或设置元素的 HMTL 内容;后者类似于 JavaScript 中的 innerText 属性,即获取或设置元素的文本内容。二者的格式与功能的区别:
html() 和 text() 方法的区别
语法格式 参数说明 功能描述
html() 用于获取元素的 HTML 内容
无参数
html(val) val 参数为元素的 HTML 内容 用于设置元素的 HTML 内容
text() 无参数 用于获取元素的文本内容
text(val) val 参数为元素的文本内容 用于设置元素的文本内容
说明 html() 方法仅支持 XHTML 的文档,不能用于 XML 文档,而 text() 则既支持 HTML文档,也支持 XML 文档。
在 jQuery 中,如果要获取元素的值,是通过 val() 方法实现的,其语法格式如下所示:
val(val)
其中,如果不带参数 val,则是获取某元素的值;反之,则是将参数 val 的值赋给某元素,即设置元素的值。该方法常用于表单中获取或设置对象的值。
另外,通过 val() 方法还可以获取 select 标记中的多个选项值,其语法格式如下所示: val().join(",")
在页面中,元素样式的操作包含:直接设置样式、增加 CSS 类别、类别切换、删除类别几部分。
1. 直接设置元素样式值
在 jQuery 中,可以通过 css() 方法为某个指定的元素设置样式值,其语法格式如下所示:
css(name, value)
其中 name 为样式名称,value 为样式的值。
2. 增加 CSS 类别
通过 addClass() 方法增加元素类别的名称,其语法格式如下:
addClass(class)
其中,参数 class 为类别的名称,也可以增加多个类别的名称,只需要用空格将其隔开即可,
其语法格式为:
addClass(class0 class1 ...)
3. 类别切换
通过 toggleClass() 方法切换不同的元素类别,其语法格式如下:
toggleClass(class)
其中参数 class 为类别名称,其功能是当元素中含有名称为 class 的 CSS 类别时,删除该类别,否则增加一个该名称的 CSS 类别。
4. 删除类别
与增加 CSS 类别的 addClass() 方法相对应,removeClass() 方法则用于删除类别,其语法格式如下:
removeClass([class])
其中,参数 class 为类别名称,该名称是可选项,当选该名称时,则删除名称是 class 的类别,有多个类别时用空格隔开。如果不选名称,则删除元素中的所有类别。如果要删除 p 标记是 cls0 的类别,可以使用如下的代码:
$("p").removeClass("cls0");
如果要在页面中增加某个元素,只需要找到元素的上级节点,通过函数 $(html) 完成元素的创建后,增加到该节点中。函数 $() 用于动态创建页面元素,其语法格式如下:
$(html)
其中,参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串
在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery 中,有多种方法可以实现该功能,append() 方法仅是其中之一,按照插入元素的顺序来分,可以分为内部和外部两种插入方法。
函数 $(html) 只完成 DOM 元素创建,加入到页面还需要通过元素节点的插入或追加操作;同时,在创建 DOM 元素时,要注意字符标记是否完全闭合,否则达不到预期效果。
语法格式 参数说明 功能描述
append(content) content 表示追加到目标中的内容 向所选择的元素内部插入内容
通过 function 函数返回追加到目标中 向所选择的元素内部插入 function 函
append(function(index, html))
的内容 数所返回的内容
把所选择的元素追加到另一个指定的
appendTo(content) content 表示被追加的内容
元素集合中
content 表示插入目标元素内部前面的
prepend(content) 向每个所选择的元素内部前置内容
内容
通过 function 函数返回插入目标元素 向所选择的元素内部前置 function 函
prepend(function(index, html))
内部前面的内容 数所返回的内容
content 表示用于选择元素的 jQuery 表 将所选择的元素前置到另一个指定的
prependTo(content)
达式 元素集合中
下面介绍其中几个最新的节点插入方法。
1. append(function(index, html))
该方法是版本 1.4 中新增的,其功能是将一个 function 函数作为 append 方法的参数,该函数的功能必须返回一个字符串,作为 append 方法插入的内容,其中 index 参数为对象在这个集合中的索引值,html 参数为该对象原有的 html 值。
2. appendTo(content)
该方法用于将一个元素插入另一个指定的元素内容中,即如果要将 span 标记插入 div 标记中,则执行下列代码:
$("span").appentTo($("div"));
即把 appentTo 方法前部分的内容插入其后部分的内容中。
外部插入节点方法
语法格式 参数说明 功能描述
after(content) content 表示插入目标元素外部后面的内容 向所选择的元素外部后面插入内容
通过 function 函数返回插入目标外部后面 向所选择的元素外部后面插入 function 函
after(function)
的内容 数所返回的内容
before(content) content 表示插入目标元素外部前面的内容 向所选择的元素外部前面插入内容
通过 function 函数返回插入目标外部前面 向所选择的元素外部前面插入 function 函
before(function)
的内容 数所返回的内容
content 表示插入目标元素外部后面的 将所选择的元素插入另一个指定的元素外
insertAfter(content)
内容 部后面
content 表示插入目标元素外部前面的 将所选择的元素插入另一个指定的元素外
insertBefore(content)
内容 部前面
after(function)
该方法也是 jQuery1.4 中新增的方法,其 function() 参数将返回插入元素外部后面部分的内容。
在页面中,有时需要将某个元素节点复制到另外一个节点后,如购物网站中购物车的设计。在传统的 javaScript 中,需要编写较为复杂的代码,而在 jQuery 中,可以通过方法clone() 轻松实现,该方法的语法格式为:
clone()
其功能为复制匹配的 DOM 元素并且选中复制成功的元素,该方法仅是复制元素本身,被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制,可以通过方法 clone(true) 实现,其格式为:
clone(true)
其中的参数设置为 true 就可以复制元素的所有事件处理。
在 jQuery 中,如果要替换元素中的节点,可以使用 replaceWith() 和 replaceAll() 这两种方法,其语法格式分别如下:
replaceWith(content)
该方法的功能是将所有选择的元素替换成指定的 HTML 或 DOM 元素,其中参数 content为被所选择元素替换的内容。
replaceAll(selector)
该方法的功能是将所有选择的元素替换成指定 selector 的元素,其中参数 selector 为需要被替换的元素。
replaceWith() 与 replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失。
在 jQuery 中,不仅可以通过方法替换元素节点,还可以根据需求包裹某个指定的节点.
语法格式 参数说明 功能描述
html 参数为字符串代码,用于生成元
wrap(html) 把所有选择的元素用其他字符串代码包裹起来
素并包裹所选元素
elem 参数用于包装所选元素的 DOM
wrap(elem) 把所有选择的元素用其他 DOM 元素包装起来
元素
把所有选择的元素用 function 函数返回的代码包裹
wrap(fn) fn 参数为包裹结构的一个函数
起来
unwrap() 无参数 移除所选元素的父元素或包裹标记
html 参数为字符串代码,用于生成元
wrapAll(html) 把所有选择的元素用单个元素包裹起来
素并包裹所选元素
elem 参数用于包装所选元素的 DOM
wrapAll(elem) 把所有选择的元素用单个 DOM 元素包裹起来
元素
把所有选择的元素的子内容 ( 包括文本节点 ) 用字
html 参数为字符串代码,用于生成元
wrapInner(html)
素并包裹所选元素 符串代码包裹起来
elem 参数用于包装所选元素的 DOM 把所有选择的元素的子内容 ( 包括文本节点 ) 用
wrapInner(elem)
DOM 元素包裹起来
元素
把所有选择的元素的子内容 ( 包括文本节点 ) 用
wrapInner(fn) fn 参数为包裹结构的一个函数
function 函数返回的代码包裹起来
在 DOM 元素操作中,有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript 中,先获取元素的总长度,然后,以 for 循环语句,递减总长度,访问其中的某个元素,代码相对复杂;而在 jQuery 中,可以直接使用 each() 方法实现元素的遍历。其语法格
式如下:
each(callback)
其中,参数 callback 是一个 function 函数,该函数还可以接受一个形参 index,此形参为遍历元素的序号(从 0 开始)如果需要访问元素中的属性,可以借助形参 index,配合 this 关键字来实现元素属性的设置或获取。
在 DOM 操作页面时,删除多余或指定的页面元素是非常必要的,jQuery 提供了两种可以删除元素的方法,即 remove() 和 empty() 。严格来说, empty() 方法并非真正意义上的删除,使用该方法,仅仅可以清空全部的节点或节点所包括的所有后代元素,并非删除节点和元素。
remove() 方法的语法格式如下:
remove([expr])
其中参数 expr 为可选项,如果接受参数,则该参数为筛选元素的 jQuery 表达式,通过该表述式获取指定的元素,并进行删除。
empty () 方法的语法格式如下:
empty()
其功能为清空所选择的页面元素或所有的后代元素。
相关推荐
在日常的开发和使用中,我们经常需要借助各种小工具来提高工作效率,例如快速启动常用的应用程序、管理文件等。一个简单但功能强大的集成工具箱可以帮助用户快速访问、启动并管理程序。今天,我们将以Python为基础,结合Tkinter和Win32API,开发一个类似Windows快捷方式的工具箱应用,能够让你轻松集成各种常用程序并一键启动
django自建博客app
《基于YOLOv8的智慧校园实验室高压灭菌锅安全联锁系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计
用于hifi测序数据的基因组组装程序
Microsoft Access 2010 数据库引擎可再发行程序包AccessDatabaseEngine-X64解压后的文件AceRedist
从大模型、智能体到复杂AI应用系统的构建——以产业大脑为例
自然语言处理之TF-IDF算法与TextRank算法的缠绵_textrank,tf-idf和两者的组合-CSDN博客.html
内容概要:2023版《科学智能 (AI4S)全球发展观察与展望》阐述了AI for Science(AI4S)在全球范围内的最新进展及其对科学和工业的深远影响。文章首先回顾了AI4S在过去一年中的快速发展,特别是在药物研发、材料科学、地质学、污染治理等多个领域的应用实例。AI4S通过结合深度学习、机器学习和其他AI技术,加速了从基础研究到实际应用的转化过程。例如,在药物研发中,AI4S帮助科学家克服了“反摩尔定律”的挑战,提高了新药研发的成功率;在材料科学中,AI4S实现了复杂材料的高效模拟,如人造钻石、石墨烯、碳纳米管等;在地质学中,AI4S通过模拟地球内部结构和物理过程,为地震学研究提供了新视角。此外,文章还探讨了大语言模型(LLMs)与科学方法的结合,指出LLMs不仅能辅助科学研究,还能生成新的科学假设并进行逻辑推理。 适合人群:具备一定科研背景或对AI技术感兴趣的科研人员、工程师、政策制定者及高校师生。
这个数据集包含了日常步数统计、睡眠时长、活跃分钟数以及消耗的卡路里,是个人健康与健身追踪的一部分。 该数据集非常适合用于以下实践: 数据清洗:现实世界中的数据往往包含缺失值、异常值或不一致之处。例如,某些天的步数可能缺失,或者存在不切实际的数值(如10,000小时的睡眠或负数的卡路里消耗)。通过处理这些问题,可以学习如何清理和准备数据进行分析。 探索性分析(发现日常习惯中的模式):可以通过分析找出日常生活中的模式和趋势,比如一周中哪一天人们通常走得最多,或是睡眠时间与活跃程度之间的关系等。 构建可视化图表(步数趋势、睡眠与活动对比图):将数据转换成易于理解的图形形式,有助于更直观地看出数据的趋势和关联。例如,绘制步数随时间变化的趋势图,或是比较睡眠时间和活动量之间的关系图。 数据叙事(将个人风格的追踪转化为可操作的见解):通过讲述故事的方式,把从数据中得到的洞察变成具体的行动建议。例如,根据某人特定时间段内的活动水平和睡眠质量,提供改善健康状况的具体建议。
框架结构天城商业办公楼5200平米(建筑图 结构图 计算书 开题报告 任务书 文献翻.zip
柴油机连杆加工工艺及夹具设计.zip
读书网首页的HTML信息
文字渐变颜色代码生成器:让文字绽放多彩魅力,演示:在信息交流日益丰富的今天,个性化的文字展示成为吸引目光的关键。这款文字渐变颜色代码生成器,便是为满足这一需求而生的绿色软件,无需安装,便捷实用。 它的操作极为简便。用户只需在软件界面中输入想要转换的文字内容,接着从丰富的色彩选项里挑选心仪的起始颜色与结束颜色,随后轻轻按下 “转换按钮”,神奇的事情就此发生 —— 适用于论坛、网页、QQ 空间等多种平台,以及自定义格式的渐变颜色代码便会即刻生成。不仅如此,生成的代码还能自动复制到剪切板,极大地节省了用户手动复制的时间。当你在论坛回帖、更新网页内容或是装扮 QQ 空间时,只需轻松粘贴代码,原本单调的文字瞬间就能拥有绚丽的渐变色彩,瞬间脱颖而出,为你的表达增添独特魅力,让文字不再平凡,轻松成为视觉焦点。 一款可以轻松把一段文字生成渐变颜色代码的绿色软件,当你在软件中输入完要转换的文字后,只需要挑选自己喜欢的起始颜色、结束颜色后,按一下―转换按钮即可生成相应的论坛/网页/QQ空间以及自定义格式代码,并且代码可以自动复制到剪切板中,回帖时直接粘贴代码即可不错得文字代码生成器,让你得文字更加漂亮.
1.【锂电池剩余寿命预测】Transformer锂电池剩余寿命预测(Matlab完整源码和数据) 2.数据集:NASA数据集,已经处理好,B0005电池训练、B0006测试; 3.环境准备:Matlab2023b,可读性强; 4.模型描述:Transformer在各种各样的问题上表现非常出色,现在被广泛使用。 5.领域描述:近年来,随着锂离子电池的能量密度、功率密度逐渐提升,其安全性能与剩余使用寿命预测变得愈发重要。本代码实现了Transformer在该领域的应用。 6.作者介绍:机器学习之心,博客专家认证,机器学习领域创作者,2023博客之星TOP50,主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析,文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年,更多仿真源码、数据集定制私信。
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
Android项目原生java语言课程设计,包含LW+ppt
配套文章:https://blog.csdn.net/gust2013/article/details/146909670?spm=1001.2014.3001.5502
《基于YOLOv8的智慧社区儿童游乐设施安全监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计