当前位置:  编程技术>jquery

jquery实例-DOM操作方法

    来源: 互联网  发布时间:2014-09-03

    本文导语:  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('

    '); //再其本身包含在div内容中

                    var clonedText = $clonedCopy.text(); //获得文本,去掉了html
                    $clonedCopy.html(clonedText);  //将文本以Html的形式插入到内容中,相当于替换html内容
                });
            });
       


       
        佳月 Terry.Feng.C xyz
       


        
     
     

    您可能感兴趣的文章:

  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jquery下拉select控件操作方法分享(jquery操作select)
  • Cookie操作插件 jQuery.Cookie
  • jquery链式操作、链式写法的小例子
  • 利用js(jquery)操作Cookie的方法说明
  • jQuery操作select option选项(增加 删除 修改)
  • jquery常用操作小结
  • JQuery操作DOM的笔记
  • jquery链式操作的正确使用方法
  • jQuery操作select下拉框的text值和value值的方法
  • JQuery 文本框操作的4个小例子
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery学习笔记之jQuery原型属性和方法
  • jquery中slideUp()方法与slideDown()方法
  • jQuery 滑动方法slideDown向下滑动元素
  • jquery中fadeIn()方法与fadeOut()方法(示例)
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jquery show()方法与hide()方法的小例子
  • jquery show()方法与hide()方法(示例)
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jQuery animate方法定位页面具体位置(示例)
  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法
  • 判断一个对象是否为jquery对象的方法
  • jQuery 追加元素的方法如append、prepend、before
  • jQuery获得内容与属性方法
  • jQuery.holdReady()使用方法
  • jquery动态添加元素事件失效问题解决方法
  • jQuery获得内容和属性方法及示例
  • 使用jQuery重置(reset)表单的方法
  • 点击表单提交时出现jQuery没有权限的解决方法
  • jquery获取第几个元素方法示例 jquery选择器
  • Jquery之Bind方法参数传递与接收的三种方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3