General jQuery DOM Manipulation Methods
jQuery attr() Method
The attr()
method sets or returns the selected elements' attributes and values.
This method returns the value of the FIRST matched element when used to replace the attribute value.
Syntax of attr method in jQuery
-
Return the attribute's value:
$(selector).attr(attribute)
-
Set the attribute and value:
$(selector).attr(attribute,value)
-
Set attribute and value using a function:
$(selector).attr(attribute,function(index,currentvalue))
-
Set multiple attributes and values:
$(selector).attr({attribute:value, attribute:value,...})
Example of jQuery attr method
Set an image's width attribute:
$("button").click(function(){
$("img").attr("width","500");
});
jQuery prop() Method
The prop()
method sets or returns the selected elements' properties and values.
This method returns the value of the FIRST matched element when used to replace the property value.
This method sets one or more property/value pairs for the set of matched elements when used to assess property values.
Syntax of prop method in jQuery
-
Return the property's value:
$(selector).prop(property)
-
Set the property and value:
$(selector).prop(property,value)
-
Set property and value using a function:
$(selector).prop(property,function(index,currentvalue))
-
Set multiple properties and values:
$(selector).prop({property:value, property:value,...})
Example of jQuery prop method
Add and remove the "colour" property:
$("button").click(function(){
var $x = $("div");
$x.prop("color", "FF0000");
$x.append("The color property: " + $x.prop("color"));
$x.removeProp("color");
});
Note: The prop()
method should retrieve property values, such as DOM properties (tagName, nodeName, and default checked) or custom properties.
Tip: Use the attr()
method instead to retrieve HTML attributes.
Tip: Use the removeProp()
method to remove a property.
jQuery removeAttr() method
This method removes one or more attributes from the chosen components.
Syntax of removeAttr method in jQuery
$(selector).removeAttr(attribute)
Example of jQuery removeAttr method
All
elements should have the style attribute removed:
elements should have the style attribute removed:
$("button").click(function(){
$("p").removeAttr("style");
});
jQuery removeProp() Method
The prop()
method sets a property, and the removeProp()
method removes the process.
Syntax of removeProp method in jQuery
$(selector).removeProp(property)
Example of jQuery removeProp method
Add and remove the "colour" property:
$("button").click(function(){
var $x = $("div");
$x.prop("color", "FF0000");
$x.append("The color property: " + $x.prop("color"));
$x.removeProp("color");
});
jQuery val() Method
The value attribute of the selected elements is returned or set by the val()
method.
When it is used to return a value, it'll look like this: This method returns the value of the FIRST matched element's value attribute.
Syntax of val method in jQuery
-
Return the attribute's value:
$(selector).val()
-
Set the value attribute:
$(selector).val(value)
-
Set the value attribute using a function:
$(selector).val(function(index,currentvalue))
Example of jQuery val method
Set the input> field's value to:
$("button").click(function(){
$("input:text").val("Glenn Quagmire");
});
Tip: The val()
method is most commonly associated with HTML form elements.
jQuery clone() Method
The clone()
method copies a set of elements, such as child nodes, text, and attributes.
Syntax of clone method in jQuery
$(selector).clone(true|false)
Example of jQuery clone method
All
elements should be cloned and inserted at the end of the body> feature:
$("button").click(function(){
$("p").clone().appendTo("body");
});