What is the difference between removeProp and removeAttr in JQuery 1.6?_问答_开发者

If you removeProp on something you should have used 开发者_如何学PythonremoveAttr() on will it silently fail? Will it work? Will it actually remove the entire attribute or just the value inside it?

If checked is added using removeProp(), can it be removed with removeAttr()?

Many questions!

The official jQuery blog provides a very clear explanation:

In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes. Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup . DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.

In most cases, the browser treats the attribute value as the starting value for the property, but Boolean attributes such as checked or disabled have unusual semantics.

For example, consider the markup <input type="checkbox" checked>. The presence of the checked attribute means that the DOM .checked property is true, even though the attribute does not have a value. In the code above, the checked attribute value is an empty string (or undefined if no attribute was specified) but the checked property value is true.

Before jQuery 1.6, .attr("checked") returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (an empty string), which doesn’t change when the user clicks the checkbox to change its state.

There are several alternatives for checking the currently-checked state of a checkbox. The best and most performant is to use the DOM property directly, as in this.checked inside an event handler when this references the element that was clicked. In code that uses jQuery 1.6 or newer, the new method $(this).prop("checked") retrieves the same value as this.checked and is relatively fast. Finally, the expression $(this).is(":checked") works for all versions of jQuery.

An attribute of an element is something like 'class'. Whereas its property would be 'className'.

This is the reason for adding jQuery.prop and jQuery.propHooks into version 1.6, to make it easier working with both.

So if the the property had the same name as the attribute you could use both removeProp or removeAttr.

I asked a similar question on jQuery forum, got this answer:

Yes, attr is meant for html attributes as they are strictly defined. prop is for properties. So for instance, say you have a node elem with class "something" (raw element not jQuery object). elem.className is the property, but is where the attribute resides. Changing the class attribute also changes the property automatically and vise versa. Currently, attr is jumbled and confusing because it has tried to the job of both functions and there are many bugs because of that. The introduction of jQuery.fn.prop will solve several blockers, separate code as it should have been separated from the beginning, and give developers faster functions to do what they expect them to do. Let me make up a percentage for a sec and say that from my experience in the support IRC and reading other's code, 95% of the use cases for attr will not have to switch to prop.

EDIT

It may be best to stick to using either jQuery.attr or jQuery.prop. Theres seems to be some strange behaviour when setting and removing the checked attribute using both.

See here for an example: http://jsfiddle.net/tomgrohl/uTCJF/

There is a bug in 1.6 to do with selected: http://bugs.jquery.com/ticket/9079

Using jQuery 1.6, I was was trying to clone a menu item which had several id attributes, and so I did this:

$('ul.menu').clone().filter('*').removeProp('id').appendTo('.sidebar');

When I inspected the elements in Firebug I had a lot of id="undefined" - not what I wanted. So now I am using removeAttr and it seems to work much better.

$('ul.menu').clone().filter('*').removeAttr('id').appendTo('.sidebar');