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. 团体程序设计天梯赛-练习集-L1-041. 寻找250

    L1-041. 寻找250 对方不想和你说话,并向你扔了一串数…… 而你必须从这一串数字中找到“250”这个高大上的感人数字. 输入格式: 输入在一行中给出不知道多少个绝对值不超过1000的整数,其中 ...

  2. Day 17 time,datetime,random,os,sys,json,pickle

    time模块 1.作用:打印时间,需要时间的地方,暂停程序的功能 时间戳形式 time.time() # 1560129555.4663873(python中从1970年开始计算过去了多少秒) 格式化 ...

  3. MATLAB图形界面设计(上)

    参考https://www.cnblogs.com/BlueMountain-HaggenDazs/p/4307777.html 一.图形句柄 1.定义 MATLAB在创建每一个图形对象时,都会给该对 ...

  4. swift-UITableView的基本使用

    废话不多说了,直接贴我今天写的代码吧:如果新手有什么不懂的,可以发我邮箱. // //  singleInfo.swift            个人信息 //  Housekeeper // //  ...

  5. [CodeForces]1059C Sequence Transformation

    构造题. 我递归构造的,发现如果N>3的话就优先删奇数,然后就把删完的提取一个公约数2,再重复操作即可. 具体原因我觉得是因为对于一个长度大于3的序列,2的倍数总是最多,要令字典序最大,所以就把 ...

  6. 9.在idea中创建Maven项目

    1.新建maven WEB项目 打开-File-New-Project 点击NEXT 2.选择项目组,并给项目命名 3.选择maven路径 添加的配置为 archetypeCatalog=intern ...

  7. jQuery动态效果

    1.一号店首页 2.淘宝网购物车

  8. sqlalchemy根据表名动态创建model类

    作用如题,直接上代码吧,另外还支持 copy一张表的表结构,新建表并获得model对象 # coding: utf-8 import traceback from sqlalchemy import ...

  9. 数据库--ACID特性

    事务的ACID属性 原子性(Atomicity) 原子性是指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. 一致性(Consistency) 事务必须使数据库从一个一致性状态变换 ...

  10. MySQL优化之——为用户开通mysql权限

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46627263 为用户开通mysql权限: grant all privileges ...