首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 人生哲理 > 正文

    [jQuery,DOM操作小结与实例] 客服实习小结

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    DOM操作的分类：DOM CORE（核心）、HTML-DOM和CSS-DOM 
    1. DOM Core 
    DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。 

    它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML. 

    Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法，都是dom core的组成部分。 

    2. HTML_DOM 

    使用HTML_DOM来获取表单对象的方法 
    Document.forms 
    使用HTML_DOM来获取某元素的src属性的方法 
    Element.src 
    3. CSS_DOM 

    CSS_DOM是针对CSS的操作。在javascript中，CSS-DOM技术的主要作用是获取和设置style对象的各个属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
    Element.style.color = “red”; 
    jQuery作为javascript库，继承并发扬了javascript对DOM对象的操作的特性，使开发人员能方便的操作DOM对象。

    jQuery 的DOM操作方法 元素的创建、复制、重组、修饰。下面的例子完全可用，每一行都写有注释，请复制代码运行。
    代码如下:
    <!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"> 
    <title></title> 
    <script src="http://img.poluoluo.com/jslib/jquery/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"> 
    <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>

    • [jQuery,DOM操作小结与实例] 客服实习小结 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文[jQuery,DOM操作小结与实例] 客服实习小结由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.