jquery操作DOM(节点)

1.创建元素

//$(htmlStr)
//htmlStr:html格式的字符串
$("<span>这是一个span元素</span>");

2.添加元素

2.1.添加新建的元素

//方法一:将jQuery对象添加到调用者内部的最后面。
var $span = $("<span>这是一个span元素</span>");
$("div").append($span);
//方法二:参数传字符串,会自动创建成jquery对象
$("div").append("<span>这是一个span元素</span>");

2.2.添加已经存在的元素

var $p = $("p");
$("div").append($p);
//注意:如果添加的是已经存在的元素,那么会把之前的元素给干掉。
//(类似于剪切的功能)。

类似的用法

  • append 会将元素添加到子元素的最后面
  • prepend 会将元素添加到子元素的最前面
  • after 会将元素添加到该元素的后面
  • before 会将元素添加到该元素的前面 【案例:城市选择】(../Example/12 城市选择案例.html)

2.3.使用html方法创建元素

//设置内容
$("div").html("<span>这是一段内容</span>");
//获取内容
$("div").html()

3.清空元素

empty:清空指定节点的所有元素,自身保留(清理门户)

$("div").empty();
//清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码)

清空元素的第二种方法

$("div").html("");
//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。

4.删除元素

remove:相比于empty,自身也删除(自杀)

$("div").remove();

5.克隆元素

作用:复制匹配的元素

// 复制$(selector)所匹配到的元素(深度复制)
//cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
$(selector).clone();

jQuery操作DOM知识总结的更多相关文章

  1. Hybrid App开发之jQuery操作DOM

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

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

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

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

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,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. CorelDRAW2019版本下载,CorelDRAW最新版新增功能(全)

    使用CorelDRAW 2019,随时随地进行设计创作.无论您使用的是 Windows 或 Mac,都能在为您的平台量身设计的直观界面中,随心所欲地自由创作.无论您是热衷于像素,执迷于无缝输出或沉浸于 ...

  2. 浏览器内置的base64方法

    Base64是一种基于64个可打印字符来表示二进制数据的表示方法.在Base64中的可打印字符包括字母A-Z.a-z.数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同(维基百科: ...

  3. BZOJ 1864: [Zjoi2006]三色二叉树 树形DP + 读入

    Description Input 仅有一行,不超过500000个字符,表示一个二叉树序列. Output 输出文件也只有一行,包含两个数,依次表示最多和最少有多少个点能够被染成绿色. 题解:本题大水 ...

  4. BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会 树形DP + 带权重心

    Description Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 N(1<=N<=100,0 ...

  5. Commons IO

    Common IO 是一个工具库,用来帮助开发IO功能 它包括6个主要部分 Utility classes – 包括一些静态方法来执行常用任务 Input – InputStream 和 Reader ...

  6. 使用百度fis3构建前端多页应用

    吾日三省吾身. 从一个完全不相干的行业转到IT,多多少少都会感到迷茫,不知道学习什么.从何学起?在几乎没有任何经验的背景下,坚持投递简历,最后终于进入了一个创业公司,开始做起了前端工作.工资勉强维持生 ...

  7. centos7安装mwget下载资源,提升下载速度

    1.安装mwget wget http://jaist.dl.sourceforge.net/project/kmphpfm/mwget/0.1/mwget_0.1.0.orig.tar.bz2 ta ...

  8. 使用Arcgis进行画面(线)并计算大小(长度)。

    在使用Arcgis API for JavaScript进行做地图开发的过程中,在地图进行画线.画面是经常使用的功能.本文主要介绍这一功能. 本文适用Arcgis API版本:Arcgis API f ...

  9. Redis学习笔记(二) - 主从复制

    概述 指将一台redis服务器上的数据,复制到其他redis服务器上,前者称为主服务器(master),后者称为从服务器(slave). 默认情况下主从关系为一对多关系. 数据复制是单向的,只能从主服 ...

  10. C#学习笔记_03_运算符

    03_运算符 算数运算符 + - * / % ++ -- 赋值运算符 = += -= *= /= %= 关系运算符 > < >= <= == != 逻辑运算符 &:逻辑 ...