jquery实例-DOM操作方法
本文导语: jQuery 的DOM操作方法 元素的创建、复制、重组、修饰。 test-jquery .chapter { width: 42em; } a.link { text-decoration: none...
jQuery 的DOM操作方法 元素的创建、复制、重组、修饰。
test-jquery
.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(/blog_article/pq-top.jpg) no-repeat left top;
position: absolute;
width: 160px;
right: -180px; /* 定位注释框的横向位置*/
padding-top: 18px;
}
.pulled
{
background: url(/blog_article/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;
}
//为每个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() {
$('新年好').prependTo('body'); //初始化到body
$('div.chapter p:gt(0)').after('返回到上面');
//下行等价上面的哪行代码 gt代表从第几个元素后面的p开始
//$('返回到上面').insertAfter('div.chapter p:gt(0)');
});
//
$(document).ready(function() {
$('').insertAfter('div.chapter');
$('span.footnote').each(function(index) {
$(this)
//为每一个footnote在前面动态添加数字连接（1，2）
.before('' + (index + 1) + '')
//将footnote插入到ol标签中（不带上面的连接，仅span），就是移动标签，带有appendTo代表将自己追加到其他元素中
.appendTo('#notes')
// 向指定元素内容的后面追加标签
.append(' (内容)')
//将this包含在wrap的第一个参数中表示的标记中
.wrap('
});
});
$(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('
var clonedText = $clonedCopy.text(); //获得文本,去掉了html
$clonedCopy.html(clonedText); //将文本以Html的形式插入到内容中，相当于替换html内容
});
});
佳月 Terry.Feng.C xyz
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。