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. 【笔记】Python基础六：模块module介绍及常用模块

    一,module模块和包的介绍 1,在Python中,一个.py文件就称之为一个模块(Module). 2,使用模块的好处? 最大的好处是大大提高了代码的可维护性 其次,编写代码不必从零开始,我们编写 ...

  2. 【练习】Python第一，二次

    练习一 1,执行Python脚本的两种方式 a,Python解释器 b,Python  1.py 2,简述位和字节的关系 一个字节等于8位 3,简述ascii,unicode,utf-8,gbk的关系 ...

  3. Debian如何永久添加静态路由

    在RedHat(RHEL)/CentOS/Fedora Linux环境永久添加静态路由通常是写在诸如/etc/sysconfig/network-scripts/route-eth0这些文件里.在De ...

  4. FM(Factorization Machines)模型详解

    优点 FM模型可以在非常稀疏的数据中进行合理的参数估计,而SVM做不到这点 在FM模型的复杂度是线性的,优化效果很好,而且不需要像SVM一样依赖于支持向量. FM是一个通用模型,它可以用于任何特征为实 ...

  5. shell中脚本调试----学习

    1.使用dos2unix命令处理在windows下开发的脚本 将windows下编辑的脚本放置到linux下执行的情况如下: [root@ks ~]# cat -v nginx.sh #!/bin/b ...

  6. 控制台 console.write 中文为问号

    原因: 因为你当前环境代码页是437,是美国英语的字符编码 解决方式: 你把你环境设置成936就是简体中文字符编码环境了 Console.OutputEncoding = Encoding.GetEn ...

  7. 【java-console】如何双击运行可执行jar包及遇到依赖dll报错问题的解决办法

    如何配置双击运行可执行jar包的步骤,请移步到   这里   查看具体的操作,此处不再介绍. 本文主要解决如何处理依赖dll报错的问题解决办法. 我有一个jar包可执行文件运行需要依赖第三方的dll文 ...

  8. database锁实现

    单独创建一张表存放获取锁所需的key和value,key值保持唯一,value从0开始按1递增,在代码中用私有成员变量ConcurrentHashMap存储每个key value值,初始化时每个线程的 ...

  9. CentOS7 Failed to start LSB: Bring up/down解决方法

    刚刚装好的虚拟机突然不能上网了,报错很诡异,具体报错如下: /etc/init.d/network restart Restarting network (via systemctl):  Job f ...

  10. BZOJ1058或洛谷1110 [ZJOI2007]报表统计

    BZOJ原题链接 洛谷原题链接 STL 本题可以直接使用\(\mathtt{STL\ multiset}\)水过去. 因为本题插入数的操作实际上就是将原数列分为\(n\)段,在每一段的末尾插入数,所以 ...