jQuery操作DOM知识总结
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知识总结的更多相关文章
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- jQuery权威指南(第2版) 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
- *jquery操作DOM总结 (原创:最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- jQuery操作dom事件
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
随机推荐
- html第四节课
css CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合 ...
- JS常见的四种设计模式
1 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; function CreatePerson(name,age,sex) { var obj = new Object(); obj.name ...
- 使用ajax爬取网站图片()
以下内容转载自:https://www.makcyun.top/web_scraping_withpython4.html 文章关于网站使用Ajaxj技术加载页面数据,进行爬取讲的很详细 大致步骤如下 ...
- 5.win上安装ES
安装步骤如下: 1.安装JDK 至少1.8.0_73以上版本,使用 java -version 这个命令进行查看java的版本 2.下载和解压缩Elasticsearch安装包, 解压后目录结构: 3 ...
- Problem 16
Problem 16 pow(2, 15) = 32768 and the sum of its digits is 3 + 2 + 7 + 6 + 8 = 26.2的15次方等于32768,而这些数 ...
- android的数据与访问(2)-delphi xe7如何存取我的app配置参数文件?
这种方法不推荐,因为该SharedPreference是android的方法.你想跨平台,在ios上就不能使用.建议还是用ini or xml.android因为读写该二种文件比较繁琐,所以推出自己简 ...
- Something about 博弈(POJ 3922 A simple stone game)
先是题目,本来是第三次训练的题,在这特别提出来讲. 先是题目: E - A simple stone game Time Limit:1000MS Memory Limit:65536KB ...
- mongodb--安全
安全和认证 mongodb和redis比较像,安全部分依赖于其所存在的环境 一定要把mongodb放在一个可信的环境下去运行,mongodb只能被web服务器所访问,禁止开外网端口访问mongodb, ...
- c#--早绑定晚绑定
原文地址 早绑定early binding: 在编译的时候就已经却确定了将来程序运行基类或者派生类的哪个方法. 在编译代码的时候根据引用类型就决定了运行该引用类型中定义的方法.即基类方法. 这种方式运 ...
- 互联网服务器的实现过程需要考虑哪些安全问题 & 加解密及哈希知识点
http://www.cnblogs.com/charlesblc/p/6341265.html 其中的一篇. 参考 https://zhuanlan.zhihu.com/p/20336461?ref ...