当前位置: 代码迷 >> 综合 >> attr()、prop() 、end()、detach()
  详细解决方案

attr()、prop() 、end()、detach()

热度:18   发布时间:2023-12-15 21:14:43.0

attr() VS prop() 

jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。

从 jQuery 1.6 开始,.attr() 方法返回 attributes 的值,而1.6新增的 .prop()方法返回 property 的值。

例如 selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultChecked, 和 defaultSelected 应使.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。

例如,考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked"/> ,并假设它是一个JavaScript变量命名的elem :

 

根据W3C的表单规范 ,在checked属性是一个布尔属性, 这意味着,如果这个属性(attribute)是目前存在, 即使,该属性没有对应的值,或者被设置为空字符串值,或甚至是"false",相应的属性(property)为true。

$(elem).attr("checked")仅获取复选框最初的值

checked特性(attribute/$(elem).attr("checked"))值不会因为复选框的状态而改变,

checked属性(property/$(elem).prop("checked"))会因为复选框的状态而改变

因此,跨浏览器兼容的方法来确定一个复选框是否被选中,是使用该属性(property):

<span style="font-family:Microsoft YaHei;font-size:14px;">· if ( elem.checked )
· if ( $(elem).prop("checked") )
· if ( $(elem).is(":checked") )</span>

对于其他的动态属性,同样是true,比如 selected 和 value.

end()

end()函数的返回值为jQuery类型,返回最近一次"破坏性"操作之前的jQuery对象。只要调用jQuery对象的某个方法返回的是一个新创建的jQuery对象,则该操作被视为"过滤"操作或"破坏性"操作。jQuery对象的add()、 addBack()、 andSelf()、 children()closest()、 contents()、 eq()、 filter()、 find()、 first()、 has()last()、 map()、 next()、 nextAll()、 nextUntil()、 not()、 parent()parents()、 parentsUntil()、 prev()、 prevAll()、 prevUntil()siblings()、 slice()clone()等方法均属于"破坏性"操作

.detach()

.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。

<span style="font-family:Microsoft YaHei;font-size:14px;"><body><p>Hello</p>how are<p>you?</p><button>Attach/detach paragraphs</button>
<script>var p;$("button").click(function(){if ( p ) {p.appendTo("body");p = null;} else {p = $("p").detach();}
});
</script>
</body></span>


  相关解决方案