热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jqueryDOM操作基于命令改变页面

jqueryDOM操作基于命令改变页面,需要的朋友可以参考下。
操作属性
jQuery提供.attr()方法改变属性值,.removeAttr()方法删除属性
代码如下:

$(document).ready(function(){
$('div.character a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'mylink' + index
});
});
});


插入新元素
jQuery提供了两种将元素插入到其它元素前面的方法,.insertBefore()方法和.before()方法,而.insertAfter()和.after()方法则用于将元素插入到其它元素后面.

$(document).ready(function(){
/*
*下面两种方法效果一样,使用.insertAfter()方法,可以通过连缀更多方法连续对所创建的a元素进行操作.
*而使用.after()方法,连缀的其它方法的操作对象会变成$('div.chapter p')中选择符匹配的元素
*/
$('back to top').insertAfter('div.chapter p');
$('div.chapter p').after('back to top');
});

DOM操作方法简单归纳
(1)要在每个匹配的元素中插入新元素,使用:

.append()
.appendTo()
.prepend()
.prependTo()
(2)要在每个匹配的元素相邻的位置上插入新元素,使用:

after()
.insertAfter()
.before()
.insertBefore()
(3)要在每个匹配元素的外部插入新元素,使用:

.wrap()
(4)要用新元素或文本替换每个匹配的元素,使用:

.html()
.text()
(5)要移除每个匹配的元素中的元素,使用:

.empty()
(6)要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:

.remove()
推荐阅读
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • jQuery学习笔记:深入理解事件委派(2014年8月3日)
    在jQuery中,事件委托机制主要通过`closest()`方法实现。该方法用于查找与指定选择器匹配的最近祖先元素,从当前元素开始逐级向上遍历DOM树。这一技术不仅提高了代码的效率,还能有效处理动态生成的元素。参考资料:jQuery遍历方法详解。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • 需求:在指定的DIV区域内点击时,需展示该区域内的附加操作面板;而在区域外点击时,则应自动隐藏该附加操作面板。通过精准的事件监听与处理,确保用户交互体验的流畅性和直观性。 ... [详细]
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • 构建顶级PHP博客系统:实践与洞见
    构建顶级PHP博客系统不仅需要扎实的技术基础,还需深入理解实际应用需求。本文以Zend Studio为开发环境,MySQL作为数据存储,Apache服务器为运行平台,结合jQuery脚本语言,详细阐述了从环境搭建到功能实现的全过程,分享了开发PHP博客管理系统的宝贵经验和实用技巧。 ... [详细]
  • $apply() 方法允许从 AngularJS 框架外部触发表达式的执行,确保其在 AngularJS 的上下文中运行。例如,当你使用 `setTimeout()` 或者集成第三方库时,可以通过调用 `$apply()` 来确保事件更新能够被 AngularJS 检测到并触发脏检查机制,从而实现数据的双向绑定。这一过程不仅保证了数据的一致性,还提升了应用的响应速度和用户体验。 ... [详细]
  • 在编程中,`SyntaxError: unterminated string literal` 错误通常出现在使用 jQuery 或其他 JavaScript 库时,表示某个字符串字面量未正确闭合。这种错误通常是由于代码中的引号不匹配或缺失导致的,例如在字符串中意外地包含了未转义的引号字符。解决此问题的方法是仔细检查相关代码段,确保所有字符串都已正确闭合,并且引号已适当转义。此外,使用现代代码编辑器或 IDE 的语法高亮功能可以帮助快速定位此类问题。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 本研究聚焦于利用Java、PHP和Python开发的汽车销售管理系统,旨在为计算机科学专业学生的毕业设计提供参考。项目采用BS架构,结合多种编程语言的优势,实现高效的数据管理和用户交互。该系统不仅涵盖了汽车销售的核心功能,还通过集成先进的技术栈,提升了系统的稳定性和扩展性。 ... [详细]
  • 本文详细解析了 jQuery 中的大于和小于选择器的使用方法,通过具体示例展示了这些选择器在实际开发中的应用场景和技巧。适合初学者和有一定基础的开发者参考,帮助他们更好地理解和运用这些强大的选择器功能。 ... [详细]
  • 本教程旨在为HTML5初学者提供Canvas画布的基础知识与实践指导。通过详细解析Canvas元素的使用方法、绘图API及常见图形绘制技巧,帮助读者快速掌握在网页中利用Canvas进行动态图形创作的基本技能。 ... [详细]
  • 深入解析PowerShell Stable与Preview版的区别与应用
    在研究 PowerShell 的 GitHub 发布页面时,我们注意到除了稳定的 6.2.0 版本外,还推出了 6.2.0 的预览版。本文将详细探讨这两个版本之间的主要区别及其应用场景,帮助用户更好地选择适合自身需求的版本。我们将分析稳定版的成熟度、性能和安全性,以及预览版的新功能、改进和潜在风险,为用户提供全面的参考信息。 ... [详细]
  • 如何将PHP文件上传至服务器及正确配置服务器地址 ... [详细]
author-avatar
艾米27
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有