<!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">
    <script src="../server/jquery-3.4.1.js"></script>
    <title>Document</title>
</head>
<body>
    <span>A</span>
    <div id="demoID">
        1111 2222 3333
    </div>
    <span>B</span>
    <script>
        /* DOM操作 */
        /* 获取：选择器[基本|层级|筛选|父子...] */
        /* 设置：样式[css() addClass() removeClass() hasClass() toggleClass()] */
        /* 设置：内容[text() html()] */
        /* 创建： */
        /* 插入 */
        /* [+] A.append(B) 把B插入到A内容的后面==B.appendTo(A) */
        /* [+] A.prepend(B) 把B插入到A内容的前面==B.prependTo(A) */
        /* [-] A.insertAfter(B) 把A这个标签插入到B标签的后面*/
        /* [-] A.insertBefore(B) 把A这个标签插入到B标签的前面*/
        // 删除 remove()
        // 清空：empty()
        // 复制 clone(true|false)
        /* 原生写法 */
        let oDiv = document.createElement("div");
        oDiv.innerText = "我是div";
        oDiv.classList.add("box");
        console.log(oDiv);
        /* 原生：appendChild(ele) */
        // let jq = $("<div></div>");
        // jq.text("我是div");
        // jq.addClass("box");
        // console.log(jq[0]);
        //jQuery写法
        let jq = $("<div class='box'>我的div</div>");
        console.log([0]);
    </script>
</body>
</html>

jQuery操作DOM的相关方法的更多相关文章

  1. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  4. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  5. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  6. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  7. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

  8. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  9. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

随机推荐

  1. 操作系统-IO管理和磁盘调度

    I/O设备 IO设备的类型 分为三类:人机交互类外部设备:打印机.显示器.鼠标.键盘等等.这类设备数据交换速度相对较慢,通常是以字节为单位进行数据交换的 存储设备:用于存储程序和数据的设备,如磁盘.磁 ...

  2. OpenFlow(OVS)下的“路由技术”

    前言 熟悉这款设备的同学,应该也快到不惑之年了吧!这应该是Cisco最古老的路由器了.上个世纪80年代至今,路由交换技术不断发展,但是在这波澜壮阔的变化之中,总有一些东西在嘈杂的机房内闪闪发光,像极了 ...

  3. 有史以来最全的CMD命令

    说在前面的话: 本篇是博主通过网上查找整理而成的,且都是亲测可以的一些cmd命令,可以说是很齐全了,当然,如果有不可以运行的代码,欢迎大家留言指出,我会不断完善的,谢谢. CMD作用: 掌握一些基本的 ...

  4. 计算机思维的逻辑基础是什么？ & 计算思维

    l  计算机思维的逻辑基础: 计算机思维是指人们操作计算机时,计算机行使特定功能的运作方式. 逻辑基础则是指支撑事物运作的基本法则. 因而,计算机思维的逻辑基础可以理解为,计算机在行使特定功能时,其运 ...

  5. VUE实现Studio管理后台（十三）：按钮点选输入控件，input输入框系列

    按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件.先看效果: 根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码: { label:'标题', val ...

  6. python框架Django实战商城项目之用户模块创建

    创建用户APP 整个项目会存在多个应用,需要存放在一个单独的文件包了,所以新建一个apps目录,管理所有子应用. 在apps包目录下穿件users应用 python ../../manage.py s ...

  7. HUD Is It A Tree?！！！！！）

    这个是一个非常恶心的题,刚开始以为是POJ的题,结果发现不是,一直都是超时.上题吧 A tree is a well-known data structure that is either empty ...

  8. git涨姿势（一）

    今天遇到了一个git冲突问题,解决冲突方案我是当然知道的,就是本地不知道何时自己傻不拉几的新建了一个relese分支,而remote是没有release分支的,需要拉取的是release/V1.4.2 ...

  9. vue中数据请求的三种方法

    注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios ...

  10. docker学习之路

    环境 : ubuntu 16.4 下载docker 首先使用命令行下载 docker wget -qO- https://get.docker.com/ | sh 启动 下载完成之后进行一个启动,但是 ...