代码可以在该网址测试: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. jquery基本语法(一)

    https://www.cnblogs.com/haiyan123/p/7657151.html 一.jQuery基础1.为什么要用jquery?    写起来简单,省事,开发效率高,兼容性好2.什么 ...

  2. id选择器为变量时

    使用angularjs或者freemarker的同学基本都接触过一个问题:当使用list遍历数组值显示在页面,并要对所显示的数值进行操作时,如何选取数值所在标签? 以下是一个把地址id转为中文地址的函 ...

  3. hdu 2973"YAPTCHA"(威尔逊定理)

    传送门 题意: 给出自然数 n,计算出 Sn 的值,其中 [ x ]表示不大于 x 的最大整数. 题解: 根据威尔逊定理,如果 p 为素数,那么 (p-1)! ≡ -1(mod p),即 (p-1)! ...

  4. Windows Server 2003 添加“Resin”到“服务”出错

    将“Resin”添加到[服务] 进入安装目录,执行 httpd -install 从[服务]移除 执行 httpd -remove ---------------------------------- ...

  5. linux c 编程 ------ 头文件及其作用

    #include <stdio.h> printf #include <sys/types.h> 基本系统数据类型.系统的基本数据类型在32编译环境中保持为32位值,在64编译 ...

  6. MySql 5.7.23安装

    1.首先上MySql的官网下载  https://dev.mysql.com/downloads/mysql/ 选择源码包: 1. 新建/usr/local/src目录,保存下载的各类安装包 1 mk ...

  7. 2017-12-15python全栈9期第二天第四节之格式化输出%s和用户交互个人简历模板

    #!/user/bin/python# -*- coding:utf-8 -*-name = input('姓名:')age = input('年龄:')job = input('工作:')hobbi ...

  8. PSi-Population Stability Index (PSI)

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...

  9. 新硬盘挂载-fdisk+mount案例实操

    新硬盘挂载-fdisk+mount案例实操 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 现在很多服务器都支持热插拔了,当有新的硬盘插入到服务器上我们需要将其分区,格式化,然后挂载 ...

  10. centos系统中php7安装memcached 扩展

    #编译安装php-7.1.16 #wget http://cn2.php.net/distributions/php-7.1.16.tar.gz#tar -zxvf php-7.1.16.tar.gz ...