jq的dom操作
代码可以在该网址测试：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操作的更多相关文章
- jQuery下拉框联动(JQ遍历&JQ中DOM操作)
1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...
- vue怎么不通过dom操作获取dom节点
今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
- 第25篇 jQuer快速学习（上）---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- 在没有DOM操作的日子里，我是怎么熬过来的（上）
前言 在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码.至于我为何要这么做,请听闰土娓娓道来.前几年我还在想,假如有一天,前端世界里不能再直接操作dom了,我该怎么办?没想到 ...
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
随机推荐
- 解决python解析文件时输出乱码
首先获取到json模块,encoding指定文件编码utf-8,errors报错时忽略错误,print()输出结果看看是否有问题. # -*- coding: utf-8 -*- import jso ...
- Ubuntu下MySQL报错：ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
在Ubuntu下 想要登录mysql数据库 root@JD:~# mysql -uroot -p 报错 ERROR 1045 (28000): Access denied for user 'root ...
- 第一篇-Git基础学习
学习网址: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013758410 ...
- 第九节、人脸检测之Haar分类器
人脸检测属于计算机视觉的范畴,早期人们的主要研究方向是人脸识别,即根据人脸来识别人物的身份,后来在复杂背景下的人脸检测需求越来越大,人脸检测也逐渐作为一个单独的研究方向发展起来. 目前人脸检测的方法主 ...
- zuul的学习
1.zuul的介绍 https://blog.csdn.net/tianyaleixiaowu/article/details/78083269
- C++学习之回调函数
回调函数: 通过函数指针进行调用的函数. 回调函数不是由实现方进行调用,而是将函数指针传入,在特殊条件或者状态下进行触发调用. 譬如: 在自定义按钮控件时,当点击按钮,触发点击事件,调用指定函数. 注 ...
- 【强大知名的CAD绘图工具】AutoCAD 2019 for Mac
以上图片来源于互联网分享,如涉及版权问题请联系作者删除. 文章素材来源:风云社区(www.scoee.com) 下载地址:风云社区(www.scoee.com) [简介] AutoCAD 2019 ...
- Elastic Stack之ElasticSearch分布式集群yum方式搭建
Elastic Stack之ElasticSearch分布式集群yum方式搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.搜索引擎及Lucene基本概念 1>.什么 ...
- Python中的格式化输出
百分号格式化输出 百分号默认右对齐 %s 字符串 (采用str()的显示) %r 字符串 (采用repr()的显示) %c 单个字符 %b 二进制整数 %d 十进制整数 %i 十进制整数 %o 八进制 ...
- Kafka技术内幕 读书笔记之（三） 生产者——消费者：高级API和低级API——基础知识
1. 使用消费组实现消息队列的两种模式 分布式的消息系统Kafka支持多个生产者和多个消费者,生产者可以将消息发布到集群中不同节点的不同分区上:消费者也可以消费集群中多个节点的多个分区上的消息 . 写 ...