<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<div class="box">

    <span>hello jq</span>

</div>

</body>

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

<script>

    // 创建并插入

     console.log($("div"))

//

//    //创建：

     var d = $("<div>");

//

//    //body被div插入了：

     $("body").append(d);

//

//    // 把div插入到body

     d.appendTo($("body"));

//

     $("body").prepend(d); //插到最上面。body下面的第一个

     d.prependTo($("body"));//同上

     $("body").before(d);   //插到body的前面，同级

     $("body").after(d) ; //插到body的后面

    // 删除

     $(".box").remove(); //删除box

     $(".box").empty();   //box里面的元素设置为空

    // 改

     $(".box").replaceWith("<p class='"+ $(".box").attr("class") +"'>"+ $(".box").html() +"</p>"); //将box改为p标签，若想p标签里面的内容与box一样，就需要进行字符串拼接

    // 查 就是选择器

</script>

</html>

JQ-DOM与元素的操作的更多相关文章

  1. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  2. Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）

    前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...

  3. Ajax基础（四）--dom元素简单操作

    1 //js对dom元素的操作 //添加dom元素 var param = document.createElement("p"); var node = document.cre ...

  4. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  5. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  6. 使用Dom解析器，操作XML里面的信息

    import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...

  7. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  8. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  9. jq选择子元素

    jq选择子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="h ...

  10. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

随机推荐

  1. turtle 画照片

    # -*- coding: utf-8 -*- import turtle as t import cv2 def draw_img(img_path, scale=1): ""& ...

  2. SQL server——基础篇之数据完整性

    定义:保证数据库中的数据在逻辑上的一致性.正确性和可靠性. 作用:防止无效数据或错误数据进入数据库 数据完整性包括:实体完整性.域完整性和参照完整性 实体完整性 规定表的每一行记录在表中是唯一的 实体 ...

  3. Compose Modifier Clip 圆角

    Row( modifier = Modifier .fillMaxWidth() .padding(20.dp) // 圆角 .clip(RoundedCornerShape(15.dp)) .cli ...

  4. UE5农场项目小功能(1)-砍树

    砍树功能效果的实现 ​ 在UE中想做一个砍树的功能,B站上没找到什么教程,最后在油管上找到个视频并跟着实现了,一共设计到三个蓝图和一个什么也没写的蓝图接口,下面介绍下步骤. 1.角色蓝图的部分 人物这 ...

  5. 修改AXI UART D16550 FIFO深度的过程记录

    仅限于AXI UART 16550 v. 2.0,其他版本可能存在差异,经过实际测试,可以将fifo深度从默认的16成功修改为32.128和256.参考了两篇帖子中提到的方法,分别是修改AXI UAR ...

  6. 关于IllegalMonitorStateException异常的解释之一

    注意 在同步控制方法或同步控制块里调用wait(),notify()和notifyAll().如果在非同步控制方法里调用这些方法,程序能通过编译,但运行的时候,将得到IllegalMonitorSta ...

  7. POJ3723 Conscription 题解

    start: 2021-08-04 16:56:50 题目链接: http://poj.org/problem?id=3723 题目内容: Description Windy has a countr ...

  8. 调试以及Linq查询

    1.调试的步骤 调试快捷键: F10逐过程(不会进入函数内部,直接获取函数运行结果) F11逐语句(会进入函数) F5执行,如果调试中多个断点,按F5执行到下一个断点 出现黄色箭头表示执行到这一句,但 ...

  9. renren-fast-vue人人开源前端项目搭建保姆级教程

    1.从gitee上clone项目 git clone https://gitee.com/renrenio/renren-fast-vue.git 2.准备好python环境 需要有Python2以上 ...

  10. AD使用积累 - 板子上开孔的方法

    有时候画板子时需要需要在板子上开一些槽孔,可以参考如下两种方法: 第一种方法:封闭曲线转换为槽孔. 1.在机械层画一个封闭图形或者画一根线: 2.选中这个图形或线,选择工具 - 转换 - 以选中的元素 ...