<!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. web资源预加载-生产环境实践

    此文记录资源预加载在我们项目的实践,技术难度不算高,重在介绍一套技术方案的诞生与实施,其中都进行了哪些思考,依据什么来做决策,如何进行效果评估,等等.为读者在制定技术方案时提供一定启示. 背景 资源预 ...

  2. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  3. 7-34 jmu-python-是否偶数 (10 分)

    输入一个整数,判断是否偶数 输入样例: 7 输出样例: 7不是偶数 输入样例: 8 输出样例: 8是偶数 a = int(input()) if (a % 2 == 0): print('%d是偶数' ...

  4. Mysql8以上需要指定时区serverTimezone

    JDBC连接Mysql8以下 com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/test?useUnicode=true&charac ...

  5. 前端ps中常用的操作

    昨天,ui给了个psd图,让写成网页.额,要自己切图.很久之前,操作的还凑乎.但是,好久了,都忘了.所以,打算自己记个笔记,方便以后查看. 首先,打开ps就先来设置一下ps的单位啦点击最上面的一行的编 ...

  6. Java堆内存是线程共享的！面试官：你确定吗？

    Java作为一种面向对象的,跨平台语言,其对象.内存等一直是比较难的知识点,所以,即使是一个Java的初学者,也一定或多或少的对JVM有一些了解.可以说,关于JVM的相关知识,基本是每个Java开发者 ...

  7. HDFS 客户端读写操作详情

    1. 写操作 客户端向namenode发起上传请求 namenode检查datanode是否已经存有该文件,并且检查客户端的权限 确认可以上传后,根据文件块数返回datanode栈 注:namenod ...

  8. Gorm 预加载及输出处理（一）- 预加载应用

    单条关联查询 先创建两个关联模型: // 用户模型 type User struct { gorm.Model Username string `gorm:"type:varchar(20) ...

  9. 爬虫之requestsku

    想用selenium实现B站自动登录已经点赞等功能,看到如何解决滑动解锁有关爬虫的内容,便开始学习爬虫,没过多久又想把记录自己生活的网站做起来,朋友便推荐了layui框架倒腾了一晚上自我觉得是做后台系 ...

  10. docker 编译开发代码做镜像

    文件目录 Dockerfile 是docker制作镜像的文件,docker_run.sh是sh文件,gin_test是go编译之后的linux可执行程序,gintest.env是配置文件夹 首先写一个 ...