I have collected the Jquery basic info from different sites, which will be helpful for the one who likes to learn Jquery.
$(this).hide()
Demonstrates the jQuery hide() function, hiding the current HTML element.
$("#test").hide()
Demonstrates the jQuery hide() function, hiding the element with id="test".
$("p").hide()
Demonstrates the jQuery hide() function, hiding all
elements.
$(".test").hide()
Demonstrates the jQuery hide() function, hiding all elements with class="test".
________________________________________
jQuery Element Selectors
$("p").css("background-color","yellow");
Syntax Description
$(this) Current HTML element
$("p") All
elements
$("p.intro") All
elements with class="intro"
$(".intro") All elements with class="intro"
$("#intro") The first element with id="intro"
$("ul li:first") The first <> element of each
$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"
$("div#intro .head") All elements with class="head" inside a
________________________________________
jQuery Name Conflicts
jQuery uses the $ sign as a shortcut for jQuery.
Some other JavaScript libraries also use the dollar sign for their functions (like Prototype).
jQuery has a method called noConflict() to deal with this.
var jq=jQuery.noConflict(), lets you use your own name (like jq) instead of the dollar sign.
________________________________________
jQuery Events
Here are some examples of event functions in jQuery:
Event Function Binds a Function to
$(document).ready(function) The ready event of a document
(when an HTML document is ready to use)
$(selector).click(function) The click event of selected elements
$(selector).dblclick(function) The double click event of selected elements
$(selector).focus(function) The focus event of selected elements
$(selector).mouseover(function) The mouse over event of 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() Fadeout selected elements to an opacity
$(selector).animate() Run a custom animation on selected elements
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).toggle(speed,callback)
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
$(selector).animate({params},[duration],[easing],[callback])
The speed parameter can take the values: "slow", "fast", "normal", or milliseconds.
The opacity parameter in the fadeTo() functions allows fading to a given opacity.
The callback parameter is the name of a function to be executed after the hide (or show) function completes.
The key parameter is params. It defines the properties that will be animated. Many properties can be animated at the same time:
The second parameter is duration. It defines the time used to apply the animation. I takes the values "fast", "slow", "normal", or milliseconds.
**HTML elements are positioned static by default and cannot be moved.
To make elements moveable, set the CSS position to relative or absolute.
________________________________________
jQuery Callback Functions:
Since JavaScript statements (instructions) are executed one by one - in a sequence, statements executed after an animation may create errors or page conflict because the animation is not yet completed.
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
________________________________________
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).prepend(content) "Prepends" content to the (inner) HTML of selected elements
$(selector).after(content) Adds HTML after selected elements
$(selector).before(content) Adds HTML before selected elements
jQuery CSS Functions :
CSS Properties Description
$(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).css(name) Get the style property value of the first matched element
$(selector).height(value) Set the height of matched elements
$(selector).width(value) Set the width of matched elements
Example
$(selector).css({properties})
$("p").css({"background-color":"yellow","font-size":"200%"});
Example
$(selector).css(name,value)
$("p").css("background-color","yellow");
________________________________________
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
AJAX and jQuery
jQuery provides a rich set of methods (functions) for AJAX web development.
With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote sever using both HTTP Get and HTTP Post.
And you can load remote data directly into selected HTML elements of your web page!
jQuery AJAX Requests:
Request Description
$(selector).load(url,data,callback) Load remote data into selected elements
$.ajax(options) Load remote data into an XMLHttpRequest object
$.get(url,data,callback,type) Load remote data using HTTP GET
$.post(url,data,callback,type) Load remote data using HTTP POST
$.getJSON(url,data,callback) Load remote JSON data using HTTP GET
$.getScript(url,callback) Load and execute a remote JavaScript file
(selector) jQuery element selector
(url) The URL (address) of data to be loaded
(data) Key/value pairs of data to send to the server
(callback) Function to be executed when data is loaded
(type) Type of data to be returned (html,xml,json,jasonp,script,text)
(options) All key/value pairs of options for a complete AJAX request
________________________________________
jQuery Selectors :
Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id=lastname
.class $(".intro") All elements with class="intro"
elemen $("p") All
elements
.class.class $(".intro.demo") All elements with class=intro and class=demo
:firs $("p:first") The first <> element
:last $("p:last") The last <> element
:even $("tr:even") All even <> elements
:odd $("tr:odd") All odd <> elements
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty
:header $(":header") All header elements <><>...
:animated All animated elements
:contains(text) $(":contains('W3Schools')") All elements which contains the text
:empty $(":empty") All elements with no child (elements) nodes
:hidden $("p:hidden") All hidden <> elements
:visible $("table:visible") All visible tables
s1,s2,s3 $("th,td,.intro") All elements with matching selectors
[attribute] $("[href]") All elements with an href attribute
[attribute=value]
$("[href='#']") All elements with href attribute value="#"
[attribute!=value]
$("[href!='#']") All elements with href attribute value<>"#"
[attribute$=value] $("[href$='.jpg']") All elements with href attribute value containing ".jpg"
:input $(":input") All <> elements
:text $(":text") All <> elements with type="text"
:password $(":password") All <> elements with type="password"
:radio $(":radio") All <> elements with type="radio"
:checkbox $(":checkbox") All < input > elements with type="checkbox"
:submit $(":submit") All <> elements with type="submit"
:reset $(":reset") All <> elements with type="reset"
:button $(":button") All < input > elements with type="button"
:image $(":image") All < input > elements with type="image"
:file $(":file") All < input > elements with type="file"
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements
________________________________________
jQuery Event Functions
Event functions bind a function to an event for all matching elements.
Example: $("img").click(function(){$("#n10").hide()})
The example code will hide an element with id="n10" when any image is clicked.
Event function Binds the function to
$(document).ready(function) The ready event of a document
(when an HTML document is ready to use)
$(selector).blur(function) The blur event of matching elements
$(selector).change(function) The change event of matching elements
$(selector).click(function) The click event of matching elements
$(selector).dblclick(function) The double click event of matching elements
$(selector).error(function) The error event of matching elements
$(selector).focus(function) The focus event of matching elements
$(selector).keydown(function) The key down event of matching elements
$(selector).keypress(function) The key press event of matching elements
$(selector).keyup(function) The key up event of matching elements
$(selector).load(function) The load event of matching elements
$(selector).mousedown(function) The mouse down event of matching elements
$(selector).mouseenter(function) The mouse enter event of matching elements
$(selector).mouseleave(function) The mouse leave event of matching elements
$(selector).mousemove(function) The mouse move event of matching elements
$(selector).mouseout(function) The mouse out event of matching elements
$(selector).mouseover(function) The mouse over event of matching elements
$(selector).mouseup(function) The mouse up event of matching elements
$(selector).resize(function) The resize event of matching elements
$(selector).scroll(function) The scroll event of matching elements
$(selector).select(function) The select event of matching elements
$(selector).submit(function) The submit event of matching elements
$(selector).unload(function) The unload event of matching elements
________________________________________
jQuery Trigger Functions
Trigger functions trigger events for all matching element.
Example: $("button#demo").click()
The example will trigger the click event for a button element with id="demo".
Function Triggers
$(selector).blur() The blur event of matching elements
$(selector).change() The change event of matching elements
$(selector).click() The click event of matching elements
$(selector).dblclick() The double click event of matching elements
$(selector).error() The error event of matching elements
$(selector).focus() The focus event of matching elements
$(selector).keydown() The key down event of matching elements
$(selector).keypress() The key press event of matching elements
$(selector).keyup() The key up event of matching elements
$(selector).mousedown() The mouse down event of matching elements
$(selector).mouseenter() The mouse enter event of matching elements
$(selector).mouseleave() The mouse leave event of matching elements
$(selector).mousemove( The mouse move event of matching elements
$(selector).mouseout( The mouse out event of matching elements
$(selector).mouseover() The mouse over event of matching elements
$(selector).mouseup() The mouse up event of matching elements
$(selector).resize() The resize event of matching elements
$(selector).scroll() The scroll event of matching elements
$(selector).select() The select event of matching elements
$(selector).submit() The submit event of matching elements
$(selector).trigger(event) The specified event for all matched elements
$(selector).triggerHandler(event) The specified event for the first matched element
________________________________________
jQuery Event Handler Functions
Event handler functions binds event handlers to matching elements.
Function Triggers
$(selector).bind(event) Add one or more event handlers to matching elements
$(selector).delegate(selector, event) Add an event handler to matching elements, now or in the future
$(selector).die() Remove all event handlers added with the live() function
$(selector).live(event) Add an event handler to matching elements, now or in the future
$(selector).one(event) Add an event handler to matching elements. This handler can only be triggered once
$(selector).unbind(event) Remove an added event handler from matching elements
$(selector).undelegate(event) Remove an event handler to matching elements, now or in the future
jQuery Effects Functions
Hide / Show Description
$(selector).show(speed,callback) Show selected elements
$(selector).hide(speed,callback) Hide selected elements
$(selector).toggle(speed,callback) Toggle hide and show for selected elements
Slide
$(selector).slideDown(speed,callback) Slide-show selected elements by adjusting height
$(selector).slideUp(speed,callback) Slide-hide selected elements by adjusting height
$(selector).slideToggle(speed,callback) Toggle slide-hide and slide-show for selected elements
Fade in / out
$(selector).fadeIn(speed,callback) Fade in selected elements to full opacity
$(selector).fadeOut(speed,callback) Fade out selected elements to zero opacity
$(selector).fadeTo(speed,opacity,callback) Fade selected elements to a given opacity
Animation
$(selector).animate(params,duration,effect,callback) Applies a "custom" animation for selected elements
$(selector).stop() Stops running animations on selected elements
Queue
$(selector).clearQueue() Remove all queued functions (not yet run) for the selected element
$(selector).delay() Set a delay for all queued functions (not yet run) for the selected element
$(selector).dequeue() Run the next queued functions for the selected element
$(selector).queue() Show the queued functions for the selected element
jQuery HTML Manipulation Functions:
These functions work for both XML documents and HTML documents. Exception: html()
Manipulate Description
$(selector).html(content) Set the content (inner HTML) of selected elements
$(selector).text(text) same as html(), but tags will be escaped
$(selector).attr(attr,value) Set an attribute and value of selected elements
$(selector).val(value) Set the value of the first selected element
Getting Contents
$(selector).html( Get the contents (inner HTML) of the first selected element
$(selector).text() Get the text content of all selected elements (combined)
$(selector).attr(attr) Get the value of an attribute from selected elements
$(selector).val() Get the current value of the first selected element
Adding Content
$(selector).after(content) Add content after selected elements
$(selector).before(content) Add content before selected elements
$(selector).insertAfter(selector) Add selected elements after selected elements
$(selector).insertBefore(selector) Add selected elements before selected elements
Manipulate CSS Description
$(selector).addClass(content) Add a class to selected elements
$(selector).removeClass(content) Remove a class from selected elements
$(selector).toggleClass(content) Toggle between adding/removing a class from selected elements
$(selector).hasClass(content) Check if the selected elements have a specified class
Adding Inner Content
$(selector).append(content) Append content to the inner content of selected elements
$(selector).prepend(content) "Prepend" content to the inner content of selected elements
$(content).appendTo(selector) Append selected elements to the inner content of selected elements
$(content).prependTo(selector) "Prepend" selected elements to the inner content of selected elements
Wrapping
$(selector).wrap(content) Wrap each selected element within a content
$(selector).wrapAll(content) Wrap all selected elements into one content
$(selector).wrapinner(content) Wrap selected inner child contents within a content
$(selector).unwrap() Remove and replace the parents of the specified elements
Copy, Replace, Remove
$(content).replaceAll(selector) Replace selected elements with selected elements
$(selector).replaceWith(content) Replace selected elements with new content
$(selector).empty() Remove all content and child elements from selected elements
$(selector).remove() Remove all selected elements
$(selector).removeAttr(attr) Remove a specified attribute from all selected elements
$(selector).clone() Clone all selected elements
$(selector).detach() Remove the specified elements from the DOM
jQuery CSS Manipulation Functions :
CSS Properties Description
$(selector).css(name) Get the style property value of the first selected element
$(selector).css(name,value) Set the value of one style property for all selected elements
$(selector).css({properties}) Set multiple style properties for all selected elements
CSS Size
$(selector).height( Get the pixel height of the first selected element
$(selector).height(value Set the height of all selected elements
$(selector).width( Get the pixel width of the first selected element
$(selector).width(value Set the width of all selected elements
CSS Positioning
$(selector).offset() Get the position of the first selected element relative to the document
$(selector).offsetParent() Get the first parent element with an offset position
$(selector).position() Get the position of the first selected element relative to the parent element
$(selector).scrollTop() Get the scroll top offset of the first selected element
$(selector).scrollTop(value) Set the scroll top offset of all selected elements
$(selector).scrollLeft() Get the scroll left offset of the first selected element
$(selector).scrollLeft(value) Set the scroll left offset of all selected elements
No comments:
Post a Comment