代码可以在该网址测试：www.w3school.com.cn/tiy/t.asp?f=jquery_manipulation_detach_move

attr

使用函数来设置属性/值：函数参数为选择器的 index 值和当前属性值。

$(selector).attr(attribute,function(index,oldvalue))

示例代码

$(document).ready(function(){

  $("button").click(function(){

    $("img").attr("width",function(n,v){

      return v-50;

    });

  });

});

设置多个属性/值对：

$(document).ready(function(){

  $("button").click(function(){

    $("img").attr({width:"50",height:"80"});

  });

});

detach和remove：移除元素内容

detach() 方法移除匹配的元素，包括所有文本和子节点。

方法返回移除的元素，会保留该元素所有绑定的事件、附加的数据，因而可以在将来再使用这些匹配的元素。这一点与 remove() 不同，remove不会保留事件和数据，只保留元素。

示例代码：

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("body").append($("p").detach());

  });

  $('p').click(function(){alert(1)})

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button>移动 p 元素</button>

</body>

</html>

hasClass

检查被选元素是否包含指定的 class。

<p class="intro abc ef">This is a paragraph.</p>

检查是否有指定的几个class：结果为true

$(document).ready(function(){

  $("button").click(function(){

    alert($("p:first").hasClass("abc ef"));

  });

});

html

获取：返回第一个匹配元素的内容。

设置：使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

使用函数来设置元素内容：

$(selector).html(function(index,oldcontent))

示例代码：

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("p").html(function(n){

    return "这个 p 元素的 index 是：" + n;

    });

  });

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

<button>改变 p 元素的内容</button>

</body>

</html>

操作结果：

几个穿插元素或者内容方法的区别

添加的内容可包含html标签的：

append（appendTo）：向匹配元素集合中的每个元素结尾插入由参数指定的内容。

before：在每个匹配的元素之前插入内容。

prepend（prependTo）：向匹配元素集合中的每个元素开头插入由参数指定的内容

操作元素与元素之间的位置，如果该方法用于已有元素，这些元素会被从当前位置移走“

insertAfter：把匹配的元素插入到另一个指定的元素集合的后面。

insertBefore：把匹配的元素插入到另一个指定的元素集合的前面。

$("button").click(function(){

  $("<span>Hello world!</span>").insertAfter("p");

});

toggleClass：对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。

$(selector).toggleClass(class,switch)

使用函数来切换类：参数为选择器的 index 位置和当前的类。

$(selector).toggleClass(function(index,class),switch)

wrap和wrapAll：给元素增加父级标签

每个P标签外面包裹一个div

$(".btn1").click(function(){

   $("p").wrap("<div></div>");

});

用一个div包裹所有p标签

$(document).ready(function(){

  $(".btn1").click(function(){

    $("p").wrapAll("<div></div>");

  });

});

jq的dom操作的更多相关文章

  1. jQuery下拉框联动(JQ遍历&JQ中DOM操作)

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  2. vue怎么不通过dom操作获取dom节点

    今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...

  3. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  4. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  5. 第25篇 jQuer快速学习（上）---选择器和DOM操作

    这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...

  6. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  7. 在没有DOM操作的日子里，我是怎么熬过来的（上）

    前言 在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码.至于我为何要这么做,请听闰土娓娓道来.前几年我还在想,假如有一天,前端世界里不能再直接操作dom了,我该怎么办?没想到 ...

  8. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  9. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

随机推荐

  1. Linux 系统设置sh文件开机自启动

    工作中有一个linux下的服务需要启动,但是机器总是断电,导致需要反复启动,找了一下开机自启动的方法,解决了这个问题.Linux设置开机自启动非常简单,只要找到rc.local文件,将你需要自启动的文 ...

  2. Day032--Python--操作系统, process进程

    多道技术背景: 提高工作效率(充分利用I/O阻塞的时间)    (I: input, O: output) 同时执行多个任务 多道技术: 空间复用: 充分利用内存空间 时间复用: 充分利用I/O阻塞时 ...

  3. diff和patch

    diff -u:the unified format会将不同的地方放在一起,紧凑易读 . diff original.txt updated.txt c表示在original文件中的m,n行的内容将要 ...

  4. 快速入门Treap（代码实现）

    学习数据结构对我来说真的相当困难,网上讲\(Treap\)的我也看不太懂,前前后后花了大概六天才把\(Treap\)学会.为了避免再次忘记,这里我整理一下\(Treap\)的基础知识和模板. 阅读此文 ...

  5. 看我如何未授权登陆某APP任意用户（token泄露实例）

    转载:https://www.nosafe.org/thread-333-1-1.html  先来看看这个.   首先,我在登陆时候截取返回包修改id值是无效的,因为有一个token验证,经过多次登陆 ...

  6. Jqgrid pager 关于“local” dataType 动态加载数据分页的研究（没好用的研究结果）

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. DotNet 资源大全中文版

    https://blog.csdn.net/fhzh520/article/details/52637545 目录 算法与数据结构(Algorithms and Data structures) 应用 ...

  8. Git(管理修改)

    现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行,这就是一个修改 ...

  9. Storm基本原理概念及基本使用

    1. 背景介绍 1.1 离线计算是什么 离线计算:批量获取数据.批量传输数据.周期性批量计算数据.数据展示: 代表技术:Sqoop批量导入数据.HDFS批量存储数据.MapReduce批量计算数据.H ...

  10. flask 文件转为pdf并添加二维码

    背景: 宝安区需求,企业会下载表格,打印后填报.填报后收上表格,统一录入PDA.因为某台PDA只能录某个地方的表格,所以他们希望纸质表上有个二维码,扫描出现填报公司的一些信息,以及统计(好像是这样,没 ...