【jQuery】阶段(插入、复制、替换、删除)
<p>你好!</p>
你最喜欢的水果是?
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
$(document).ready(function(){
//几种添加节点的方法
$("p").append("<b>你好吗?</b>");//向p元素中追加<b>
$("<b>你好吗?</b>").appendTo("p");//将<b>追加到p元素中
$("p").prepend("<b>你好吗?</b>");//向p中前置<b>
$("<b>你好吗?</b>").prependTo("p");//将<b>前置到p元素中
$("p").after("<b>你好吗?</b>");//向p元素后插入<b>
$("<b>你好吗?</b>").insertAfter("p");//将《b》插入到p元素后边
$("p").before("<b>你好吗?</b>");//在p元素之前添加<b>
$("<b>你好吗?</b>").insertBefore("p");//将<b>插入到p元素前面
//几种删除节点的方法
var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点
$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去
$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除
$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容
//复制节点
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件
});
//替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>");
});
【jQuery】阶段(插入、复制、替换、删除)的更多相关文章
- jQuery:节点(插入,复制,替换,删除)操作
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jquery插入,复制、替换和删除节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- jquery基础-包裹 替换 删除 复制
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 转载:vim的复制,删除,粘贴,块操作以及快速替换功能
掌握如下命令有什么好办法,我可以告诉你唯手熟尔!!多看多练对于VIM而言,复制,删除,粘贴的操作应该是非常多的.这次也做一个总结,关于处理VIM下的复制,删除,粘贴等操作.学会使用帮助文件,命令的帮助 ...
- jquery元素插入、删除、清空
1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...
- vi--文本编辑常用快捷键之复制-粘贴-替换-删除
这几天刚开始接触vi编辑器,慢慢开始熟悉vi,但是还是感觉诸多不便,比如说复制粘贴删除操作不能用鼠标总是感觉不自在,而且我一般习惯用方向键移动光标,更增加了操作的复杂度,今天在网上搜索了一下,vim编 ...
- JavaScript 对图像进行(追加,插入,替换,删除)
JavaScript 对图像进行(追加,插入,替换,删除) 本次所学内容: document.querySelector('.container') 这个是可以查找单个[id标签和class标签] d ...
- jquery元素插入、删除、清空、找父子级元素
1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...
- C++(十)— 字符串进行插入、替换、查找、删除操作、substr
1.C++中对字符串进行插入.替换.删除操作 #include<iostream> #include<algorithm> #include<stdio.h> # ...
随机推荐
- siteserver学习笔记
1.安装 安装前的准备工作 参考https://docs.siteserver.cn/getting-started/#/how-to-install-siteserver-cms官网的文档写的很详细 ...
- CentOS搭建KMS服务器
安装 使用命令: #CentOS,Redhat,Fedora等请选择CentOS脚本 wget https://raw.githubusercontent.com/dakkidaze/one-key- ...
- Win7无法将图标(Chrome谷歌浏览器更新后无法锁定也适用)锁定到任务栏解决办法
“将程序锁定到任务栏”是Windows 7中的一个非常有用的功能,它比之前的快速启动栏要来得简洁.但是我用了一段时间之后,发现“锁定到任务栏”这一个选项消失了,对图标点右键找不到这个图标,直接把图标拖 ...
- springboot微信支付,支付二维码生成
https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 微信扫码支付开发者文档,里面会有支付流程的教程 接口链接 URL地址:htt ...
- intellijidea课程 intellijidea神器使用技巧 5-2 localhistory
Ctrl shift A ==>localhistory ==> show history 查看文件本地历史记录(idea每次修改在本地会生成历史记录) Ctrl shift A == ...
- CSS基础必备盒模型及清除浮动
盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
- Android自定义控件 -- 带边框的TextView
使用xml实现边框 原来使用带边框的TextView时一般都是用XML定义来完成,在drawable目录中定义如下所示的xml文件: <?xml version="1.0" ...
- CSS 笔记之 CSS 选择器
/*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...
- u-boot分析(七)----内存初始化
u-boot分析(七) 上篇博文我们按照210的启动流程,分析到了时钟初始化,今天我们继续按照u-boot的启动流程对内存的初始化进行分析. 今天我们会用到的文档: 1. 2440芯片手 ...
- 微信小程序实现获得用户手机号
具体操作方法如下: 使用方法 需要将 <button> 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumb ...