Roshan Book

My Tech Notebook

Jquery

Sample: Calling a function

<html>
<head>
<title>Select a paragraph</title>
<script type=”text/javascript”
src=”http://code.jquery.com/jquery-
latest.js”>
</script>
<script type=”text/javascript”>
function stripe( {
)
$(‘#third’)
.toggleClass(‘striped’);;
}
</script>

<style>

p.striped {
background-color: cyan;
}
</style>
</head>
<body>
<h1>Select a paragraph</h1>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p id=”third”>This is paragraph
3.</p>
<p>This is paragraph 4.</p>
</div>
<form>
<input type = “button”
value=”Stripe”
onclick=”stripe(
)”
</input>
</form>
</body>
</html>

Jquery Ajax Methods

Request Description
$(selector).load(url,data,callback) Load remote data into selected elements
$.ajax(options) Load remote data into an XMLHttpRequest object

Jquery CSS Methods

CSS Properties Description
$(selector).css(name) Get the style property value of the first matched element
$(selector).css(name,value) Set the value of one style property for matched elements
$(selector).css({properties}) Set multiple style properties for matched elements
$(selector).height(value) Set the height of matched elements
$(selector).width(value) Set the width of matched elements

Jquery HTML Manipulation

Function Description
$(selector).html(content) Changes the (inner) HTML of selected elements
$(selector).append(content) Appends content to the (inner) HTML of selected elements
$(selector).after(content) Adds HTML after selected elements

Jquery Effects

Function Description
$(selector).hide() Hide selected elements
$(selector).show() Show selected elements
$(selector).toggle() Toggle (between hide and show) selected elements
$(selector).slideDown() Slide-down (show) selected elements
$(selector).slideUp() Slide-up (hide) selected elements
$(selector).slideToggle() Toggle slide-up and slide-down of selected elements
$(selector).fadeIn() Fade in selected elements
$(selector).fadeOut() Fade out selected elements
$(selector).fadeTo() Fade out selected elements to a given opacity
$(selector).animate() Run a custom animation on selected elements

Jquery events

Event Method Description
$(document).ready(function) Binds a function to the ready event of a document
(when the document is finished loading)
$(selector).click(function) Triggers, or binds a function to the click event of selected elements
$(selector).dblclick(function) Triggers, or binds a function to the double click event of selected elements
$(selector).focus(function) Triggers, or binds a function to the focus event of selected elements
$(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected elements

Jquery Selectors :

Syntax Description
$(this) Current HTML element
$(“p”) All <p> elements
$(“p.intro”) All <p> elements with
$(“p#intro”) All <p> elements with id=”intro”
$(“p#intro:first”) The first <p> element with id=”intro”
$(“.intro”) All elements with
$(“#intro”) The first element with id=”intro”
$(“ul li:first”) The first <li> element of each <ul>
$(“[href$=’.jpg’]”) All elements with an href attribute that ends with “.jpg”
$(“div#intro .head”) All elements with inside a <div> element with id=”intro”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: