append(content|fn) 向每个匹配的元素内部添加内容(元素内部)

　　appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部)

　　prepend(content) 向每个匹配元素内部前置内容，是向所有匹配元素内部前置内容的最好方法(元素内部)

　　prependTo(content) 把所有匹配的元素前置到另一个指定的元素集合中(元素内部)

　　after(content|fn) 在每个匹配的元素之后插入内容(元素外部)，$(A).after(B)的操作，把B插入到A后面

　　before(content|fn) 在每个匹配的元素之前插入内容(元素外部)

　　insertAfter(content) 把所有匹配的元素插入到插入到另一个指定的元素集合后面

　　empty() 删除所有匹配元素的子元素

　　remove([expr]) 删除所有匹配元素

HTM示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--HTML区域-->

    <b>好亮</b>

    <h1>第一个标题</h1>

    <img src="57eb.jpg">57eb.jgp

    <div class="nav-2014">nav-2014

        <div class="w">

            <div class="w-spacer"></div>

            <div class="categorys">

                <div class="dt" style="color: red;font-size: 25px">家用电器分类</div>

                <div class="dp" style="color: green;font-size: 12px;">家用电器价格</div>

                <img src="rB3.jpg">

            </div>

            <span class="hr">11</span>

            <div class="navitems-2014 chr1 chr2">

                <div id="treasure"></div>

                <span class="clr clr1"></span>

                <span class="chr"></span>

                男：<input type="checkbox" value="nan">

                女:<input type="checkbox"  value="nv">

                <input type="text" value="2">

                <input type="text" value="3">

            </div>

            <ul>

                <li>第一行</li>

                <li>第二行</li>

                <li>第三行</li>

                <li>第四行</li>

            </ul>

        </div>

    </div>

    <h2>第二个标题</h2>

    <p>第一段</p>

    <p>第二段</p>

</body>

</html>

　　jquery举例

    <script src="jquery-3.1.0.js"></script>

    <script>

//        向第一个p元素内部添加b标签

        $("p:first").append("<b>是红色</b>")

//        把最后一个p元素添加到li元素中

        $("p:last").appendTo("li")

//        向dt类元素内容前插入最后一个p元素内容

        $(".dt").prepend($("p:last"))

//        将第一个img元素插入到li元素前部

        $("li").prepend($("img")[0])

//        把dp元素插入到所有li元素前部

        $(".dp").prependTo($("li"))

//        向span元素内容后面插入b元素

        $("span").after("<b>insert after</b>")

//        before与之相似

//        将li的第一个元素插入到li的最后一个元素后面

        $("li:first").insertAfter($("li:last"))

//        insertBefore与insertAfter相反

//        删除ul元素的所有子节点

        $("ul").empty()

//        删除所有input元素

        $("input").remove()

//        删除所有div标签中类名为dt的元素,与remove功能一致？

        $("div").detach(".dt")

//        将第一个b元素复制后插入到类nav-2014的前面

        $("b:first").clone().prependTo(".nav-2014")

    </script>

　　

　　

　　

jquery之文档操作的更多相关文章

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

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

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

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

  3. jQuery 的文档操作

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

  4. （20）jQuery的文档操作（创建，添加、设置样式和删除等）

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...

  5. 前端jQuery之文档操作

    1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...

  6. jQuery的文档操作

    1.插入操作 一.父元素.append(子元素) 追加某元素 父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...

  7. jQuery系列（六）：jQuery的文档操作

    1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...

  8. 【JQuery】文档操作

    一.前言 接着上一章的内容,接着JQuery的学习 二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...

  9. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

随机推荐

  1. 微软Face API体验——人脸检测

    微软推出了全新REST API,现在可免费获取密钥,大家可以赶快申请!申请地址:https://cn.projectoxford.ai/subscription 看了网站的API介绍,忍不住赶快体验一 ...

  2. JAVAWEB学习总结 HttpServletResponse对象（一）

    Web服务器收到客户端(浏览器)的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象,和代表响应的response对象. request和response对象既然代表请求和响 ...

  3. xp下安装jdk8

    下载jdk8安装包,地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载7- ...

  4. Direct3D 10学习笔记（四）——Windows编程

    本篇将简单整理基本的Windows应用程序的实现,并作为创建Direct3D 10应用程序的铺垫.具体内容参照< Introduction to 3D Game Programming with ...

  5. 【搬砖】【Python数据分析】Pycharm中plot绘图不能显示出来

    最近在看<Python数据分析>这本书,而自己写代码一直用的是Pycharm,在练习的时候就碰到了plot()绘图不能显示出来的问题.网上翻了一下找到知乎上一篇回答,试了一下好像不行,而且 ...

  6. 第一章Android系统移植与驱动开发概述--读书笔记

    以前,初步学习过嵌入式Linux驱动开发的基础课程,对于驱动开发可以说是有了一点点微末的基础吧.首先我们要对Android嵌入式系统有一个初步的认识,Android系统发展到今天已经具备了完善的架构. ...

  7. C#面向接口编程详解（1）——思想基础

    我想,对于各位使用面向对象编程语言的程序员来说,“接口”这个名词一定不陌生,但是不知各位有没有这样的疑惑:接口有什么用途?它和抽象类有什么区别?能不能用抽象类代替接口呢?而且,作为程序员,一定经常听到 ...

  8. Python 基礎 - 淺copy補充說明

    在 import copy 這個模塊裡 基於第一個列表來做淺copy,實際上第二個列表裡的元素,是第一個列表的 引用. 接下來介紹 淺copy有三種方式可以使用 #!/usr/bin/env pyth ...

  9. C++模板元编程（C++ template metaprogramming）

    实验平台:Win7,VS2013 Community,GCC 4.8.3(在线版) 所谓元编程就是编写直接生成或操纵程序的程序,C++ 模板给 C++ 语言提供了元编程的能力,模板使 C++ 编程变得 ...

  10. 技海拾贝 - Java

    1. Java中的多线程 http://blog.csdn.net/luoweifu/article/details/46673975 Java中继承thread类与实现Runnable接口的区别 h ...