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. jsp数据交互（一），九大内置对象

    九大内置对象 九大内置对象 内置对象 类型 说明 作用域 request javax.servlet.ServletRequest 请求对象——在 一次请求/一个Request请求周期 中传递数据,请 ...

  2. 什么是java？

    Java是一种软件技术  是一种由美国SUN计算机公司(Sun Microsystems, Inc.)所研究而成的语言  是一种为 Internet发展的计算机语言  是一种使网页(Web Page) ...

  3. linux下内存泄露检测工具Valgrind介绍

    目前在linux开发一个分析实时路况的应用程序,在联合测试中发现程序存在内存泄露的情况. 这下着急了,马上就要上线了,还好发现了一款Valgrind工具,完美的解决了内存泄露的问题. 推荐大家可以使用 ...

  4. How to upgrade Subversion on OSX

    How to upgrade Subversion on OSX http://andowebsit.es/blog/noteslog.com/post/how-to-upgrade-subversi ...

  5. #include <vector>用法之我见

    vector是一种顺序容器,事实上和数组差不多,但它比数组更优越.一般来说数组不能动态拓展,(何为动态拓展,即是说如果你知道你要存的数据的个数,你定义的存储数据的数组大小也就决定了,但是若你事先不知道 ...

  6. 用Python3实现表达式求值

    一.题目描述 请用 python3 编写一个计算器的控制台程序,支持加减乘除.乘方.括号.小数点,运算符优先级为括号>乘方>乘除>加减,同级别运算按照从左向右的顺序计算. 二.输入描 ...

  7. ZOJ2604-DP

    递推式并不知自己推出来的,用来纪念一下学会了java的函数用法... 最后5分钟的时候,大姐头直接告诉我打表,但是我当场就蒙了,我怎么会用java打表(其实自己脑中想的就是要输出到文件中然后生成数组打 ...

  8. Java随笔四---Java异常

    1.throw语句:Java编译器在执行throw语句时,会立即停止常规的程序执行,开始寻找能够捕获或处理异常的异常处理程序: 2.异常处理程序使用try/catch/finally编写. 3.如果当 ...

  9. 【LeetCode OJ】Maximum Depth of Binary Tree

    Problem Link: https://oj.leetcode.com/problems/maximum-depth-of-binary-tree/ Simply BFS from root an ...

  10. See you~_树状数组

    Problem Description Now I am leaving hust acm. In the past two and half years, I learned so many kno ...