`
terryfeng
  • 浏览: 504187 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery 的DOM操作方法 元素的创建、复制、重组、修饰

阅读更多

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('&nbsp;(<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('&hellip;')     //为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. 
<href="http://terryfeng.cnblogs.com">jQuery</a>动态为链接添加属性。</p>
        
<p>
            2. 
<href="http://terryfeng.cnblogs.com">CSLA.Net</a>业务层最强框架。<span class="pull-quote">CSLA注释<span class="drop">省略部分</span></span></p>
        
<p>
            3. 
<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和ajax 操作

    jQuery提供了丰富的选择器、遍历和操作方法,使得DOM操作变得简单易行。 1. **选择器**: jQuery提供了多种CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),以及组合选择器等,使我们能够快速...

    jQuery DOM节点操作源码

    2. **链式操作**:jQuery对象返回的是一个包含零个或多个DOM元素的集合,这个集合支持链式调用,使得多步操作可以紧凑地写在一起,如 `$("#myDiv").html("Hello").css("color", "red")`。 3. **DOM遍历**:jQuery...

    Jquery+dom+easyUI教程

    2. DOM 操作:jQuery 提供了一整套方法来操作 DOM 元素,包括添加、删除和修改元素。例如,`append()`用于在元素内部追加内容,`remove()`用于删除元素,而`attr()`则用来设置或获取元素的属性值。此外,`html()`和`...

    jQuery中DOM树操作之复制元素的方法

    本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有...

    gQuery : jQuery DOM 操作部分

    尽管体积小巧,但gQuery依然保留了jQuery中许多常用的DOM操作方法,如选择元素、遍历DOM树、添加/删除样式、处理事件等,极大地提高了开发效率。 1. **选择器**:gQuery支持与jQuery类似的CSS选择器语法,可以轻松...

    jQuery DOM 1.pptx

    jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。 回忆:DOM = Document Object Model(文档对象模型) 1、jQuery获得元素 三个简单实用的用于DOM操作的jQuery方法。 text() //设置或返回...

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统,使得开发者能够更加高效地选取和操作...

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料.zip

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册(教辅) .pdf ...

    jQuery复制移除表单元素代码.zip

    2. **复制表单元素**:在jQuery中,复制DOM元素可以使用`.clone()`方法。例如,如果有一个ID为`formElement`的表单元素,可以这样复制它: ```javascript var clonedElement = $('#formElement').clone(); ``` ...

    jQuery DOM操作小结与实例

    在jQuery中,DOM操作包括创建新元素、复制现有元素、重新组织文档结构以及修改元素的样式和属性。 1. **DOM Core**: - DOM Core是DOM的基础部分,它定义了一套通用的标准,用于处理任何基于标记语言的文档,如XML...

    探析在jQuery框架下操作HTMLDOM元素.pdf

    探析在jQuery框架下操作HTML DOM元素 一、HTML DOM简介 HTML DOM(Document Object Model)是HTML文档对象模型的缩写,定义了访问和操作HTML文档的标准方法。它将网页中的各个元素都看作一个个对象,从而使网页中...

    jQuery DOM 2.pptx

    jQuery中的DOM操作(2) jQuery增加元素 jQuery删除元素 1、jQuery增加HTML元素 通过 jQuery,可以很容易地添加新元素/内容。 append() // 在被选元素的结尾插入内容 prepend() //在被选元素的开头插入内容 after() ...

    jQuery Dom元素操作技巧

    DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取父节点,兄弟节点,在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('...

    详解jQuery中的DOM操作

    这篇关于“详解jQuery中的DOM操作”的文章深入介绍了jQuery如何帮助我们查找、创建、修改、插入、删除、复制、替换和包裹DOM节点,以及处理元素的属性。 首先,jQuery提供了强大的选择器系统来查找DOM节点。例如,...

    14jQueryDOM节点操作.docx

    jQuery库简化了对DOM节点的操作,使得开发者能够更加高效地处理页面元素。 在Visual Studio环境下,我们可以利用jQuery进行DOM节点的创建、插入等操作。下面我们将详细探讨这些知识点: 1. **创建DOM节点** - ...

    jQuery常见面试题之DOM操作详析

    关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了。 面试题一:JQ中html()、text()和val()区别? 面试题二:JQ中find()、has()和filter()区别? 面试...

    Jquery方式获取iframe页面中的 Dom元素

    需要注意的是,使用jQuery操作iframe中的DOM时,必须确保iframe已经完全加载完毕,否则可能无法正确获取其内部的DOM元素。为了处理这种情况,通常我们会将相关操作放在iframe的“load”事件中或者在window的“load”...

Global site tag (gtag.js) - Google Analytics