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

最新推荐文章于 2020-08-11 21:17:11 发布

冯瑞涛

最新推荐文章于 2020-08-11 21:17:11 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/fengruitao/article/details/87781996

版权

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

jQuery 的DOM操作方法元素的创建、复制、重组、修饰。下面的例子完全可用，每一行都写有注释，请复制代码运行。

Code

<!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>

posted on 2009-01-28 10:54 冯瑞涛阅读( ...) 评论( ...) 编辑收藏

冯瑞涛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 的DOM操作方法元素的创建、复制、重组、修饰

jQuery 的DOM操作方法元素的创建、复制、重组、修饰 jQuery 的DOM操作方法元素的创建、复制、重组、修饰。下面的例子完全可用，每一行都写有注释，请复制代码运行。 Code&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh...
复制链接

扫一扫