JQuery html()方法使用一些误区。

最近我在处理一个比较复杂的DOM控制的业务的时候发现html()这个方法的一些领我有些不解的地方。

1.html() 获取的是第一个匹配的元素的内容,不包括它自己。

2.如果需要获取包括元素自己本身的html的话,请使用prop("outerHTML"),如:

$("div").prop("outerHTML"); //这个的返回值会包含div自己本身以及以内的所有html代码。

3.假如你使用了一个很复杂的DOM操作,例如使用了clone(),find(),之类的操作,你会发现,当你想修改这些标签内的内容时

如:

$(dom).clone().find(children).html("<p>hello world</p>");

经过本人试验,结果会把children中的内容清空,假如children是<div><p>haha</p></div>,那么就会变成

<div></div>。

第三点有待论证,欢迎大神过来指导下,为什么会出现这种情况,目前我只能用文本重组里面的内容,却不能通过html(),append()...等文档操作来重组内容。是不是因为克隆后,就不是文档的一部分了,所以这些文档操作对该dom对象全部都无效了?抱歉,我只能这么想了......

时间: 2024-07-31 07:52:46

JQuery html()方法使用一些误区。的相关文章

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

jQuery on()方法

jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",func

优化加载jQuery的方法

请看下面的一段代码: 1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 2 <script type="text/javascript"> 3 window.jQuery || document.write("<script src='__ADMIN_JS__/jquery-2.0.3.

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象

使用jquery的方法和技巧

1.下载一个jquery.js的文件 2.引入jquery.js文件 1 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 5 //这里面使用jquery的方法 6 7 8 }); 9 </s

jQuery.access()方法

最开始只是想了解attr方法,发现它内部调用了jQuery.access()方法.除了attr,还有prop.text.html.css.data 都是内部调用了jQuery.access()方法,可见它的重要. attr: function( name, value ) { return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 ); } prop: function( name, value ) {

jQuery offsetParent()方法

offsetParent()方法的定义和用法:此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素.所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素.此方法仅对可见元素有效.语法结构: $(selector).offsetParent() 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &

使用jquery的方法和技巧2,点击多选框的jquery响应

使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二层 a.对所有亲子多选框而言 当选择帖子管理(控制器Action02)时,所有亲子多选框被选择. 当取消选择帖子管理(控制器Action02)时,所有亲子多选框被取消选择. b.对亲父级多选框:后台应用(App1)而言 当选择帖子管理(控制器Action02)时,亲父App多选框被选择. 当取消选择