<!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. java ThreadPoolExecutor初探

    导读:线程池是开发中使用频率比较高的组件之一,但是又有多少人真正了解其内部机制呢. 关键词:线程池 前言 线程池是大家开发过程中使用频率比较高的组件之一,但是其内部原理又有多少人真正清楚呢.最近抽时间 ...

  2. Java和C++引用的区别

    Java的引用实际上是对指针的一个封装. C++的引用是变量的一个别名. Java的定义出来的变量(除了基本类型)其实就是一个引用,指向真正的对象. C++可以通过将引用传入函数,在函数内修改所引用的 ...

  3. 使用HBuilder开发移动APP：开发环境准备(转)

    一直想开发个APP玩玩的,但是作为一个PHP码农,需要新学习JAVA或者Object C,这也是一直没能实现这个目标的原因.但是现在HTML5+.APPCAN.apicloud很多工具利用前端技术就能 ...

  4. [LeetCode] 994. Rotting Oranges 腐烂的橘子

    题目: 思路: 每个腐烂的橘子都能将自己上下左右的新鲜橘子传染,像极了现在的肺炎... 如果格子中只有一个腐烂的橘子,那么这便是一个典型的层次遍历,第一个传染多个,称为第二层,第二层传染第三层 但这里 ...

  5. .NET异步程序设计之async&await

    目录 0.背景引入 1.async和await基本语法 2.异步方法的执行顺序 3.取消一个异步操作 4.同步和异步等待任务 5.异步操作中的异常处理 6.多线程和异步的区分 7. 在 .NET MV ...

  6. 前端小微团队的Gitlab实践

    疫情期间我感觉整个人懒散了不少,慢慢有意识要振作起来了,恢复到正常的节奏.最近团队代码库从Gerrit迁移到了Gitlab,为了让前端团队日常开发工作有条不紊,高效运转,开发历史可追溯,我也查阅和学习 ...

  7. 22 Specifications动态查询

    Specifications动态查询 有时我们在查询某个实体的时候,给定的条件是不固定的,这时就需要动态构建相应的查询语句,在Spring Data JPA中可以通过JpaSpecificationE ...

  8. 在Deepin系统上装Python 3.8遇到的那些坑

    - 作为一天时间在Deepin上都没装好Python的代表,我感觉有必要记录一下我自己的解决方法 坑1-- SSL/TLS 字样错误 "pip is configured wih locat ...

  9. django 从零开始 5 数据库模型创建

    进入应用项目下的models.py文件 自带一个导入的包 from django.db import models 使用这个包创建models模型 我这是要创建一个图站 ,所以模型设置并不复杂(路径配 ...

  10. 关于OSS不再维护的一些讨论

    FUSE for macOS 将不再维护 Fuse 是一款针对Mac OS的文件系统所开发的一款开源软件. 用于MacOS的FUSE软件包提供了多个API,用于为OS X 10.9至macOS 10. ...