JQUERY

HTML/CSS

JavaScript

Jquery

PHP

MySql

OOPS

Smarty

Command

Menu

Basic

Document

Selector

Events

Effect

HTML

Ajax

Serialize

App

jQuery HTML Manipulation

The following lists of methods used to manipulate the HTML.

.html(content);

The " html() " method sets 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.

Syntax $(selector).html();
It returns the content (innerHTML) of the selected elements.
$(selector).html(content);
It sets the new content (innerHTML) of the selected elements.

Note:
content: Required. Specifies the new content for the selected elements (can contain HTML tags)

.append(content)

The " append() " method inserts specified content at the end of the selected elements.

Syntax $(selector).append(content);

Note:
content: Required. Specifies the content to insert for the selected elements (can contain HTML tags)

.prepend(content)

The " prepend() " method inserts specified content at the beginning of the selected elements.

Syntax $(selector).prepend(content);

Note:
content: Required. Specifies the content to insert for the selected elements (can contain HTML tags)

.after(content)

Inserts content after element

Syntax $(selector).after(content);

Note:
content: Required. Specifies the content to insert for the selected elements (can contain HTML tags)

.before(content)

Inserts content before element

Syntax $(selector).before(content);

Note:
content: Required. Specifies the content to insert for the selected elements (can contain HTML tags)

example:

				
				This is div for html manipulation

Demo:

This is div for html manipulation

.text()

The " text() " Sets or returns the text content of selected elements.
When this method is used to return the text content, it returns the text content of selected elements.
When this method is used to set the text content, it sets the text content of selected elements.

Syntax $(selector).text()
It returns the text content of the selected element.
$(selector).text(value)
It sets the text content of the selected element..

example:

This is some bold text in a paragraph.

Demo:

This is some bold text in a paragraph.

.val()

The " val() " Sets or returns the value of form fields.
When this method is used to return the value, it returns the value of selected elements.
When this method is used to set the value, it sets the value of selected elements.

Syntax $(selector).val()
It returns the value of form fields.
$(selector).val(value)
It sets the the value of form fields.

example:

Demo:

.attr()

The " attr() " method sets 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.

Syntax $(selector).attr(attribute)
It returns the value of an attribute.
$(selector).attr(attribute,value)
It sets the attribute and value.
$(selector).attr({attribute:value, attribute:value,...})
It sets multiple attributes and values.

Note:
attribute : Specifies the name of the attribute
value : Specifies the value of the attribute

example:

Demo:

example:

This is another paragraph.

Demo:

This is another paragraph.

.removeAttr()

The " removeAttr() " method Remove an attribute from each element in the set of matched elements.

Syntax $(selector).removeAttr(attributeName)

Note:
attributeName:required Specifies one or more attributes to remove. To remove several attributes, separate the attribute names with a space

example:

This is another paragraph.

Demo:

This is another paragraph.

.position()

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.

Syntax $(selector).position()

Note:
classname: Optional. Specifies one or more class names to remove. To remove several classes, separate the class names with space

example:

This is a paragraph.

Demo:

This is a paragraph.

.each()

The " each() " method iterate over a jQuery object, executing a function for each matched element.

Syntax $(selector).each( function(index) )

example:

This is a paragraph 0.

This is a paragraph 1.

This is a paragraph 2.

Demo:

This is a paragraph 0.

This is a paragraph 1.

This is a paragraph 2.

.eq()

The " eq() " method reduce the set of matched elements to the one at the specified index.

Syntax $(selector).eq(index)

Note:
index: An integer indicating the 0-based position of the element.

example:

This is a paragraph 0.

This is a paragraph 1.

This is a paragraph 2.

Demo:

This is a paragraph 0.

This is a paragraph 1.

This is a paragraph 2.

.is()

The " is() " method Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

Syntax $(selector).is( element )

Note:
classname: An integer indicating the 0-based position of the element.

example:

			       
			    Checkbox

Demo:

Checkbox

.first()

The " first() " method constructs a new jQuery object from the first element in that set.

Syntax $(selector).first()

example:

This is first paragraph.

This is second paragraph .

This is third paragraph .

Demo:

This is first paragraph.

This is second paragraph .

This is third paragraph .

.last()

The " last() " method constructs a new jQuery object from the last element in that set.

Syntax $(selector).last()

example:

This is first paragraph.

This is second paragraph .

This is third paragraph .

Demo:

This is first paragraph.

This is second paragraph .

This is third paragraph .

.length

" Length " returns number of elements in the jQuery object.

Syntax $(selector).length

example:

This is first paragraph.

This is second paragraph .

This is third paragraph .

Demo:

This is first paragraph.

This is second paragraph .

This is third paragraph .

jQuery.isNumeric( value )

The " .isNumeric() " method Determines whether its argument is a number.

Syntax $.isNumeric( value )

example:

Demo:

.on()

The " on() " method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.There was an another method called " .live() " for doing the same , but in jquery 1.9 thats now removed.

Syntax $(selector).on(event,data,function)

Note:
event: Required. Specifies one or more events to attach to the elements.
data: Optional. Specifies additional data to pass along to the function
function: Required. Specifies the function to run when the event occurs

example:

Click me!

Demo:

