<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<title>jQuery之DOM操作</title>
<style type="text/css">
@charset "utf-8";
body
{
background-image: url("img/2.jpg");
border: 1px solid red;
border-radius: 10px 10px 10px 10px;
width: 1200px;
height:680px;
margin: 0px auto;
margin-top: 20px;
margin-bottom: 40px;
overflow: hidden;
color: white;
}
ul,ol,table,a,form,dl,li,span,font,strong,label,p
{
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: 楷体;
font-weight: bold;
color: white;
text-decoration: none;
list-style: none;
}
#middle
{
border: 1px solid white;
border-radius: 10px 10px 10px 10px;
width: 1100px;
height: 600px;
margin: 0px auto;
margin-top: 40px;
padding: 0px;
background-color: rgba(7, 36, 87, 0.60);
}
.LinkA
{
display: block;
border: 1px solid white;
border-radius: 10px 10px 10px 10px;
width: 900px;
height: 600px;
margin: 0px auto;
margin-top: 40px;
padding: 0px;
vertical-align: middle;
background-color: rgba(7, 36, 87, 0.60);
}
.LinkA p
{
margin: 0px auto;
vertical-align: middle;
padding-left: 100px;
padding-right: 100px;
}
.displaynone
{
display: none;
}
.MiddleA
{
background-color: rgba(255, 255, 255, 0);
font-family: 楷体;
font-size: 30px;
display: inline-block;
margin: 10px;
margin-top:30px;
margin-bottom: 30px;
}
.h1
{
font-size: 40px;
}
</style>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#middle >dl>dd>a').addClass('MiddleA');
$('#middle>dl>dt>h1').addClass('h1');
$('a').hover(
function()
{
$(this).css({'background-color':'#e8c946','cursor':'pointer','border-radius':'10px 10px 10px 10px'});
},
function()
{
$(this).css({'background-color':'rgba(255, 255, 255, 0)'});
});
$('a').each(
function(index)
{
$(this).attr
(
{
'id':'link'+(index+1)
}
)
$(this).bind('click',function()
{
$('#DIV-LinkA'+(index+1)).removeClass("displaynone").addClass("LinkA");
$('#middle').hide();
});
$('#DIV-LinkA'+(index+1)).bind('click',function()
{
$(this).removeClass("LinkA")
.addClass("displaynone");
$('#middle').show();
});
});
});
</script>
</head>
<body>
<div id="middle">
<dl>
<dt> <h1>第五章 jQuery之DOM操作</h1></dt>
<dd><a>5.1 操作属性</a></dd>
<dd><a>5.2 插入新元素</a></dd>
<dd><a>5.3 移动元素</a></dd>
<dd><a>5.4 复制元素</a></dd>
<dd><a>5.5 DOM操作方法的简单归纳</a></dd>
</dl>
</div>
<div id="DIV-LinkA1" class="displaynone">
<br>
<br>
<p> 这里所说的操作属性，包括css属性和其他属性,其中css属性可以有两种添加
方法，一种是通过.css()方法添加，另一种是通过添加类的的方式.addclassName();
这两种方法添加的属性，有本质的区别;</p>
<br>
<br>
<p> 当然这里有添加属性的方式，当然也就有去除属性的方法，对于addclassname()
添加的属性，可以用removeclassname()方法去除，而对于用.css()方法添加的
属性也只好再调用.css()去更改了！</p>
</div>
<div id="DIV-LinkA2" class="displaynone">
<br>
<br>
<p> 与js不同的是，用jQuery插入元素的方法有多种，这里主要
探究向特定元素的前面，或者后面插入元素；</p>
<br>
<p> 向特定元素前面插入元素可以使用.preppendTo()和.prepend()
方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。</p>
<br>
<p> 向某个元素后面添加元素，可以使用.append()和.appendTo()方法执行的任务相同。
不同之处在于：内容的位置和选择器。这两个函数完成追加的功能！</p>
<p> 除了上面两种方法之外，jQuery还给我们提供了另外两种插入元素的方法
一种是.before()和.after()方法，这两个方法顾名思义，是向已知元素的前面或者后面插入元素，不同的是
这两个函数传入的参数是纯HTML语句片段；</p>
<br>
<p> 这里所说的.before,有必要提及一个例子：
<br/>
eg:$('body').before(['<a href="http://www.baidu.com",id="link1"'><u>我们都是好孩子</u></a>]);</p>
<p> 这里不得不提及的是如果要想给某一个元素添加父节点怎么办呢？jQuery给我们还提供了
在一个已知元素的外部添加节点的方法（添加父节点“包装元素”）.wrap()；</p>
<p> 当然还有我们以前有所耳闻的insertbefore（）函数和insertafter()函数!</p>
</div>
<div id="DIV-LinkA3" class="displaynone">
<br>
<br>
<p> 移动元素，不是说让元素的位置在页面上随便移动，只是要让已经存在的
元素，在动态添加的标签中，追加（添加）到里面，实现元素的移动；说到这里我们怎么样才可以用jQuery
创建元素呢？</p>
<p> 我们可以利用下面的语法，动态创建元素：</p>
<br/>
<br/>
<p> $('<a href="<em>url</em> id=\"link\"">这里创建的是
一个新的A标签</a>');</p>
<br/>
<br/>
<p> 我们利用上面的语法就创建了一个id值为”link“的a标签元素，接下来就是将页面上的元素
动态添加（追加）到a标签中，然后将此A标签插入到页面中，就实现了元素在页面中的移动！</p>
</div>
<div id="DIV-LinkA4" class="displaynone">
<br>
<br>
<p> 接下来，我们来探究一下，一大块元素，在页面中出现好几回的问题:</p>
<p> 这里我们就有必要了解一下元素的复制，可以利用代码帮我们快速实现：那就是元素的
.clone()方法，其中.clone()方法是有参数的，如果为true则表示，复制的元素拥有原件�
JQuery,jQuery,jQuery课程的详细学习资料【jQuery基础教程第2版】
4星 · 超过85%的资源 需积分: 10 129 浏览量
2012-11-12
17:53:11
上传
评论
收藏 1.09MB RAR 举报 
jquery课程.rar （87个子文件） 
jquery课程 
jquery-1.8.2.min.js 91KB 第二章 选择符 
jQuery用法.ppt 175KB JQuerytest css.css 1KB
test.html 4KB jquery-1.8.2.min.js 91KB testJS.js 2KB .idea misc.xml 266B encodings.xml 171B workspace.xml 14KB vcs.xml 173B JQuerytest.iml 292B scopes scope_settings.xml 143B .name 10B modules.xml 283B image 
26.jpg 17KB 11.jpg 18KB 28.jpg 55KB 13.jpg 85KB 3.jpg 91KB 1.jpg 173KB 24.jpg 24KB
okk.png 586B 22.jpg 25KB
con_image1.gif 1KB warning.png 927B 19.jpg 33KB
JQuery基础教程 第二章 选择符.docx 22KB 第一章 JQuery入门 jQuery第一章 jquery-1.8.2.min.js 91KB .idea untitled.iml 292B misc.xml 266B encodings.xml 171B workspace.xml 13KB vcs.xml 173B scopes scope_settings.xml 143B .name 8B modules.xml 279B Chapter01.html 1KB 第三章 事件 JQueryDemo events2.html 2KB .idea misc.xml 266B encodings.xml 171B workspace.xml 14KB vcs.xml 173B scopes scope_settings.xml 143B JQueryDemo.iml 292B .name 10B modules.xml 283B style.css 351B JS jquery-1.8.2.min.js 91KB events.html 3KB JQuery的事件处理.docx 20KB 第五章 DOM操作 JQuery第五章 jquery-1.8.2.min.js 91KB ChapterFive.html 3KB Model jquery-1.8.2.min.js 91KB chapterFive.html 954B .idea misc.xml 266B encodings.xml 171B workspace.xml 12KB vcs.xml 173B scopes scope_settings.xml 143B Model.iml 292B .name 5B modules.xml 273B .idea untitled.iml 292B misc.xml 266B encodings.xml 171B workspace.xml 12KB vcs.xml 173B scopes scope_settings.xml 143B .name 8B modules.xml 279B Chapter5.html 11KB img 2.jpg 207KB 第四章 效果 JQuery自学.docx 34KB Prj_JQueryDemo Prj_JQueryDemo.suo 14KB Prj_JQueryDemo.sln 2KB Web StyleSheet2.css 79B get.jpg 10KB jquery.js 261KB Default.aspx.cs 280B HTMLPage.htm 1KB Default.aspx 537B HTMLPage2.htm 549B StyleSheet.css 350B 1.jpg 11KB web.config 277B MyJavaScript2.js 445B MyJavaScript.js 3KB资源评论
DiDiaoJin2012-11-12感觉挺实用很全面
xl5115105
- 粉丝: 19
- 资源: 49
最新资源
- PHP端通过modbus协议跟第三方设备进行数据通信
- navicat安装包亲测可用
- 算法部署-使用OpenVINO部署MobileStyleGAN轻量化高保真图像合成算法-项目源码-优质项目实战.zip
- 基于java实现远程采集华为逆变器使用modbus tcp协议进行通讯的设备数据
- Unity画面共享Spout插件
- 基于C++用modbus实现的工业设备的数据采集程序，支持Tcp、串口
- 完结12章AI Agent智能应用从0到1定制开发
- 15白落梅：你是锦瑟我为流年：三毛的万水千山-3491776.mobi
- Federated Learning-Aided Prognostics in the Shipping 4.0: Princi
- OFDM 的鲁棒频率和定时同步文献部分阅读笔记
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
