测开之路一百零三:jquery元素和标签的插入与删除
标签内插入
标签外插入
给标签加标签
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素和标签插入</title>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>元素和标签插入</h1>
<button id="btn">操作</button>
<button id="btn2">操作2</button>
<div class="container">
<p>第一个段落</p>
<p>第二个段落</p>
<span>这是span标签</span>
</div> </body>
</html>
<script>
$(document).ready(function () {
//给标签加标签
$("#btn2").click(function () {
$("span").wrap("<strong style='color: blue'></strong>")
}); $("#btn").click(function () { // //标签外
// $('p').before('<a herf="#">这是前面插入</a>>'); //在前面插入
// $('p').after('<a herf="#">这是后面插入</a>>'); //在后面插入 // //标签内
// $('p').prepend('<a herf="#">这是前面插入</a>>'); //在前面插入
// $('p').append('<a herf="#">这是后面插入</a>>'); //在后面插入 }); });
</script>
删除
清空内容,保留标签
删除标签和内容
删除两边的标签
删除属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>删除元素</h1>
<button id="btn">操作</button>
<div class="container">
<p style="color: blue">这是div标签下的第p标签</p>
</div>
<strong><a href="https://www.baidu.com/">这是外侧有strong标签的a标签</a></strong> </body>
</html>
<script>
$(document).ready(function () {
$("#btn").click(function () {
//删除属性
$("p").removeAttr("style"); // //删除两边的标签
// $("a").unwrap(); // //删除标签和内容
// $("p").remove(); // //点击时清空内容,保留标签
// $(".container").empty(); });
});
</script>
测开之路一百零三:jquery元素和标签的插入与删除的更多相关文章
- 测开之路一百零二:jquery元素操作
jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...
- 测开之路一百零四:jquery操作样式
jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...
- 测开之路一百零一:jquery文字特效、动画、方法链
文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...
- 测开之路一百零六:bootstrap布局
可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...
- 测开之路一百零九:bootstrap列表
bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...
- 测开之路一百零七:bootstrap排版
引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...
- 测开之路一百零五:bootstrap的两种引用方式
一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...
- 测开之路一百五十二:基于jquery的ajax实现之load、get、ajax
ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...
- 测开之路一百三十八:会话管理之session
session管理和使用,需要用到flask的session模块和设置安全码:app.secret_key 比如列表页和编辑功能只能给admin用 列表页 编辑页 添加session 登录成功时,把u ...
随机推荐
- django2.0url的变动
WARNINGS:?: (urls.W001) Your URL pattern '^$' uses include with a route ending with a '$'. Remove th ...
- Springboot+Mybatis AOP注解动态切换数据源
在开发中因需求在项目中需要实现多数据源(虽然项目框架是SpringCloud,但是因其中只是单独的查询操作,觉得没必要开发一个项目,所以采用多数据源来进行实现) 1.在配置文件中创建多个数据连接配置 ...
- SEM和SEO的区别?
https://www.zhihu.com/question/20307058 SEM在营销中扮演的角色:进攻 搜索引擎营销,即SEM(Search Engine Marketing),是基于搜索引擎 ...
- Hibernate:基于HQL实现数据查询
HQL: hibernate query language(hibernate特有的查询语言) hql是基于对象的查询语言,其语法与sql类似,但是他和sql的区别在于sql是面向表和字段的查询,而 ...
- PAT Basic 1036 跟奥巴马一起编程 (15 分)
美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014 年底,为庆祝“计算机科学教育周”正式启动,奥巴马编写了很简单的计算机代码:在屏幕上画一个 ...
- windows用ffmpeg实现视频剪切
1.安装ffmpeg 从官网下载适合自己版本的FFmpeg,网址是http://ffmpeg.org/download.html,在get the packages中点击windows builds ...
- zookeeper之四 Curator客户端的使用
Curator是一个开源的zookeeper客户端,解决了很多zookeeper原生客户端非常底层的细节开发工作,如连接重试.反复注册watcher等. public class CuratorOpe ...
- Python(1) 整型与浮动型
整型与浮动型 整数/浮动数=浮点型整数/整数 = 浮点型 例如:>>> type(1/1)<class 'float'>>>> type(1/1.0)& ...
- ubuntu16.04 开启FTP服务
配置ftp 1.安装 vsftpd服务器 sudo apt install vsftpd 2.创建一个ftp文件夹 (可以跳过) sudo mkdir /home/ftp 3.新建ftp用户,并指向它 ...
- 对postcss-plugin-px2rem的研究
1.安装postcss-plugin-px2rem 2.配置 css: { loaderOptions: { postcss: { plugins: [ require('postcss-plugin ...