JQuery uses powerful methods or functions for changing and manipulating HTML elements and attributes. The HTML manipulations are
1) Changing the HTML content
The html() method helps to change the contents or innerHTML of selected elements.
Syntax: –
$(selector).html(content)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“p”).html(“Hai”);
} );
} );
</script>
</head>
<body>
<h2> This is a heading</h2>
<p> This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
2) Adding HTML content
The append() methods helps to add the content to the inside of selecting or matching HTML elements. The prepend() method prepends the contents to the inside of matching HTML elements.
Syntax: –
$(selector).prepend(content)
Eg:-
<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”jquery.js"></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“p”).append(“ <b>Hai</b>.”);
} );
} );
</script>
</head>
<body>
<h2> This is a heading</h2>
<p> This is a paragraph.</p>
<p> This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3) Other HTML manipulation
1) after():- This method inserts HTML content after all matching elements.
Syntax: –
$(selector).after(content)
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“p”).after(“Hai”);
} );
} );
</script>
</head>
<body>
<h2> This is a heading</h2>
<p> This is a paragraph.</p>
<p> This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
2) before():-
This method inserts HTML content before all selecting or matching elements.
Syntax: –
$(selector).before(content)
3) addClass():-This method inserts content at the end of (but still inside) selected elements
Syntax 1:-
$(selector).addClass(class)
Syntax 2:-
$(selector).addClass(function(index,oldclass))
4) appendTo():-It inserts content at the end of (but still inside) selected elements.
Syntax: –
$(content).appendTo(selector)
5) attr():- This method sets or returns an attribute and value of selected elements.
Syntax for return attribute value: –
$(selector).attr(attribute)
Syntax for set attribute/value: –
$(selector).attr(attribute,value)
Syntax for set attribute/value using s function:-
$(selector).attr(attribute,function(index,oldvalue))
Syntax for set multiple attribute/value pairs: –
$(selector).attr({attribute:value, attribute:value, ...})
6) clone():-This method makes a copy of selected elements.
READ JQuery Basics
Syntax: –
$(selector).clone(includeEvents)
7) detach():-It removes the selected elements but keeps a copy of selected items.
Syntax: –
$(selector).detach()
8) empty():- It removes all child elements and content from selected elements.
Syntax: –
$(selector).empty()
9) hasClass():- It hecks if any of the selected elements have a specified class.
Syntax: –
$(selector).hasClass(class)
10) insertAfter():- It inserts HTML markup or elements after selected elements.
Syntax: –
$(content).insertAfter(selector)
In the above syntax the parameter content defines the content to insert. The possible values are,
- A selector expression
- HTML markup
The selector parameter defines where to insert the content.
11) insertBefore():- This method inserts HTML markup or elements before selected elements.
Syntax: –
$(content).insertBefore(selector)
In the above syntax the parameter content defines the content to insert. The possible values are,
- A selector expression
- HTML markup
The selector parameter defines where to insert the content.
12) prependTo() :- This inserts content at the beginning of (but still inside) selected elements.
Syntax: –
$(content).prependTo(selector)
13) remove():- It removes selected elements.
Syntax: –
$(selector).remove()
14) removeAttr():- This method removes an attribute from selected elements.
Syntax: –
$(selector).removeAttr(attribute)
15) removeClass():- It removes one or more classes (for CSS) from selected elements.
Syntax: –
$(selector).removeClass(classname)
Syntax for remove class using a function:-
$(selector).removeClass(function(index,oldclass))
16) replaceAll():- It replaces selected elements with new content.
Syntax: –
$(content).replaceAll(selector)
The parameter content defines the new content. The possible values are,
- HTML code – like “<div>Hello world</div>”
- New elements – like document.createElement(“div”)
- Existing elements – like $(“.div1”)
The selector parameter specifies which elements to be replaced.
17) replaceWith():- It replaces selected elements with new content.
READ Jquery Javascript
Syntax: –
$(selector).replaceWith(content)
Syntax for replace elements using a function: – $(selector).replaceWith(function())
18) text():- This method sets or returns the text content of selected elements.
Syntax for return text content: –
$(selector).text()
Syntax for set text content: –
$(selector).text(content).
19) toggleClass():- This method toggles between adding/removing one or more classes (for CSS) from selected elements.
Syntax: –
$(selector).toggleClass(class,switch)
Syntax for toggle class by using a function:-
$(selector).toggleClass(function(index,class),switch).
20) unwrap():- It removes the parent element of the selected elements.
Syntax: –
$(selector).unwrap()
21) val():- this method sets or returns the value attribute of the selected elements (form elements).
Syntax for return the value attribute: –
$(selector).val()
$(selector).val(value)
Syntax for set the value attribute by using a function:-
$(selector).val(function(index,oldvalue))
22) wrap():- It wraps specified HTML element(s) around each selected element.
Syntax: –
$(selector).wrap(wrappingElement)
The parameter wrappingElement specifies what HTML element(s) to wrap around each selected element. The possible values are,
- HTML elements – like “<div></div>” or “<div><b></b></div>”
- DOM element – like document.createElement(“div”)
- Existing elements – like $(“.div1”)
Syntax for wrap elements by using s function: – $(selector).wrap(function())
23) wrapAll():- This method wraps specified HTML element(s) around all selected elements.
Syntax: –
$(selector).wrapAll(wrappingElement)
24) wrapInner(): This method wraps specified HTML element(s) around the content of each selected element.
Syntax: –
$(selector).wrapInner(wrappingElement)
Syntax for wrap content by using a function: – $(selector).wrapInner(function()).
No comments:
Post a Comment