DotNet Tutorials Point: December 2017

jQuery prop() method

The prop() method sets or returns the 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.

Syntex:

$(selector).prop(property)

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

var $x = $("div");

$x.prop("color", "AA0000");

$x.append("The color property has the following value: " + $x.prop("color"));

$x.removeProp("color");

$x.append("<br>So Now the color property has the following value: " + $x.prop("color"));

});

</script>

</head>

<body>

<button>click here -> Add and remove a property</button><br><br>

</body>

</html>

jQuery offset() method

The offset() method set or returns the offset coordinates for the selected elements, relative to the document.

Syntex:

$(selector).offset()

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

var x = $("p").offset();

alert("Top: " + x.top + " Left: " + x.left);

});

</script>

</head>

<body>

<button>click here to Return the offset coordinates of the p element</button>

<p>This is a paragraph.</p>

</body>

</html>

jQuery position() method

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. So we can say that The .position() method allows us to retrieve the current position of an element

Syntex:

$(selector).position()

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

var x = $("p").position();

alert("Top position: " + x.top + " Left position: " + x.left);

});

</script>

</head>

<body>

<p>This is a paragraph and we will get the position of this paragraph using position() method.</p>

<button>it will Return the top and left position of the p element</button>

</body>

</html>

jQuery addClass() method

jQuery addClass() method

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.

Syntax

$(selector).addClass(classname,function(index,currentclass))

Example :

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p:first").addClass("intro");

});

</script>

<style>

.intro {

font-size: 310%;

color: Pink;

}

</style>

</head>

<body>

<button> Add a class name to the first p element</button>

<h1>This is a heading....</h1>

<p>This is a paragraph....</p>

<p>This is another paragraph.....</p>

</body>

</html>

jquery hasClass() method

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".

Syntax

$(selector).hasClass(classname)

Example

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

alert($("p").hasClass("intro"));

});

</script>

<style>

.intro {

font-size: 120%;

color: red;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p class="intro">This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Does any p element have an "intro" class?</button>

</body>