jQuery如何先创建、再修改、后添加DOM元素
jQuery 如何 创建 修改 添加 元素 dom
2023-06-13 09:15:26 时间
如何一气呵成地,onthefly地操作DOM元素呢?
例如顺序执行【创建】->【修改】->【添加】三个动作。
由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行。
首先创建一个p元素,内容包含一个a元素。
复制代码代码如下:
例如顺序执行【创建】->【修改】->【添加】三个动作。
由于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()操作不能等价与撤销,它返回的是previousselection,但是这个selection已经被end之前的操作修改过。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
</head>
<body>
<scripttype="text/javascript"src="jquery-1.11.1.js"></script>
<scripttype="text/javascript">
$("<p><a>jQuery</a></p>").find("a").attr("href","http://www.jqeury.com").appendTo("body");
</script>
</body>
</html>
页面代码
相关文章
- 如何通过jQuery发送AJAX?
- js如何生成二维码_jquery 生成二维码无法识别
- 获取实体类@注解信息_jquery获取class名称
- jquery如何动态添加、删除class样式方法详解编程语言
- JQuery表单中textarea字数限制实现代码
- Jquery实战_读书笔记1—选择jQuery
- jquery全局AJAX事件使用代码
- 10款新鲜出炉的jQuery插件(Ajax插件,有幻灯片、图片画廊、菜单等)
- jquery插件学习(二)
- jquery事件冒泡的介绍以及如何阻止事件冒泡
- jQuery链式操作如何实现以及为什么要用链式操作
- jQuery.validate常用方法及需要注意的问题
- PHP+jQuery实现自动补全功能源码
- 探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
- 解析Jquery的LigerUI如何实现文件上传
- jquery滚动条事件简单实例
- 如何使用Jquery获取Form表单中被选中的radio值
- JQuery获取样式中的background-color颜色值的问题
- 可兼容IE的获取及设置cookie的jquery.cookie函数方法
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery设置元素的readonly和disabled的写法
- jQuery的显示和隐藏方法与css隐藏的样式对比
- jquery如何实现锚点链接之间的平滑滚动
- 如何从jQuery的ajax请求中删除X-Requested-With
- 制作jquery遮罩层效果导航菜单代码分享
- jquery和javascript中如何将一元素的内容赋给另一元素
- jquery操作cookie插件分享
- jQuery$命名冲突怎么办如何解决
- jquery使用简明教程
- Jquery插件编写简明教程
- jquery如何扑捉回车键触发的事件
- jquery查找trtd示例模拟
- 使用jquery选择器如何获取父级元素、同级元素、子元素
- sliderToggle在写jquery的计时器setTimeouter中不生效
- jquery操作css样式、位置、尺寸方法汇总
- 分享2个jQuery插件--jquery.fileupload与artdialog
- 一个小例子解释如何来阻止Jquery事件冒泡
- jQuery实现设置、移除文本框默认值功能
- jQuery如何获取同一个类标签的所有值(默认无法获取)