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>

页面代码

时间: 2024-12-23 13:06:12

jQuery -&gt; 怎样【先创建、再改动、后加入】 DOM元素的相关文章

jQuery 如何先创建、再修改、后添加DOM元素

例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素,内容包含一个a元素. 复制代码代码如下: $('<p><a>jQuery</a></p>') 然后为a元素添加一个href属性 复制代码代码如下: $('<p><a>jQuery</a></p>').find('a

工作积累(六)——jQuery实现DOM元素事件绑定

用 jQuery 为DOM元素绑定事件时,如果用下面这种方式: <button class="dynamic-bind">按钮一</button> $(function() {   $('.dynamic-bind').on('click', function(e) {     alert(e.type); //'click' }); }); 那么如果在绑定事件之后通过 jQuery 添加与该选择器相同的新的DOM元素: $('.dynamic-bind:las

使用dom元素和jquery元素实现简单增删改的练习

软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con

jQuery支持移动Mobile的DOM元素移动和缩放插件

jQuery Panzoom是一款很有用的HTML DOM元素平移和缩放jQuery和CSS3插件. Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加速.它能够支持不论什么元素的平移和缩放:图片.视频.iframe.canvas或文本等等. Panzoom支持移动Mobile的触摸姿势,也支持使用手指来缩放元素大小.它全然能够同一时候在桌面设备和移动手机上同一时候使用.它能够支持iOS 和Android设备,同一时候支持Pointer(IE11+

jQuery -&amp;gt; 获取指定上下文中的DOM元素

jQuery函数的第二个參数能够指定DOM元素的搜索范围. 第二个參数可分为下面类型 DOM reference jQuery wrapper document 代码演示样例 <!DOCTYPE html> <html> <body> <form> <input name="" type="checkbox"/> <input name="" type="radio&qu

jQuery -&gt; 如何【先创建、再修改、后添加】 DOM元素

如何一气呵成地,on the fly地操作DOM元素呢? 例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素,内容包含一个a元素. $('<p><a>jQuery</a></p>') 然后为a元素添加一个href属性 $('<p><a>jQuery</a></p>'

利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

使用 jQuery Deferred 和 Promise 创建响应式应用程序

这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首次亮相于 流行的 JavaScript 库 jQuery(已经是1.5版本的事情了). Deferred 提供了一个抽象的非阻塞的解决方案(如 Ajax 请求的响应),它创建一个 “promise” 对象,其目的是在未来某个时间点返回一个响应.如果您之前没有接触过 “promise”,我们将会在下面

js代码从页面移植到文件里失效或js代码改动后不起作用的解决的方法

近期在做关于站点的项目,总是发生这种问题 写的javascript代码在页面上没有问题,可是将js代码移植到.js的文件里,在页面上进行调用,总是出现失效等错误 另外改动后的js代码,又一次刷新网页仍然不起作用 经过大量搜索并经过验证.能够用以下方法来解决 将js代码封装到js文件里失效的原因可能是js文件里存在中文凝视,导致在运行的时候中断,在js文件尽量不要写中文凝视 改动后的js代码刷新网页后不起效果可能是由于你所用的浏览器使用缓存的问题,可在浏览器中设置取消使用缓存,并删除暂时文件.重新