jQuery -> 怎样【先创建、再改动、后加入】 DOM元素
怎样一气呵成地。on the fly地操作DOM元素呢？
比如顺序运行【创建】-> 【改动】-> 【加入】三个动作。
因为jQuery支持链式操作，事实上就是设计模式的builder模式，所以我们能够把三个操作串在一起来运行。
首先创建一个p元素，内容包括一个a元素。
$('<p><a>jQuery</a></p>')
然后为a元素加入一个href属性
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com')
最后把新加入的p元素加入到body中
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body')
注意，这个地方须要运行end()操作。否则加入到body中的元素不是p元素变成了p元素中的a元素。
事实上，end()操作不能等价与撤销。它返回的是previous selection，可是这个selection已经被end之前的操作改动过。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jqeury.com').appendTo('body');
</script>
</body>
</html>
页面代码
jQuery -> 怎样【先创建、再改动、后加入】 DOM元素的更多相关文章
- 关于jQuery的append方法不能多次添加同一个DOM元素的解决方法
资料来自:https://segmentfault.com/q/1010000007677851?_ea=1419689 append()方法在jQuery中是使用appendChild()实现的,实 ...
- jQuery 如何先创建、再修改、后添加DOM元素
例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素, ...
- 使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...
- jQuery支持移动Mobile的DOM元素移动和缩放插件
jQuery Panzoom是一款很有用的HTML DOM元素平移和缩放jQuery和CSS3插件. Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加 ...
- jQuery -> 获取指定上下文中的DOM元素
jQuery函数的第二个參数能够指定DOM元素的搜索范围. 第二个參数可分为下面类型 DOM reference jQuery wrapper document 代码演示样例 <!DOCTYPE ...
- 使用 jQuery Deferred 和 Promise 创建响应式应用程序
这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...
- 【java开发系列】— JDOM创建、改动、删除、读取XML文件
有非常多中操作XML文件的方法,这里介绍一下JDOM的用法和技巧. JDOM下载地址 创建XML文档 XML文件是一种典型的树形文件,每一个文档元素都是一个document元素的子节点. 而每一个子元 ...
- JS、JQuery和ExtJs动态创建DOM对象
做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...
- JQuery 之 在数据加载完成后才自动执行函数
数据加载完成执行: $(window).load(function(){ ... }); 进入页就执行,不论等数据是否加载完成: $(document).ready(function(){ ... } ...
随机推荐
- jboss <context /> 配置虚拟路径，映射本地文件
这个目录下的server.xml <host><host/>标签中添加: <Context path="/file" docBase="D: ...
- 模块打包机--webpack--基础使用
什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Type ...
- Http请求和相应模式（B/S）(1)
B/S模式 服务器端的接受数据 :浏览器端 表单格式 <form></form> GET:请求方式, /index.html Web浏览器上的资源路径 uname=bjxt& ...
- 【转】 C# ListView实例：文件图标显示
[转] C# ListView实例:文件图标显示 说明:本例将目录中的文件显示在窗体的ListView控件中,并定义了多种视图浏览.通过调用Win32库函数实现图标数据的提取. 主程序: 大图标: 列 ...
- Docker 管理工具的选择：Kubernetes 还是 Swarm？
[编者的话]选择Kubernetes 或者 Swarm 就像在将 Linux 桌面发行版的范围缩小到两个后选出一个最喜欢的.哪个更满足你的需要如何才是决定因素. [3 天烧脑式基于Docker的CI/ ...
- ArcEngine 一些实现代码
转自原文 ArcEngine 一些实现代码 ●·● 目录: A1 …………实现:鼠标滑过显示要素 tip A2 …………实现:通过鼠标选择要素并高亮显示(ISelectionEnvironme ...
- HDU 4301 Contest 1
开始时设的是第一.二行前i,j列有k种的方法数,但是,这根本转移不了--! 难点在于1,2行的讨论啊... 设f[i][j][0]为前i列分成j个部分,且第i列的两个为同一部分的方法数. f[i][j ...
- POJ 1430
上面的估计是题解吧....呃,如果真要用到公式的话,确实没听过.... #include <iostream> #include <cstdio> #include <a ...
- CentOS 安装SVNclient
1.检查是已经安装了svn: # rpm -qa subversion subversion-1.7.14-6.el7.x86_64 卸载旧版本号的svn: # yum remove subversi ...
- 超便携式截屏录屏软件FastStone Capture
超便携式截屏录屏软件FastStone Capture