Click me!

.next()

The " next() " method Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector..

Syntax .next([selector])

Note:
selector: Optional. A string containing a selector expression to match elements against.

example:

			    
			    
				list item 1
				list item 2
				list item 3 having class third-item
				list item 4
				list item 5

Demo:

list item 1
list item 2
list item 3 having class third-item
list item 4
list item 5

.prev()

The " prev() " method Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

Syntax .prev([selector])

Note:
selector: Optional. A string containing a selector expression to match elements against.

example:

			    
			    
				list item 1
				list item 2
				list item 3 having class third-item
				list item 4
				list item 5

Demo:

list item 1
list item 2
list item 3 having class third-item
list item 4
list item 5

.not()

The " not() " method remove elements from the set of matched elements.

Syntax .not(selector)

Note:
selector: A string containing a selector expression to match elements against.

example:

First paragraph

Second paragraph having id : prgh_id

Third paragraph

Demo:

First paragraph

Second paragraph having id : prgh_id

Third paragraph

.parent()

The " parent() " method Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

Syntax .parent([selector])

Note:
selector:optional. A string containing a selector expression to match elements against.

example:

			    
			    Hello
			    Hello Again

Demo:

Hello

Hello Again

.submit()

The " submit() " method triggers the submit event, or attaches a function to run when a submit event occurs.

Syntax $(selector).submit(function)

Note:
function:optional. Specifies the function to run when the submit event is triggered.

example:

			    
			    
				First name: 
				

				Last name:

Demo:

First name:
Last name:

.find()

The " find() " method Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Syntax .find(selector)

Note:
selector:optional. A string containing a selector expression to match elements against.

example:

Hello, how are you?

Me? I'm good.

Demo:

Hello, how are you?

Me? I'm good.

.insertAfter()

The " insertAfter() " method inserts HTML elements after the selected elements.

Syntax $(content).insertAfter(selector)

Note:
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:

Existing content

This is a paragraph.

This is another paragraph.

Demo:

Existing content

This is a paragraph.

This is another paragraph.

.insertBefore()

The " insertBefore() " method inserts HTML elements before the selected elements.

Syntax $(content).insertBefore(selector)

Note:
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:

Existing content

This is a paragraph.

This is another paragraph.

Demo:

Existing content

This is a paragraph.

This is another paragraph.

.parseJSON()

The " parseJSON() " Takes a well-formed JSON string and returns the resulting JavaScript object.

Syntax $.parseJSON(json)

Note:
json:Required. : The JSON string to parse.
Type : String

example:

Demo:

JSON.stringify()

The " JSON.stringify() " Converts a JavaScript value to a JavaScript Object Notation (JSON) string.

Syntax JSON.stringify(value [, replacer] [, space])

Note:
value:Required . A JavaScript value, usually an object or array, to be converted.
replacer:Optional. A function or array that transforms the results.
If replacer is a function, JSON.stringify calls the function, passing in the key and value of each member.
If replacer is an array, only members with key values in the array will be converted.
space:Optional. Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.
Retrun value:A string that contains the JSON text.

example:

Demo:

Questions

How do I disable/enable a form element ?

Ans - // Disable #x
$('#x').attr('disabled', true);
// Enable #x
$('#x').attr('disabled', false);

Finds all inputs that are not checked and highlights the next sibling span. Notice there is no change when clicking the checkboxes since no click events have been linked.

Ans -
<div>
<input type="checkbox" name="a" />
<span>Mary</span>
</div>
<div>
<input type="checkbox" name="b" />
<span>lcm</span>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<span>Peter</span>
</div>
<script>
$("input:not(:checked) + span").css("background-color", "yellow");
$("input").attr("disabled", "disabled");
</script>

Finds all inputs that don't have the name 'newsletter' and appends text to the span next to it

Ans -
<div>
<input type="radio" name="newsletter" value="Hot Fuzz" />
<span>name is newsletter</span>
</div>
<div>
<input type="radio" value="Cold Fusion" />
<span>no name</span>
</div>
<div>
<input type="radio" name="accept" value="Evil Plans" />
<span>name is accept</span>
</div>
<script>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>

How to count input element which are not checked?

Ans -
$("input:not(:checked)").length;
OR
$("input").not(":checked").length;

How to count input element which are checked ?

Ans -
$("input:checked").length;

After editing Click here:	Output:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var txt = "Hello World"; $("#divcnt").text(txt); }); </script> <div id="divcnt"></div>

JQUERY HTML/CSS JavaScript Jquery PHP MySql OOPS Smarty Command Menu Basic Document Selector Events Effect HTML Ajax Serialize App

jQuery HTML Manipulation

.html(content);

.append(content)

.prepend(content)

.after(content)

.before(content)

.text()

.val()

.attr()

.prop()

.remove()

.empty()

.css()

This is a heading

This is a heading

.addClass()

.removeClass()

.removeAttr()

.position()

.each()

.eq()

.is()

.first()

.last()

.length

jQuery.isNumeric( value )

JQUERY

HTML/CSS

JavaScript

Jquery

PHP

MySql

OOPS

Smarty

Command

Menu

Basic

Document

Selector

Events

Effect

HTML

Ajax

Serialize

App