首页 > 其他分享 >JQuery的DOM操作

JQuery的DOM操作

时间:2024-09-07 11:36:24浏览次数:12  
标签:JQuery ipsum DOM sit 元素 consectetur dolor 操作 amet

JQuery基础教程第四版

 第五章:DOM操作方法的简单归纳

使用JQuery的DOM操作实现以下功能

    1.创建新元素

      2.插入新元素

      3.移动元素

      4.包装元素

      5.复制元素

相关代码

HTML文件

 

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="six.css">     <script src="../js/jquery-3.4.1.js"></script> </head> <body>     <script>           $(document).ready(function(){             //遍历<div class='chapter'>中的每个链接,并逐个为它们添加属性             $('div.chapter a[href*="baidu.com"]').attr({                     rel:'external',                     // title:'learn more at wikipedia',                     title:function(){                         //在值回调函数中, this指向每次回调时正在操作的那个DOM元素。                         return 'Learn more about '+$(this).text()+'at Baidu';                     },                     //值回调:给参数传递一个函数,而不是具体的值                     //这个函数会针对匹配的元素集中的每个元素都调用一次,                     //调用后的返回值将作为属性的值                     //index:代表迭代次数                     id:function(index,oldValue){                         return 'wikilink-'+index;                     }                 });                 //insertAfter在指定元素的外部插入内容,元素外部的前面                 $('<a href="#top">back to top</a>').insertAfter('div.chapter p');                 //prependTo在指定元素的内部插入内容,元素内部的前面                 $('<a id="top"></a>').prependTo('body');                 //取得页面中某个位置上的元素,将它们插入到另一个位置上                 // $('span.footnote').insertBefore('#footer')                 //把所有脚注都包装到一个<ol>中                 // .wrapAll('<ol id="notes"></ol>')                 //把每个脚注都包装到自己的<li>中                 // .wrap('<li></li>');                 //包装元                 var $notes=$('<ol id="notes"></ol>').insertBefore('#footer');                 $('span.footnote').each(function(index){                     // $('<sup>'+(index+1)+'</sup>').insertBefore(this);                     //  $(this).appendTo($notes).wrap('<li></li>');                     //反向插入方法                     // $(this).before('<sup>['+(index+1)+']</sup>')                     //        .appendTo($notes)                     //        .wrap('<li></li>');                     $(this).before([                         '<a href="#footnote-',                         index+1,                         '" id="context-',                         index+1,                         '" class="context">',                         '<sup>',                          index+1,                         '</sup></a>',                     ].join(''))                     .appendTo($notes)                     .append([                         '&nbsp;(<a href="#context-',                         index+1,                         '">context</a>)'                     ].join(''))                     .wrap('<li id="footnote-'+(index+1)+'"></li>');                     //复制元素                     $('div.chapter p:eq(0)').clone().insertBefore('div.chapter');                 });                 $('span.pull-quote').each(function(index){                     var $parentParagraph=$(this).parent('p');                     $parentParagraph.css('position','relative');                     var $clonedCopy=$(this).clone();                     $clonedCopy                     .addClass('pulled')                     //find()找到<span class='drop'>元素集合                     .find('span.drop')                     //.html将内容改为...,会返回匹配元素中的html标记                     .html('&hellip;')                     //返回内部jQuery栈中之前选中的元素                     .end()                     //.text()取得内容时,所有的html标签都将被忽略,                     //而所有HTML实体也会被转换成对应的字符                     .text($clonedCopy.text())                     .prependTo($parentParagraph);                 });           });               </script>     <h1 id="f-title">Lorem, ipsum periam sed ab commodi aliquam ipsum et?</h1>     <div id="f-author">Lorem ipsum dolor sit amet consec</div>     <h2>Lorem ipsum dolor sit, amet consectetur</h2>     <h3>Lorem ipsum dolor sit amet</h3>     <div class="excerpt">an excerpt</div>     <div class="chapter">         <p class="square">             <span class="pull-quote">It is a Law of Nature <span class="drop">with us</span>                that a male  child shall have <strong> one more side</strong>than this father            </span>             Lorem ipsum dolor, sit amet consectetur adipisicing elit.<span class="footnote">                 Lorem ipsum dolor sit amet consectetur adipisicing elit.             </span> Illo cum dignissimos possimus quasi consectetur voluptatem asperiores veritatis eos reprehenderit animi doloremque amet quibusdam, accusamus delectus earum, soluta beatae. Dolor, tempore!             Quia quam ut ipsum laudantium voluptatem itaque natus eum inventore magnam dolorum odio at hic tempora corporis enim blanditiis facere saepe, velit nihil ipsam. Obcaecati, nobis. Sapiente odit expedita ad.             Magnam adipisci quidem nam quae, rem perferendis sequi iste, illo nihil sint ad est libero laborum consectetur voluptas dolor fugiat ipsa inventore. Nobis obcaecati in, adipisci ducimus tempore qui placeat.             Officiis, quod?<a href="http://www.baidu.com">feefefefffffffffffffffffffff</a> Consequatur autem quibusdam cum voluptates sit, quam voluptate quis, quod ex labore qui molestiae a sunt? Iste provident placeat ipsum possimus laboriosam quaerat. Laudantium inventore labore nesciunt deserunt?             Eius, vel? Magni eaque sapiente accusantium odio sit quod impedit suscipit, obcaecati ullam error, illo doloremque a totam, corporis pariatur. Modi ducimus esse inventore, aut nemo ex quis maiores corporis.             Dolorem quo dicta minus? Sunt iste asperiores est minima mollitia molestiae iure fugit ipsum libero veniam error esse cupiditate rem modi blanditiis voluptatem natus aut, tenetur nam sint quo hic.             Quaerat sequi ullam architecto l<a href="http://www.baidu.com">fffffffffffffffffffffffffffff</a>audantium. Magni deleniti itaque maiores ratione, molestias doloribus! Sit in quam harum nihil laboriosam enim? Ut cum sit officiis explicabo sapiente blanditiis eveniet atque dicta consequuntur!             Dolorem amet dolor quod atque, nobis aspernatur error totam dicta quisquam vero eos incidunt fuga. Tenetur quisquam quae, qui fugiat magni cum, ipsum vitae repellendus, expedita soluta autem iusto! Quasi.         </p>               <p class="nobility hexagon">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore possimus eaque cum qui labore maxime nostrum ipsa reiciendis, modi voluptatem. Provident quia animi rerum cupiditate placeat delectus exercitationem eius doloremque?         Magnam delectus fugit vero blanditiis porro sint nam aliquam fugiat voluptatibus quod tenetur ab temporibus, asperiores unde placeat provident assumenda dolor quo numquam pariatur, tempora corrupti eum labore ex. Placeat.         Obcaecati, qui incidunt. Libero eius ullam neque, o<a href="http://www.baidu.com">feeeeeeeeeeeeeeeeeeeeeee</a>dio eum cumque voluptatibus quis temporibus quae maiores consectetur expedita laborum cupiditate quod ut natus. Illum eum quo aspernatur culpa tempore veniam sed.         Quidem, laborum cupiditate, <span class="footnote">             Lorem ipsum dolor sit amet consectetur adipisicing         </span>voluptatum quo libero blanditiis dicta praesentium provident eaque consequatur debitis veritatis aperiam hic expedita natus. Architecto consequuntur tempore totam beatae excepturi nulla quidem vitae quia doloribus dolores.         Dolor quisquam nesciunt dolorum debitis voluptas repellat error ab natus corporis iusto illum, quod aperiam sint eius id quam. Vitae eaque fuga, quam minus voluptatum labore nulla ipsam veritatis odit.</p>         <p>             <span class="pull-quote">Lorem ipsum dolor sit amet consectetur<span class="drop"> Lorem ipsum dolor sit amet</span> adipisicing elit. Aliquam, nulla! Itaque mollitia totam animi ut dolorum accusamus, magni quisquam aliquam eveniet cum ipsam optio, aut ipsa. Quasi atque nulla architecto.</span>             consectetur adipisicing elit. P<a href="http://www.baidu.com">uiiiiiiiiityty</a>laceat eveniet nemo esse! Sunt et quam est repellat harum explicabo fugiat, tempore nobis aut repudiandae consequatur veritatis expedita impedit quaerat accusantium?             Inventore natus, non delectus<span class="footnote">                 Lorem ipsum dolor sit amet consectetur adipisicing elit.             </span> a distinctio at provident odio impedit quo aliquid cum quidem tempore ut quis doloremque error, cumque accusantium quam. Earum blanditiis veritatis commodi adipisci, suscipit ut aliquam!             Corporis nesciunt labore enim, mollitia sunt sit, cum facilis consectetur repellat, necessitatibus vero deleniti ratione beatae facere omnis. Reprehenderit omnis dignissimos laudantium eligendi obcaecati numquam eveniet recusandae. Nisi, obcaecati optio.         </p>         <hr>         <div id="footer"></div>     </div> </body> </html>   CSS文件  .footnote{     font-style: italic;     font-size: 12px;     display: block; } .pulled{     display: block;     position: absolute;     width: 120px;     top:-20px;     right: 34px;     padding: 20px;     font:italic 1.2em "Times News Roman",Times,serif;     background: #e5e5e5;     border: 1px solid #999;     border-radius: 8px;     box-shadow: 1px 1px 8px rgba(0,0,0,0.6); }

 实现效果

 

 

 

 

这些方法几乎能够在任何情况下,完成任何任务

(1)要在HTML中创建新元素,使用$()函数

(2)要在每个匹配的元素中插入新元素,使用:

                 .append();

                 .appendTo();

                 .prepend();

                 .prependTo();

(3)要在每个匹配的元素相邻位置中插入新元素,使用:

                 .after();

                 .insertAfter();

                 .before();

                 .insertBefore();

(4)要在每个匹配的元素外部中插入新元素,使用:

                 .wrap();

                 .wrapAll();

                 .wrapInner();

      

(5)使用新元素或文本替换每个匹配的元素,使用:

                 .html();

                 .text();

                 .replaceAll();

                 .replaceWith();

(6)移除每个匹配元素中的元素,使用:

                 .empty()

 (7)要从文档中一处每个匹配的元素及后代元素,但不实际删除它们使用:

                 .remove()

                 .detach();

 

         

    

 

 

 

 

     

标签:JQuery,ipsum,DOM,sit,元素,consectetur,dolor,操作,amet
From: https://www.cnblogs.com/njhwy/p/18401492

相关文章

  • 电脑禁止访问特定网页/网站的5个方法(操作简单!小白必看!)
    确保员工高效工作并维护网络环境的安全与秩序至关重要。有时,为了防止员工访问与工作无关或存在潜在风险的网站,企业需要采取一些措施来限制网页访问。下面为各位企业管理者介绍五个操作简单、效果显著的电脑禁止访问特定网页/网站的方法,即便是技术小白也能轻松上手!1.利用......
  • 【读书笔记-《30天自制操作系统》-16】Day17
    本篇内容开始进入一个新的主题——命令行,这是一个操作系统很基本的功能。本篇中首先实现命令行窗口的显示,做到能切换到窗口以及实现向窗口输入内容。接下来在之前键盘输入的基础上,增加对符号以及大小写字母的输入。最后再加入对其他锁定键的支持。1.创建命令行窗口与窗口......
  • PDF标准详解(四)——图形操作符
    上一节,我们了解了PDF中cm操作符,它是定义变换矩阵的。同时也了解到re是创建一个矩阵的。上一节也说过,它用来构建一个路径,具体什么是路径,路径有什么作用呢?这些将在本节给出解释图形操作符是用来在pdf中构建内容并输出到相关设备上进行显示的。pdf中我们能看到的内容几乎都是由图形......
  • [Linux][防火墙]Centos7 防火墙相关操作以及 添加开放端口
    1、firewalld的基本使用启动:     systemctl   startfirewalld查看状态: systemctl   statusfirewalld 停止:    systemctl   disablefirewalld禁用:     systemctl   stopfirewalld2.systemctl是CentOS7的服务管理......
  • jQuery常用功能
     在jQuery中,添加新元素到DOM(文档对象模型)中通常使用几种不同的方法,这些方法让能够将HTML内容、文本、jQuery对象或DOM元素插入到页面上的指定位置。以下是一些常用的方法:1..append()和.appendTo().append(content):向每个匹配的元素内部追加内容。.appendTo(target):将所有匹配的......
  • 6.科学计算模块Numpy(3)对ndarray数组的常用操作
    引言众所周知,numpy能作为python中最受欢迎的数据处理模块,脱离不了它最核心的部件——ndarray数组。那么,我们今天就来了解一下numpy中对ndarray的常用操作。通过阅读本篇博客你可以:1.掌握ndarray数组的切片和copy2.学会如何改变ndarray的数组维度3.掌握数组的拼接一、ndar......
  • react16之前的虚拟dom数据结构简单简介
    在react16之前的版本中,虚拟dom节点的数据结构看起来大致如下constVitrualDom={type:'div',props:{class:'title'},children:[{type:'span',children:'HelloConardLi'},{type:'ul',......
  • MySQL 字符串操作详解和案例示范
    MySQL字符串操作详解MySQL提供了丰富的字符串操作函数,能够对这些字符串进行截取、定位、替换等操作。本文将详细讲解MySQL中的字符串操作函数,包括SUBSTRING()、SUBSTR()、LEFT()、RIGHT()、LOCATE()、POSITION()、FIND_IN_SET()、ELT()、INSERT()和REPLACE(),并分析......
  • jQuery中的大于等于(>=)操作符使用技巧
    jQuery中的大于等于(>=)操作符使用技巧在jQuery中,常常需要对元素的某个属性或数值进行比较,判断是否大于等于某个特定的值。在这种情况下,使用大于等于(>=)操作符是非常常见的。本文将介绍如何在jQuery中使用大于等于操作符的技巧,帮助您更好地进行数据处理和交互操作。基本语法大于等于(>=......
  • 【操作系统】进程同步之共享内存
    进程的线程共享进程资源,而进程共享计算机资源。在某种程度上,多进程是共享物理内存的。由于操作系统的进程管理,不同的进程有自己独立的内存空间,互不干扰。但是共享内存可以打破这个限制。共享内存允许不相关的进程访问同一片物理内存。共享内存是两个进程之间共享和传递数......