Wednesday 15 August 2012

Jquery Html

For more tutorials visit our site www.prashobh.webs.com (a make it easy product)


HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.jQuery contains powerful methods (functions) for changing and manipulating HTML elements and attributes.

Example

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$("p").html("Jquery");
});
});
</script>
</head>
<body>
<h2>heading</h2>
<p>paragraph.</p>
<p>another paragraph.</p>
<button>Click me</button>
</body>
</html>



Jquery Events

For more tutorials visit our site www.prashobh.webs.com (a make it easy product)


These methods are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.

.bind()

Event Handler Attachment Attach a handler to an event for the elements.

.blur()

Form Events, Forms Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

.change()

Form Events, Forms Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

.click()

Mouse Events Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

.dblclick()

Mouse Events Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.

.delegate()

Event Handler Attachment Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

.die()

Deprecated, Event Handler Attachment Remove all event handlers previously attached using .live() from the elements.

.error()

Browser Events, Deprecated Bind an event handler to the "error" JavaScript event.

event.currentTarget

Event Object The current DOM element within the event bubbling phase.

event.data

Event Object An optional data map passed to an event method when the current executing handler is bound.

event.delegateTarget

Event Object The element where the currently-called jQuery event handler was attached.

event.isDefaultPrevented()

Event Object Returns whether event.preventDefault() was ever called on this event object.

event.isImmediatePropagationStopped()

Event Object Returns whether event.stopImmediatePropagation() was ever called on this event object.

event.isPropagationStopped()

Event Object Returns whether event.stopPropagation() was ever called on this event object.

event.namespace

Event Object The namespace specified when the event was triggered.

event.pageX

Event Object The mouse position relative to the left edge of the document.

event.pageY

Event Object The mouse position relative to the top edge of the document.

event.preventDefault()

Event Object If this method is called, the default action of the event will not be triggered.

event.relatedTarget

Event Object The other DOM element involved in the event, if any.

event.result

Event Object The last value returned by an event handler that was triggered by this event, unless the value was undefined.

event.stopImmediatePropagation()

Event Object Prevents other event handlers from being called.

event.stopPropagation()

Event Object Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

event.target

Event Object The DOM element that initiated the event.

event.timeStamp

Event Object The difference in milliseconds between the time the browser created the event and January 1, 1970.

event.type

Event Object Describes the nature of the event.

event.which

Event Object For key or mouse events, this property indicates the specific key or button that was pressed.

.focus()

Form Events, Forms Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

.focusin()

Keyboard Events, Mouse Events Bind an event handler to the "focusin" event.

.focusout()

Keyboard Events, Mouse Events Bind an event handler to the "focusout" JavaScript event.

.hover()

Mouse Events Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

.keydown()

Keyboard Events Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.

.keypress()

Keyboard Events Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.

.keyup()

Keyboard Events Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

.live()

Deprecated, Event Handler Attachment Attach an event handler for all elements which match the current selector, now and in the future.

.load()

Deprecated, Document Loading Bind an event handler to the "load" JavaScript event.

.mousedown()

Mouse Events Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.

.mouseenter()

Mouse Events Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

.mouseleave()

Mouse Events Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

.mousemove()

Mouse Events Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.

.mouseout()

Mouse Events Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.

.mouseover()

Mouse Events Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.

.mouseup()

Mouse Events Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.

.off()

Event Handler Attachment Remove an event handler.

.on()

Event Handler Attachment Attach an event handler function for one or more events to the selected elements.

.one()

Event Handler Attachment Attach a handler to an event for the elements. The handler is executed at most once per element.

jQuery.proxy()

Event Handler Attachment, Utilities Takes a function and returns a new one that will always have a particular context.

.ready()

Document Loading Specify a function to execute when the DOM is fully loaded.

.resize()

Browser Events Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.

.scroll()

Browser Events Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.

.select()

Form Events, Forms Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

.submit()

Form Events, Forms Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

.toggle()

Deprecated, Mouse Events Bind two or more handlers to the matched elements, to be executed on alternate clicks.

.trigger()

Event Handler Attachment Execute all handlers and behaviors attached to the matched elements for the given event type.

.triggerHandler()

Event Handler Attachment Execute all handlers attached to an element for an event.

.unbind()

Event Handler Attachment Remove a previously-attached event handler from the elements.

.undelegate()

Event Handler Attachment Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

.unload()

Deprecated, Document Loading Bind an event handler to the "unload" JavaScript event.


Jquery Selectors

For more tutorials visit our site www.prashobh.webs.com (a make it easy product)

jQuery selectors allow to select and manipulate HTML elements as a group or as a single element.Selectors allow us to get the exact element/attribute you want from your HTML document.jQuery supports the existing CSS Selectors, and in addition, it has some own custom selectors.All type of selectors in jQuery, start with the dollar sign and parentheses: $().


Examples of jQuery Selectors

$("*") selects all elements.

$("p") selects all <p> elements.

$("p.intro") selects all <p> elements with class="intro".

$("p#intro") selects the first <p> elements with id="intro"

$(":animated") selects all elements that are currently animated.

$(":button") selects all <button> elements and <input> elements of type="button"

$(":even") selects even elements.

$(":odd") selects odd elements.

Some more example

$(this) Selects the current HTML element

$("p#intro:first") Selects the first <p> element with id="intro"

$(".intro") Selects all elements with class="intro"

$("#intro") Selects the first element with id="intro"

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("[href$='.jpg']") Selects all elements with an href attribute that ends with ".jpg"

$("[href='#']") Selects all elements with an href value equal to "#"

$("[href!='#']") Selects all elements with an href value NOT equal to "#"

$("div#intro .head") Selects all elements with class="head" inside a <div> element with id="intro"


Jquery Introduction

For more tutorials visit our site www.prashobh.webs.com (a make it easy product)


jQuery is a library of JavaScript Functions.jQuery simplifies JavaScript programming.The jQuery library is providing many easy to use functions and methods to make rich applications. These functions are very easy to learn and even a designer can learn it fast. Due to these features jQuery is very popular and in high demand among the developers. You can use jQuery in all the web based applications irrespective of the technology.jQuery is java script and can be used with JSP, Servlets, ASP, PHP, CGI and almost all the web programming languages.The jQuery code is very simple and easy to learn.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>

<body>
<p>click on me,see the magic.</p>
</body>

</html>

Before you start studying jQuery, you should have a basic knowledge of HTML,CSS,JavaScript. If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft. Two versions of jQuery are available.You can download from Jquery plugin.com


The jQuery library contains the following features:

  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification
  • AJAX
  • Utilities

How to Add the jQuery Library to Your Pages

In this method you should download the jquery plugin and keep in your folder.

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft.

Google

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
</head>

OR

Microsoft

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">
</script>
</head>