《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素
本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.10节,作者:【美】jQuery社区专家组 译者:姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.10 创建、操作和插入DOM元素1.10.1 问题
你打算创建一个或者多个新的DOM元素,立刻选中这些元素加以操作,然后把它们注入到DOM中。
1.10.2 解决方案
你可能还不清楚,jQuery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行。如果以原始HTML文本字符串为参数调用函数,它将立刻创建这些元素。例如,下列语句将创建一个包装在元素中的
元素,在
和
元素中还封装了一个文本节点:
jQuery( p a jQuery /a /p
创建了元素之后,还可以使用jQuery方法对它进行进一步的操作,就像一开始就从现有的HTML文档中选择了元素似的。例如,可以用.find()方法选择元素,并设置它的一个属性。
jQuery( p a jQuery /a /p ).find(a).attr(href,http://www.jquery.com);
这很棒,对吗?目前为止,所做的只不过是在运行中创建元素并在代码中进行操纵,实际上还可以做得更好。可以说,实际上还没有真正改变当前加载的DOM。想做到这一点,就必须使用jQuery提供的操纵方法。下面是在HTML文档上下文中的代码。在这段代码中将创建元素、在这些元素上进行操作,然后用操纵方法appendTo()将它们插入DOM中:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / /head body script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" /script script type="text/JavaScript" jQuery( p a jQuery /a /p ).find(a).attr(href,http://www.jquery.com) .end().appendTo(body); /script /body /html
请注意这里是如何使用end()方法撤消find()方法的,这样当调用appendTo()方法时,它将在DOM中附加包含在初始包装器集中的元素。
1.10.3 讨论
在本秘诀中,向jQuery函数传递原始HTML字符串,这一参数被方法用来在运行中创建DOM元素。 还可以简单地向jQuery函数传递一个由DOM方法createElement()创建的DOM对象:
jQuery(document.createElement(p)).appendTo(body); //在页面中添加一个空白的p元素
当然,如果用一个包含多个元素的HTML字符串就能正常工作,这么做可能就显得麻烦了,如何选择取决于具体的用法。
值得一提的是,这里只是用appendTo()方法简单地介绍了操纵方法的基础。除了appendTo()方法之外,还有如下操纵方法:
append()prepend()
prependTo()
after()
before()
insertAfter()
insertBefore()
wrap()
wrapAll()
wrapInner()
jQuery操作DOM元素 作为一个后端程序员,也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用一些别人封装好的js库来辅助我们的工作,jQuery就是这些辅助库中的一员。
Jquery each() 如何操作动态添加的DOM元素 JQ each页面上的DOM元素的时候,如果有一部分的DOM是ajax异步加载的,那么each可能遍历不到元素,异步请求数据的同时不会影响后面的代码执行,今天就遇到这个问题了, 解决方案是讲ajax改成同步请求或者请求成功后再做DOM操作,当然选择的是后者。同步可能会导致程序卡。
jQuery操作DOM元素 原文:jQuery操作DOM元素 jQuery操作DOM元素 HTML DOM常见操作: 查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点. 关于节点的查找,是利用选择器完成的.
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- jQuery源码-class操作
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- JS(JQuery)中取出当日期第N天的日期或年月日。
- 前端基础 -JQuery之 对样式的操作
- [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理
- jquery mobile
- jQuery-ui datepicker的使用演示代码
- jQuery可拖拽排序列表jquery-sortable-lists
- jQuery 判断多个 input checkbox 中至少有一个勾选
- Jquery Ajax xml版Get请求PHP
- 《众妙之门——JavaScript与jQuery技术精粹》——1.6 允许配置
- jquery api 常见api 元素操作例子
- jquery.params.js,Jquery获取页面参数,js获取页面参数
- Nice Jquery Validator 事件
- Nice Jquery Validator DOM 绑定
- jquery的each伪数组遍历
- JQuery 属性操作 - attr() 方法
- 【转发】jquery操作下拉框select(设置默认选中,清空选中状态)
- jQuery 获取 select 值和文本
- [js高手之路]jquery插件开发实战-选项卡详解
- Jquery_操作cookies
- [置顶] Jquery中DOM操作(详细)
- jQuery鼠标悬停显示提示信息窗体
- JQuery/JS插件 数组转换为Table