jQuery 的DOM操作方法 元素的创建、复制、重组、修饰。下面的例子完全可用，每一行都写有注释，请复制代码运行。
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.chapter
{
width: 42em;
}
a.link
{
text-decoration: none;
}
span.footnote
{
font-style: italic;
font-family: "Times New Roman" , Times, serif;
display: block; /*使其变成一块一块的*/
margin: 1em 0;
}
.text-reference
{
font-weight: bold;
}
#notes li
{
margin: 1em 0;
}
#notes
{
margin-top: 1em;
border-top: 1px solid #00ff00;
}
#footer
{
margin-top: 1em;
border-top: 1px solid #dedede; /*上边线*/
}
.inhabitants
{
border-bottom: 1px solid #dedede;
}
.pulled-wrapper
{
background: url(pq-top.jpg) no-repeat left top;
position: absolute;
width: 160px;
right: -180px; /* 定位注释框的横向位置*/
padding-top: 18px;
}
.pulled
{
background: url(pq-bottom.jpg) no-repeat left bottom;
position: relative;
display: block;
width: 140px;
padding: 0 10px 24px 10px;
font: italic 1.4em "Times New Roman" , Times, serif;
}
</style>
<script type="text/javascript">
//为每个p元素添加属性
$(document).ready(function() {
$('p').each(function(index) {
var currentClass = $(this).attr('class');
$(this).attr('class', currentClass + ' inhabitants');
});
});
//动态为元素添加属性
$(document).ready(function() {
$('div.chapter a[href*=cnblogs]').each(function(index) { //each好似for循环，他会循环集合中所有的对象，参数一的方法是对每一个对象都执行的操作，index是对象的索引
var $thisLink = $(this);
$(this).attr({
'rel': 'subsection ',
'id': 'blogslink-' + index,
'title': '更多' + $thisLink.text() + '的资料在冯瑞涛的博客',
'class': 'link'
});
});
});
//插入返回到上面连接
$(document).ready(function() {
$('<a id="top" name="top">新年好</a>').prependTo('body'); //初始化到body
$('div.chapter p:gt(0)').after('<a href="#top">返回到上面</a>');
//下行等价上面的哪行代码 gt代表从第几个元素后面的p开始
//$('<a href="#top">返回到上面</a>').insertAfter('div.chapter p:gt(0)');
});
//
$(document).ready(function() {
$('<ol id="notes"></ol>').insertAfter('div.chapter');
$('span.footnote').each(function(index) {
$(this)
//为每一个footnote在前面动态添加数字连接（1，2）
.before('<a href="#foot-note-' + (index + 1) + '" id="context-' + (index + 1) + '" class="context"><sup>' + (index + 1) + '</sup></a>')
//将footnote插入到ol标签中（不带上面的连接，仅span），就是移动标签，带有appendTo代表将自己追加到其他元素中
.appendTo('#notes')
// 向指定元素内容的后面追加标签
.append(' (<a href="#context-' + (index + 1) + '">内容</a>)')
//将this包含在wrap的第一个参数中表示的标记中
.wrap('<li id="foot-note-' + (index + 1) + '"></li>');
});
});
$(document).ready(function() {
$('span.pull-quote').each(function(index) {
//获得父元素p
var $parentParagraph = $(this).parent('p');
//设置p标签为相对定位，否则无法对其位置进行操作
$parentParagraph.css('position', 'relative');
//复制一份拷贝，span.pull-quote clone(false);代表仅复制标记本身不复制其内容
var $clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled') //添加样式，拥有下面的背景
.find('span.drop') //找到其中的span.drop，此时对象已经是span.drop了
.html('…') //为span.drop 设置html文档
.end() //返回没有被改变前的那个jQuery对象状态
.prependTo($parentParagraph) //将这个span追加到指定的元素中去
.wrap('<div class="pulled-wrapper"></div>'); //再其本身包含在div内容中<div><span>
var clonedText = $clonedCopy.text(); //获得文本,去掉了html
$clonedCopy.html(clonedText); //将文本以Html的形式插入到内容中，相当于替换html内容
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<span class="footnote">佳月</span> <span class="footnote">Terry.Feng.C</span> <span
class="footnote">冯瑞涛</span>
<div class="chapter">
<p>
1. <a href="http://terryfeng.cnblogs.com">jQuery</a>动态为链接添加属性。</p>
<p>
2. <a href="http://terryfeng.cnblogs.com">CSLA.Net</a>业务层最强框架。<span class="pull-quote">CSLA注释<span class="drop">省略部分</span></span></p>
<p>
3. <a href="http://terryfeng.cnblogs.com">DNN</a>免费开源的CMS系统。<span class="pull-quote">DNN注释<span class="drop">省略部分</span></span></p>
</div>
<div id="footer">
冯瑞涛的博客</div>
</form>
</body>
</html>
分享到：
相关推荐
在jQuery中，DOM操作包括创建新元素、复制现有元素、重新组织文档结构以及修改元素的样式和属性。 1. **DOM Core**： - DOM Core是DOM的基础部分，它定义了一套通用的标准，用于处理任何基于标记语言的文档，如XML...
哈希表源码
sun_3ck_03_0119
内容概要：本文档详细介绍了基于 MATLAB 实现的 LSTM-AdaBoost 时间序列预测模型，涵盖项目背景、目标、挑战、特点、应用领域以及模型架构和代码示例。随着大数据和AI的发展，时间序列预测变得至关重要。传统方法如 ARIMA 在复杂非线性序列中表现欠佳，因此引入了 LSTM 来捕捉长期依赖性。但 LSTM 存在易陷局部最优、对噪声鲁棒性差的问题，故加入 AdaBoost 提高模型准确性和鲁棒性。两者结合能更好应对非线性和长期依赖的数据，提供更稳定的预测。项目还展示了如何在 MATLAB 中具体实现模型的各个环节。 适用人群：对时间序列预测感兴趣的开发者、研究人员及学生，特别是有一定 MATLAB 编程经验和熟悉深度学习或机器学习基础知识的人群。 使用场景及目标：①适用于金融市场价格预测、气象预报、工业生产故障检测等多种需要时间序列分析的场合；②帮助使用者理解并掌握将LSTM与AdaBoost结合的实现细节及其在提高预测精度和抗噪方面的优势。 其他说明：尽管该模型有诸多优点，但仍存在训练时间长、计算成本高等挑战。文中提及通过优化数据预处理、调整超参数等方式改进性能。同时给出了完整的MATLAB代码实现，便于学习与复现。
1996-2019年各地级市平均工资数据 1、时间：1996-2019年 2、来源：城市nj、各地级市统计j 3、指标：平均工资（在岗职工） 4、范围：295个地级市
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
内容概要：本文介绍了一种新颖的变压器模型C2Former（Calibrated and Complementary Transformer），专门用于解决RGB图像和红外图像之间的物体检测难题。传统方法在进行多模态融合时面临两个主要问题——模态错位（Modality miscalibration）和融合不准确（fusion imprecision）。作者针对这两个问题提出采用互模交叉注意力模块（Inter-modality Cross-Attention, ICA）以及自适应特征采样模块（Adaptive Feature Sampling, AFS）来改善。具体来说，ICA可以获取对齐并且互补的特性，在特征层面进行更好的整合；而AFS则减少了计算成本。通过实验验证了基于C2Former的一阶段和二阶段检测器均能在现有公开数据集上达到最先进的表现。 适合人群：计算机视觉领域的研究人员和技术人员，特别是从事跨模态目标检测的研究人员，对Transformer架构有一定了解的开发者。 使用场景及目标：适用于需要将可见光和热成像传感器相结合的应用场合，例如全天候的视频监控系统、无人驾驶汽车、无人
上海人工智能实验室：金融大模型应用评测报告-摘要版2024.pdf
malpass_02_0907
C++-自制学习辅助工具
内容概要：本文提供了有关微信生态系统的综合开发指导，具体涵盖了微信机器人的Java与Python开发、全套及特定应用的小程序源码(PHP后台、DeepSeek集成)，以及微信公众号的基础开发与智能集成方法。文中不仅给出了各种应用的具体案例和技术要点如图灵API对接、DeepSeek大模型接入等的简述，还指出了相关资源链接以便深度探究或直接获取源码进行开发。 适合人群：有意开发微信应用程序或提升相应技能的技术爱好者和专业人士。不论是初涉者寻求基本理解和操作流程，还是进阶者期望利用提供的资源进行项目构建或是研究。 使用场景及目标：开发者能够根据自身兴趣选择不同方向深入学习微信平台的应用创建，如社交自动化（机器人）、移动互联网服务交付（小程序），或者公众信息服务（公众号）。特别是想要尝试引入AI能力到应用中的人士，文中介绍的内容非常有价值。 其他说明：文中提及的多个项目都涉及到了最新技术栈（如DeepSeek大模型），并且为不同层次的学习者提供从零开始的详细资料。对于那些想要迅速获得成果同时深入了解背后原理的人来说是个很好的起点。
pimpinella_3cd_01_0916
mellitz_3cd_01_0516
schube_3cd_01_0118
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
智慧用电平台建设解决方案【28页】
lusted_3ck_01_0519
HCIP作业1 这里面是完成的ensp的拓扑图