当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  如何一气呵成地,on the fly地操作DOM元素呢? 例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行。 首先创建一个p元素,...

如何一气呵成地,on the fly地操作DOM元素呢?

例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。

由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行。

首先创建一个p元素,内容包含一个a元素。
代码如下:

$('

jQuery

')

然后为a元素添加一个href属性
代码如下:

$('

jQuery

').find('a').attr('href', 'http://www.jquery.com')

最后把新添加的p元素添加到body中
代码如下:

$('

jQuery

').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body')

注意,这个地方需要执行end()操作,否则添加到body中的元素不是p元素变成了p元素中的a元素。

其实,end()操作不能等价与撤销,它返回的是previous selection,但是这个selection已经被end之前的操作修改过。
代码如下:









$('

jQuery

').find('a').attr('href', 'http://www.jqeury.com').appendTo('body');




页面代码

    
 
 

您可能感兴趣的文章:

  • 页面元素绑定jquery toggle后元素隐藏的解决方法
  • jquery判断元素的子元素是否存在的示例代码
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • jquery怎么判断元素的子元素是否存在
  • jquery获取一个元素下面相同子元素的个数代码
  • jquery中子元素和后代元素的区别示例介绍
  • jQuery 滑动方法slideDown向下滑动元素
  • JQuery元素控制方法汇总
  • 使用jquery prev()方法找到同级的前一个元素
  • jQuery each循环获取与搜索元素
  • jquery获取第几个元素方法示例 jquery选择器
  • jQuery如何获取与设置表单元素
  • jquery怎么判断html元素是否存在
  • JQuery实现元素屏幕居中显示的代码
  • jQuery 元素缩放插件 Zoomooz
  • jQuery元素覆盖 Ezoverlay
  • 数据库 iis7站长之家
  • jQuery 追加元素的方法如append、prepend、before
  • jquery控制css元素的display(显示与隐藏)属性
  • jquery控制css display属性(控制元素显示与隐藏)
  • jquery easyUI创建分组属性编辑器
  • jQuery图像创建插件 Nivo Slider
  • jquery代码-如何创建嵌套的过滤器
  • Jquery通过JSON字符串创建JSON对象
  • jquery animate创建动画的小例子
  • Jquery创建层显示标题和内容且随鼠标移动而移动
  • jquery创建表格、自动增加表格的实例代码
  • jquery-easyui创建下拉菜单的例子
  • 使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
  • jquery创建表格(自动增加表格)代码分享
  • Jquery创建一个层当鼠标移动到层上面不消失效果
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery动态添加option示例
  • jquery css类用法(添加、修改与删除css)
  • jquery 获取dom固定元素 添加样式的简单实例
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • jquery实现在页面加载的时自动为日期插件添加当前日期
  • JQuery如何为元素添加样式
  • jquery 取url参数及在url后添加参数的例子
  • jQuery动态添加、删除元素的方法
  • Jquery操作html标签及动态添加验证的例子
  • jquery动态添加删除一行数据实例
  • jquery实现Select option项的添加、删除、取值
  • jquery动态添加删除一行数据示例
  • JQuery textarea添加maxlength属性的例子
  • jQuery异步加载数据并添加事件示例
  • jquery 添加与删除节点的几种方法
  • 自写的jQuery异步加载数据添加事件
  • Jquery 添加内容自动刷新的实现代码
  • jQuery为文本框添加只读属性readOnly
  • jquery mobile动态添加元素之后不能正确渲染解决方法说明
  • Jquery动态添加及删除页面节点元素示例代码
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3