1.插入动作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档的插入操作</title> <script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
$(function () { //内部插入
//给目标元素插入子元素 //在目标元素内部前插入子元素
//两种方式:prepend和prependTo
var fatherTag = $("#edu");
fatherTag.prepend("<option value = '硕士'>硕士</option>");
$("<option value='学前班'>学前班</option>").prependTo(fatherTag); //在目标元素内部后插入子元素
//两种方式:append和appendTo
fatherTag.append("<option value='硕士'>硕士</option>");
$("<option value='学前班'>学前班</option>").appendTo(fatherTag); //外部插入
//给目标元素插入兄弟元素 //在目标元素前面插入兄弟元素
var brotherTag01 = $("#edu option:first"); //两种方式:before和insertBefore
brotherTag01.before("<option value='学前班'>学前班</option>");
$("<option value='硕士'>硕士</option>").insertBefore(brotherTag01); //在目标元素后插入兄弟元素
var brotherTag02 = $("#edu option:last"); //两种方式:after和insertAfter
brotherTag02.after("<option value='学前班'>学前班</option>");
$("<option value='硕士'>硕士</option>").insertAfter(brotherTag02);
})
</script> </head>
<body>
<select id="edu">
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="大学">大学</option>
</select>
</body>
</html>

2.删除动作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除文档标签</title> <script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
$(function () {
//清空子标签
// var fatherTag = $("#d1");
// fatherTag.empty(); //删除标签,同时删除点击事件
var pTag = $("p");
document.getElementById("d1").onclick = function () {
alert("d1");
} //删除自身
var returnP = pTag.remove(); //删除目标标签中相关的class或ID
$("p").remove("#p1"); //删除标签,同时不删除点击事件
var spanTag = $("span");
spanTag.click(function () {
alert("span");
}); //删除自身
var returnSpan = spanTag.detach(); //删除目标标签中相关的class或ID
$("div").detach("#d1");
            $("#d2").append(returnSpan);
})
</script> </head>
<body>
<div id="d1">
<p id="p1" class="aa">AAA</p>
<p id="p2" class="aa">DDD</p> <span>BBB</span>
</div> <div id="d2">CCC</div>
</body>
</html>

remove()和detach()返回值都是jQuery对象

3.克隆动作和替换动作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆标签和替换标签</title> <script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
$(function () { //获得一个克隆对象
var pFirst = $("#d1 p:first"); var pClone = pFirst.clone(); //替换目标对象
//替换单个对象
var spanFirst = $("#d2 span:first");
spanFirst.replaceWith(pClone); //替换多个对象,也可用来替换单个对象
var spans = $("#d2 span");
pClone.replaceAll(spans); var spanSecond = $("#d2 span:last");
spanSecond.replaceWith("<p>CCC</p>");
})
</script>
</head>
<body> <div id="d1">
<p>
<a href="#">p1</a>
</p>
<p>
p2
</p>
</div> <div id="d2">
<span>span1</span>
<span>span2</span>
</div>
</body>
</html>

有的时候不需要纠结传递的参数是否为jQuery对象,只要所传递的参数能够转换成jQuery对象的话,一般就可以作为参数传递给jQuery对象的方法.

Jquery操作文档标签的更多相关文章

  1. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  2. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  3. python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  4. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  5. jQuery 的文档操作

    在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...

  6. JQuery DOM操作(属性操作/样式操作/文档过滤)

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  7. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  8. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  9. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux 标准输入输出、错误输出、重定向标准输出

    再来看看 >& 操作符: 重定向操作符 描述 > 将命令输出写入到文件或设备(如打印机),而不是命令提示符窗口或句柄. < 从文件而不是从键盘或句柄读入命令输入. >& ...

  2. 使用MagickNet编辑图片

            ImageMagick是一个免费的创建.编辑.合成图片的软件.它可以读取.转换.写入多种格式的图片.图片切割.颜色替换.各种效果的应用,图片的旋转.组合,文本,直线,多边形,椭圆,曲线 ...

  3. python第一周语言基础

    控制语句 if语句,当条件成立时运行语句块.经常与else, elif(相当于else if) 配合使用. for语句,遍历列表.字符串.字典.集合等迭代器,依次处理迭代器中的每个元素. while语 ...

  4. Java集合中List,Set以及Map等集合体系详解

    转载请注明出处:Java集合中List,Set以及Map等集合体系详解(史上最全) 概述: List , Set, Map都是接口,前两个继承至collection接口,Map为独立接口 Set下有H ...

  5. 验证当前启动APP的Package 和 Activity

    1. 打开手机USB 调试开关 2. 执行: adb devices 3.启动你的测试APP (如手机QQ) 4.执行:adb shell dumpsys window |findstr mCurre ...

  6. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  7. mycat使用之MySQL单库分表及均分数据

    转载自 https://blog.csdn.net/smilefyx/article/details/72810531 1.首先在Mycat官网下载安装包,这里就以最新的1.6版本为例,下载地址为:  ...

  8. 有关Lambda的一些思考

    问题: What do lambda expressions do? Can we write all functions as lambda expressions? In what cases a ...

  9. CentOS7.2 1511部署RabbitMQ

    一.安装RabbitMQ依赖的的Erlang最小支持包(当然也可以安装完整的Erlang) 1.下载RabbitMQ的Erlang最小支持包源文件 git clone https://github.c ...

  10. Unity正交模式摄像机与屏幕适配的方法

    public class CameraAuto : MonoBehaviour { float fDefaultRatio = 720.0f / 1280.0f;//预先设定屏幕大小1280*720 ...