The addClass() method adds one or more class names to the selected elements. This method does not remove existing class attributes, it only adds one or more class names to the class attribute.
Tip: To add more than one class, separate the class names with spaces.
Parameters:
classname : required. Specifies one or more class names to be added
function(index,currentclass) : optional. Specifies a function that returns one or more class names to be added; "index" - returns the index position of the element in the set; "currentclass" - returns the current class name of the selected elemen
example: add a class name to the first <p> element.
This is a heading
This is a paragraph.
This is another paragraph.
code:
<div id="div1">
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Add a class name to the first p element</button>
</div>
<style>
.intro{font-size: 150%; color: red;}
</style>
<script>
$(document).ready(function(){
$("#div1 button").click(function(){
$("#div1 p:first").addClass("intro");
});
});
</script>
The after() method inserts specified content after the selected elements.
Tip: to insert content before selected elements, use the before() method.
Parameters:
content : required. Specifies the content to insert (can contain HTML tags). Possible values: HTML elements, jQuery objects, DOM elements
function(index): specifies a function that returns the content to insert; "index" - returns the index position of the element in the set.
example: insert content after each <p> element.
This is a paragraph.
This is another paragraph.
code:
<div id="div2">
<button>Insert content after each p element</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div2 button").click(function(){
$("#div2 p").after("<p>Hello world!</p>");
});
});
</script>
Theappend() method inserts specified content at the end of the selected elements.
Tip: To insert content at the beginning of the selected elements, use the prepend() method.
Parameters:
content : required. Specifies the content to insert (can contain HTML tags). Possible values: HTML elements, jQuery objects, DOM elements
function(index,html): optional. Specifies a function that returns the content to insert; "index" - returns the index position of the element in the set; "html" - returns the current HTML of the selected element.
example: insert content at the end of all <p> elements.
This is a paragraph.
This is another paragraph.
List item 1
List item 2
List item 3
code:
<div id="div3">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list item</button>
</div>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div3 p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("#div3 ol").append("<li>Appended item</li>");
});
});
</script>
The appendTo() method inserts HTML elements at the end of the selected elements.
Tip: to insert HTML elements at the beginning of the selected elements, use the prependTo() method.
Parameters:
content : required. Specifies the content to insert (must contain HTML tags). Note: If content is an existing element, it will be moved from its current position, and inserted at the end of the selected elements.
selector : required. Specifies on which elements to append the content to
example: insert a <span> element at the end of each <p> element.
This is a paragraph.
This is another paragraph.
code:
<div id="div4">
<button>Insert span element at the end of each p element</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div4 button").click(function(){
$("<span>Hello World!</span>").appendTo("#div4 p");
});
});
</script>
Syntax: $(selector).attr(attribute) or $(selector).attr(attribute,value) or $(selector).attr(attribute,function(index,currentvalue)) or $(selector).attr({attribute:value, attribute:value,...})
The attr() methodsets or returns attributes and values of the selected elements.
When this method is used to return the attribute value, it returns the value of the FIRST matched element.
When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.
Parameters:
attribute : specifies the name of the attribute.
value :specifies the value of the attribute.
function(index,currentvalue) : specifies a function that returns the attribute value to set; "index" - receives the index position of the element in the set; "currentvalue" - receives the current attribute value of selected elements
example: set the width attribute of an image.
code:
<div id="div5">
<img src="../../pics/8.jpg" alt="Pbeach" width="284" height="213"><br>
<button>Set the width attribute of the image</button>
</div>
<script>
$(document).ready(function(){
$("#div5 button").click(function(){
$("#div5 img").attr("width", "500");
});
});
</script>
</pre>
The before() method inserts specified content in front of (before) the selected elements.
Tip: to insert content after selected elements, use the after() method.
Parameters:
content : required. Specifies the content to insert (can contain HTML tags). Possible values: HTML elements, jQuery objects, DOM elements
function(index): specifies a function that returns the content to insert; "index" - returns the index position of the element in the set.
example: insert content before each <p> element
This is a paragraph.
This is another paragraph.
code:
<div id="div6">
<button>Insert content after each p element</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div6 button").click(function(){
$("#div6 p").before("<p>Hello world!</p>");
});
});
</script>
The clone() method makes a copy of selected elements, including child nodes, text and attributes.
Parameters:
true : specifies that event handlers also should be copied.
false : default. Specifies that event handlers should not be copied
example: clone all <p> elements and insert them at the end of the <div> element.
This is a paragraph.
This is another paragraph.
code:
<div id="div7">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Clone all p elements, and append them to the div element</button>
</div>
<script>
$(document).ready(function(){
$("#div7 button").click(function(){
$("#div7 p").clone().appendTo("#div7");
});
});
</script>
Syntax: $(selector).css(property) or $(selector).css(property,value) or $(selector).css(property,function(index,currentvalue)) or $(selector).css({property:value, property:value, ...})
The css() methodsets or returns one or more style properties for the selected elements.
When used to return properties: this method returns the specified CSS property value of the FIRST matched element. However, shorthand CSS properties (like "background" and "border") are not fully supported and may give different results in different browsers.
When used to set properties: this method sets the specified CSS property for ALL matched elements.
Parameters:
property : specifies the CSS property name, like "color", "font-weight", etc.
value : specifies the value of the CSS property, like "red", "bold", etc.
function(index,currentvalue) : specifies a function that returns the new value for the CSS property: "index" - returns the index position of the element in the set; "currentvalue" - returns the current value of the CSS property.
example: set the color property of all <p> elements.
This is a paragraph.
This is another paragraph.
code:
<div id="div8">
<button>Set the color property of all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div8 button").click(function(){
$("#div8 p").css("color", "red");
});
});
</script>
The detach() method removes the selected elements, including all text and child nodes. However, it keeps data and events.
This method also keeps a copy of the removed elements, which allows them to be reinserted at a later time.
Tip: To remove the elements and its data and events, use the remove() method instead.
Tip: To remove only the content from the selected elements, use the empty() method.
Parameters:none
example: remove all <p> elements.
This is a heading
This is a paragraph.
This is another paragraph.
code:
<div id="div9">
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Remove all p elements</button>
</div>
<script>
$(document).ready(function(){
$("#div9 button").click(function(){
$("#div9 p").detach();
});
});
</script>
The empty() method removes all child nodes and content from the selected elements.
Note: This method does not remove the element itself, or its attributes.
Tip: To remove the elements without removing data and events, use the detach() method. To remove the elements and its data and events, use the remove() method.
Parameters: none
example: remove the content of all <div> elements.
This is some text
This is a paragraph inside the div.
This is a paragraph outside the div.
code:
<div id="div10">
<div style="height:5vw;background-color:yellow">
This is some text
<p>This is a paragraph inside the div.</p>
</div>
<p>This is a paragraph outside the div.</p>
<button>Remove content of the div element</button>
</div>
<script>
$(document).ready(function(){
$("#div10 button").click(function(){
$("#div10 div").empty();
});
});
</script>
The hasClass() method checks if any of the selected elements have a specified class name. If ANY of the selected elements has the specified class name, this method will return "true".
Parameters:
classname : required. Specifies the class name to search for in the selected elements.
example:
This is a heading
This is a paragraph.
This is another paragraph.
code:
<div id="div11">
<h4>This is a heading</h4>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Does any p element have an "intro" class?</button>
</div>
<style>
.intro{font-size: 120%; color: coral;}
</style>
<script>
$(document).ready(function(){
$("#div11 button").click(function(){
alert($("#div11 p").hasClass("intro"));
});
});
</script>
Syntax: $(selector).height() or $(selector).height(value) or $(selector).height(function(index,currentheight))
The height() methodsets or returns the height of the selected elements.
When this method is used to return height, it returns the height of the FIRST matched element.
When this method is used to set height, it sets the height of ALL matched elements.
This method does not include padding, border, or margin.
Parameters:
value : required for setting height. Specifies the height in px, em, pt, etc. Default unit is px
function(index,currentheight) : optional. Specifies a function that returns the new height of selected elements. "index" - returns the index position of the element in the set; "currentheight" - returns the current height of the selected element
example: return the height of a <div> element.
code:
<div id="div12">
<div style="height:6vw;width:20vw;padding:1vw;margin:0.3vw;border:0.1vw solid blue;
background-color:lightblue;"></div><br>
<button>Display the height of div</button>
</div>
<script>
$(document).ready(function(){
$("#div12 button").click(function(){
alert("Height of div: " + $("#div12 div").height() + "px");
});
});
</script>
Syntax: $(selector).html() or $(selector).html(content) or $(selector).html(function(index,currentcontent))
The html() methodsets or returns the content (innerHTML) of the selected elements.
When this method is used to return content, it returns the content of the FIRST matched element.
When this method is used to set content, it overwrites the content of ALL matched elements.
Tip: to set or return only the text content of the selected elements, use the text() method.
Parameters:
content : required. Specifies the new content for the selected elements (can contain HTML tags)
function(index,currentcontent) : optional. Specifies a function that returns the new content of the selected elements. "index" - returns the index position of the element in the set; "currentcontent" - returns the current HTML content of the selected element
example: change the content of all <p> elements.
This is a paragraph.
This is another paragraph.
code:
<div id="div13">
<button>Change content of all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div13 button").click(function(){
$("#div13 p").html("Hello <b>world!</b>");
});
});
</script>
The insertAfter() method inserts HTML elements after the selected elements.
Tip: To insert HTML elements before the selected elements, use the insertBefore() method.
Parameters:
content : required. Specifies the content to insert (must contain HTML tags). Note: If content is an existing element, it will be moved from its current position, and inserted after the selected elements.
selector : required. Specifies where to insert the content
example: insert a <span> element after each <p> element.
This is a paragraph.
This is another paragraph.
code:
<div id="div16">
<button>Insert span element after each p element</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div16 button").click(function(){
$("<span>Hello world!</span>").insertAfter("#div16 p");
});
});
</script>
The insertBefore() method inserts HTML elements before the selected elements.
Tip: To insert HTML elements after the selected elements, use the insertAfter() method.
Parameters:
content : required. Specifies the content to insert (must contain HTML tags). Note: If content is an existing element, it will be moved from its current position, and inserted before the selected elements.
selector : required. Specifies where to insert the content
example: insert a <span> element before each <p> element.
This is a paragraph.
This is another paragraph.
code:
<div id="div17">
<button>Insert span element before each p element</button><br>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div17 button").click(function(){
$("<span>Hello world!</span>").insertBefore("#div17 p");
});
});
</script>
Syntax: $(selector).offset() or $(selector).offset({top:value,left:value}) or $(selector).offset(function(index,currentoffset))
The offset() methodsets or returns the offset coordinates for the selected elements, relative to the document.
When used to return the offset: this method returns the offset coordinates of the FIRST matched element. It returns an object with 2 properties; the top and left positions in pixels.
When used to set the offset: this method sets the offset coordinates of ALL matched elements.
Parameters:
{top:value,left:value} : required when setting the offset. Specifies the top and left coordinates in pixels. Possible values: name/value pairs, like {top:100,left:100}; an object with top and left properties
function(index,currentoffset) : optional. Specifies a function that returns an object containing the top and left coordinates; " index" - returns the index position of the element in the set; "currentoffset" - returns the current coordinates of the selected element
example: return the offset coordinates of a <p> element.
This is a paragraph.
code:
<div id="div18">
<p>This is a paragraph.</p>
<button>Return the offset coordinates of the p element</button>
</div>
<script>
$(document).ready(function(){
$("#div18 button").click(function(){
var x = $("#div18 p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
});
</script>
The offsetParent() method returns the first positioned parent element.
Tip: an element can be positioned with jQuery, or with the CSS position property (relative, absolute, or fixed).
Parameters: none
example: set the background color of the closest positioned parent element of the <p> element.
Click button to set the background color of the first positioned parent element of this paragraph.
code:
<div id="div19">
<button>Set background-color</button>
<div style="border:0.1vw solid black;width:30%;position:absolute;left:1vw;top:5w">
<div style="border:0.1vw solid black;margin:5vw;background-color:yellow">
<p>Click button to set the background color of the first positioned parent element of this
paragraph.</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#div19 button").click(function(){
$("#div19 p").offsetParent().css("background-color", "red");
});
});
</script>
The outerHeight() method returns the outer height of the FIRST matched element.
This method includes padding and border.
Parameters:
includeMargin : optional. A Boolean value specifying whether or not to include the margin: "false" - default. Does not include the margin; "true" - includes the margin.
example: return the outer height of a <div> element.
outerHeight() - returns the outer height of an element (includes padding and border).
code:
<div id="div20">
<div style="height:5vw;width:20vw;padding:1vw;margin:0.3vw;border:0.1vw solid blue;
background-color:lightblue;"></div><br>
<button>Display the outer height of div</button>
<p>outerHeight() - returns the outer height of an element (includes padding and border).</p>
</div>
<script>
$(document).ready(function(){
$("#div20 button").click(function(){
alert("Outer height of div: " + $("#div20 div").outerHeight());
});
});
</script>
The outerWidth() method returns the outer width of the FIRST matched element.
This method includes padding and border.
Parameters:
includeMargin : optional. A Boolean value specifying whether or not to include the margin: "false" - default. Does not include the margin; "true" - includes the margin.
example: return the outer width of a <div> element.
outerHeight() - returns the outer height of an element (includes padding and border).
code:
<div id="div21">
<div style="height:5vw;width:20vw;padding:1vw;margin:0.3vw;border:0.1vw solid blue;
background-color:lightblue;"></div><br>
<button>Display the outer height of div</button>
<p>outerHeight() - returns the outer height of an element (includes padding and border).</p>
</div>
<script>
$(document).ready(function(){
$("#div21 button").click(function(){
alert("Outer width of div: " + $("#div21 div").outerWidth());
});
});
</script>
The position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties: the top and left positions in pixels.
Parameters: none
example: return the top and left position of a <p> element
This is a paragraph.
code:
<div id="div22">
<p>This is a paragraph.</p>
<button>Return the top and left position of the p element</button>
</div>
<script>
$(document).ready(function(){
$("#div22 button").click(function(){
var x = $("#div22 p").position();
alert("Top position: " + x.top + " Left position: " + x.left);
});
});
</script>
The prepend() method inserts specified content at the beginning of the selected elements.
Tip: To insert content at the end of the selected elements, use the append() method.
Parameters:
content : required. Specifies the content to insert (can contain HTML tags). Possible values: HTML elements, jQuery objects, DOM elements
function(index,html) : optional. Specifies a function that returns the content to insert: "index" - returns the index position of the element in the set; "html" - returns the current HTML of the selected element
example: insert content at the beginning of all <p> elements.
This is a paragraph.
This is another paragraph.
List item 1
List item 2
List item 3
code:
<div id="div23">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</div>
<script>
$(document).ready(function(){
$("#div23 #btn1").click(function(){
$("#div23 p").prepend("<b>Prepended text</b>. ");
});
$("#div23 #btn2").click(function(){
$("#div23 ol").prepend("<li>Prepended item</li>");
});
});
</script>
The prependTo() method inserts HTML elements at the beginning of the selected elements.
Tip: to insert HTML elements at the end of the selected elements, use the appendTo() method.
Parameters:
content : required. Specifies the content to insert (must contain HTML tags). Note: If content is an existing element, it will be moved from its current position, and inserted at the beginning of the selected elements.
selector : required. Specifies on which elements to prepend the content to.
example: insert a <span> element at the beginning of each <p> element
This is a paragraph.
This is another paragraph.
code:
<div id="div24">
<button>Insert span element at the beginning of each p element</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div24 button").click(function(){
$("<span>Hello World! </span>").prependTo("#div24 p");
});
});
</script>
Syntax: $(selector).prop(property) or $(selector).prop(property,value) or $(selector).prop(property,function(index,currentvalue)) or $(selector).prop({property:value, property:value,...})
The prop() methodsets or returns properties and values of the selected elements.
When this method is used to return the property value, it returns the value of the FIRST matched element.
When this method is used to set property values, it sets one or more property/value pairs for the set of matched elements.
Note: The prop() method should be used to retrieve property values, e.g. DOM properties (like tagName, nodeName, defaultChecked) or your own custom made properties.
Tip: To retrieve HTML attributes, use the attr() method instead. To remove a property use the removeProp() method.
Parameters:
property : specifies the name of the property
value : specifies the value of the property
function(index,currentvalue) : specifies a function that returns the property value to set: " index" - receives the index position of the element in the set; "currentvalue" - receives the current property value of selected elements
example: add and remove a property named "color".
code:
<div id="div25">
<button>Add and remove a property</button><br><br>
<div></div>
</div>
<script>
$(document).ready(function(){
$("#div25 button").click(function(){
var $x = $("#div25 div");
$x.prop("color", "FF0000");
$x.append("The color property has the following value: " + $x.prop("color"));
$x.removeProp("color");
$x.append("<br>Now the color property has the following value: " + $x.prop("color"));
});
});
</script>
The remove() method removes the selected elements, including all text and child nodes. This method also removes data and events of the selected elements.
Tip: To remove the elements without removing data and events, use the detach() method instead.
Tip: To remove only the content from the selected elements, use the empty() method.
Parameters:
selector : optional. Specifies one or more elements to be removed. To remove multiple elements, separate them with a comma (,).
example: remove all <p> elements.
This is a paragraph.
This is another paragraph.
code:
<div id="div26">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Remove all p elements</button>
</div>
<script>
$(document).ready(function(){
$("#div26 button").click(function(){
$("#div26 p").remove();
});
});
</script>
The removeAttr() method removes one or more attributes from the selected elements.
Parameters:
attribute : required. Specifies one or more attributes to remove. To remove several attributes, separate the attribute names with a space
example: remove the style attribute from all <p> elements.
This is a heading
This is a paragraph.
This is another paragraph.
code:
<div id="div27">
<h4>This is a heading</h4>
<p style="font-size:120%;color:red">This is a paragraph.</p>
<p style="font-weight:bold;color:blue">This is another paragraph.</p>
<button>Remove the style attribute from all p elements</button>
</div>
<script>
$(document).ready(function(){
$("#div27 button").click(function(){
$("#div27 p").removeAttr("style");
});
});
</script>
The removeClass() method removes one or more class names from the selected elements.
Note: If no parameter is specified, this method will remove ALL class names from the selected elements.
Parameters:
classname : optional. Specifies one or more class names to remove. To remove several classes, separate the class names with space. Note: if this parameter is empty, all class names will be removed
function(index,currentclass) : optional. A function that returns one or more class names to remove: "index" - returns the index position of the element in the set; "currentclass" - returns the current class name of selected elements
example: remove the class name "intro" from all <p> elements.
This is a heading
This is a paragraph.
This is another paragraph.
code:
<div id="div28">
<h4>This is a heading</h4>
<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph.</p>
<button>Remove the "intro" class from all p elements</button>
</div>
<script>
$(document).ready(function(){
$("#div28 button").click(function(){
$("#div28 p").removeClass("intro");
});
});
</script>
The removeProp() method removes a property set by the prop() method.
Note: Do not use this method to remove HTML attributes like style, id, or checked. Use the removeAttr() method instead.
Parameters:
property : specifies the name of the property to remove.
example: add and remove a property named "color"
code:
<div id="div29">
<button>Add and remove a property</button><br><br>
<div></div>
</div>
<script>
$(document).ready(function(){
$("#div29 button").click(function(){
var $x = $("#div29 div");
$x.prop("color", "FF0000");
$x.append("The color property has the following value: " + $x.prop("color"));
$x.removeProp("color");
$x.append("<br>Now the color property has the following value: " + $x.prop("color"));
});
});
</script>
The replaceAll() method replaces selected elements with new HTML elements.
Parameters:
content : required. Specifies the content to insert (must contain HTML tags)
selector : required. Specifies which elements to be replaced.
example: replace all <p> elements with <h4> elements
This is a paragraph.
This is another paragraph.
This is another paragraph.
code:
<div id="div30">
<button>Replace all p elements with h4 elements</button><br>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div30 button").click(function(){
$("<h4>Hello world!</h4>").replaceAll("#div30 p");
});
});
</script>
The replaceWith() method replaces selected elements with new content.
Parameters:
content : required. Specifies the content to insert (can contain HTML tags). Possible values: HTML elements, jQuery objects, DOM elements
function(index) : optional. Specifies a function that returns the content to replace: :index: - returns the index position of the element in the set.
example: replace the first <p> element with new text
This is a paragraph.
This is another paragraph.
code:
<div id="div31">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Replace the first p element with new text</button>
</div>
<script>
$(document).ready(function(){
$("#div31 button").click(function(){
$("#div31 p:first").replaceWith("Hello world!");
});
});
</script>
Syntax: $(selector).scrollLeft() or $(selector).scrollLeft(position)
The scrollLeft() methodsets or returns the horizontal scrollbar position for the selected elements.
Tip: When the scrollbar is on the far left side, the position is 0.
When used to return the position: this method returns the horizontal position of the scrollbar for the FIRST matched element.
When used to set the position: this method sets the horizontal position of the scrollbar for ALL matched elements.
Parameters:
position : Specifies the horizontal scrollbar position in pixels.
example: return the horizontal scrollbar position for a <div> element.
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
Move the scrollbar to the right and click the button again.
code:
<div id="div32">
<div style="border:0.1vw solid black;width:10vw;height:13vw;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div><br>
<button>Return the horizontal position of the scrollbar</button>
<p>Move the scrollbar to the right and click the button again.</p>
</div>
<script>
$(document).ready(function(){
$("#div32 button").click(function(){
alert($("#div32 div").scrollLeft() + " px");
});
});
</script>
Syntax: $(selector).scrollTop() or $(selector).scrollTop(position)
The scrollTop() methodsets or returns the vertical scrollbar position for the selected elements.
Tip: When the scrollbar is on the top, the position is 0.
When used to return the position: this method returns the vertical position of the scrollbar for the FIRST matched element.
When used to set the position: this method sets the vertical position of the scrollbar for ALL matched elements.
Parameters:
position : Specifies the vertical scrollbar position in pixels.
example: return the vertical scrollbar position for a <div> element.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
Move the scrollbar down and click the button again.
code:
<div id="div33">
<div style="border:0.1vw solid black;width:6vw;height:10vw;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
</div><br>
<button>Return the vertical position of the scrollbar</button>
<p>Move the scrollbar down and click the button again.</p>
</div>
<script>
$(document).ready(function(){
$("#div33 button").click(function(){
alert($("#div33 div").scrollTop() + " px");
});
});
</script>
Syntax: $(selector).text() or $(selector).text(content) or $(selector).text(function(index,currentcontent))
The text() methodsets or returns the text content of the selected elements.
When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed).
When this method is used to set conten, it overwrites the content of ALL matched elements.
Tip: To set or return the innerHTML (text + HTML markup) of the selected elements, use the html() method.
Parameters:
content : required. Specifies the new text content for the selected elements. Note: Special characters will be encoded
function(index,currentcontent) : optional. Specifies a function that returns the new text content for the selected elements: "index" - returns the index position of the element in the set; "currentcontent" - returns current content of selected elements
example: set text content for all <p> elements
This is a paragraph.
This is another paragraph.
code:
<div id="div34">
<button>Set text content for all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#div34 button").click(function(){
$("#div34 p").text("Hello world!");
});
});
</script>
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
However, by using the "switch" parameter, you can specify to only remove, or only add a class name.
Parameters:
classname : required. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a space
function(index,currentclass) : optional. Specifies a function that returns one or more class names to add/remove: "index" - returns the index position of the element in the set; "currentclass" - returns current class name of selected elements.
switch : optional. A Boolean value specifying if the class should only be added (true), or only be removed (false).
example: toggle between adding and removing the "main" class name for all <p> elements.
This is a paragraph.
This is another paragraph.
Note: Click the button more than once to see the toggle effect.
code:
<div id="div35">
<button>Toggle class "main" for p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><b>Note:</b> Click the button more than once to see the toggle effect.</p>
</div>
<style>
.main{font-size: 120%; color: red;}
</style>
<script>
$(document).ready(function(){
$("#div35 button").click(function(){
$("#div35 p").toggleClass("main");
});
});
</script>
The unwrap() method removes the parent element of the selected elements.
Parameters: none
example: remove the parent element of all <p> elements.
This is a paragraph inside a div element.
This is a paragraph inside an article element.
code:
<div id="div36">
<div id="divA">
<p>This is a paragraph inside a div element.</p>
</div>
<article>
<p>This is a paragraph inside an article element.</p>
</article>
<button>Remove the parent element of each p element</button>
</div>
<style>
#divA{background-color: yellow;}
article{background-color: pink;}
</style>
<script>
$(document).ready(function(){
$("#div36 button").click(function(){
$("#div36 p").unwrap();
});
});
</script>
Syntax: $(selector).val() or $(selector).val(value) or $(selector).val(function(index,currentvalue))
The val() methodreturns or sets the value attribute of the selected elements.
When used to return value: this method returns the value of the value attribute of the FIRST matched element.
When used to set value: this method sets the value of the value attribute for ALL matched elements.
Note: The val() method is mostly used with HTML form elements.
Parameters:
value : required. Specifies the value of the value attribute.
function(index,currentvalue) : optional. Specifies a function that returns the value to set: "index" - returns the index position of the element in the set; "currentvalue" - returns the current value attribute of selected elements.
example: Set the value of the <input> field.
Name:
code:
<div id="div37">
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</div>
<script>
$(document).ready(function(){
$("#div37 button").click(function(){
$("input:text").val("Dennis Schrooten");
});
});
</script>
Syntax: $(selector).width() or $(selector).width(value) or $(selector).width(function(index,currentwidth))
The width() methodsets or returns the width of the selected elements.
When this method is used to return width, it returns the width of the FIRST matched element.
When this method is used to set width, it sets the width of ALL matched elements.
This method does not include padding, border, or margin.
Parameters:
value : required for setting width. Specifies the width in px, em, pt, etc. Default unit is px
function(index,currentwidth) : optional. Specifies a function that returns the new width of selected elements: "index" - returns the index position of the element in the set; "currentwidth" - returns the current width of the selected element
example: return the width of a <div> element.
code:
<div id="div38">
<div style="height:10vw;width:20vw;padding:1vw;margin:0.3vw;border:0.1vw solid blue;
background-color:lightblue;"></div><br>
<button>Display the width of div</button>
</div>
<script>
$(document).ready(function(){
$("#div38 button").click(function(){
alert("Width of div: " + $("#div38 div").width());
});
});
</script>
The wrap() method wraps specified HTML element(s) around each selected element.
Parameters:
wrappingElement : required. Specifies what HTML element(s) to wrap around each selected element. Possible values: HTML elements, jQuery objects, DOM elements
function(index) : optional. Specifies a function that returns the wrapping element: "index" - returns the index position of the element in the set.
example: wrap a <div> element around each <p> element.
This is a paragraph.
This is another paragraph.
code:
<div id="div39">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Wrap a div element around each p element</button>
</div>
<style>
.divB{background-color: pink;}
</style>
<script>
$(document).ready(function(){
$("#div39 button").click(function(){
$("#div39 p").wrap("<div class='divB'></div>");
});
});
</script>
The wrapAll() method wraps specified HTML element(s) around all selected elements.
Parameters:
wrappingElement : required. Specifies what HTML element(s) to wrap around the selected elements. Possible values: HTML elements, jQuery objects, DOM elements
example: wrap a <div> element around all <p> elements.
This is a paragraph.
This is another paragraph.
code:
<div id="div40">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Wrap a div element around all p elements</button>
</div>
<style>
.divC{background-color: magenta;}
</style>
<script>
$(document).ready(function(){
$("#div40 button").click(function(){
$("#div40 p").wrapAll("<div class='divC'></div>");
});
});
</script>
The wrapInner() method wraps specified HTML element(s) around the content (innerHTML) of each selected element.
Parameters:
wrappingElement : required. Specifies what HTML element(s) to wrap around the content of each selected element. Possible values: HTML elements, jQuery objects, DOM elements
function(index) : optional. Specifies a function that returns the wrapping element: "index" - returns the index position of the element in the set
example: wrap a <b> element around the content of each <p> element.
This is a paragraph.
This is another paragraph.
code:
<div id="div41">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Wrap a b element around the content of each p element</button>
</div>
<script>
$(document).ready(function(){
$("#div41 button").click(function(){
$("#div41 p").wrapInner("<b></b>");
});
});
</script>
