jQuery Examples
+++++++++++++++++++++++++++++++++++++++++++++++++++
jQuery Selectors
——————————————————————-
(1) $(“p”).hide()
(2) $(“#test“).hide()
(3) $(“.test”).hide()
(4) $(this).hide()
jQuery Events
——————————————————————-
(1)jQuery click()
(2) jQuery dblclick()
(3) jQuery mouseenter()
(4) jQuery mouseleave()
(5) jQuery mousedown()
(6) jQuery mouseup()
(7) jQuery hover()
(8) jQuery focus() and blur()
jQuery Hide/Show
——————————————————————-
(1) jQuery hide()
(2) jQuery hide() and show()
(3) jQuery toggle()
(4) jQuery hide()
jQuery Fade
——————————————————————-
(1) jQuery fadeIn()
(2) jQuery fadeOut()
(3) jQuery fadeToggle()
(4) jQuery fadeTo()
jQuery Slide
——————————————————————-
(1) jQuery slideDown()
(2) jQuery slideUp()
(3) jQuery slideToggle()
jQuery Animate
——————————————————————-
(1) jQuery animate()
(2) jQuery animate() – using relative values
(3) jQuery animate() – using pre-defined values
jQuery HTML Get Content and Attributes
——————————————————————-
(1) jQuery text() and html() – Get content
(2) jQuery val() – Get content
(3) jQuery attr() – Get attribute value
jQuery HTML Set Content and Attributes
——————————————————————-
(1) jQuery text(), html(), and val() – Set content
(2) jQuery text() and html() – Set content with a callback function
(3) jQuery attr() – Set attribute value
(4) jQuery attr() – Set multiple attribute values
(5) jQuery attr() – Set attribute value with a callback function
jQuery HTML Add Elements/Content
——————————————————————-
(1) jQuery append()
(2) jQuery after() and before()
(3) jQuery after() – Insert several new elements
jQuery HTML Remove Elements/Content
——————————————————————-
(1) jQuery remove()
(2) jQuery empty()
(3) jQuery remove() – with a parameter
jQuery Get and Set CSS Classes
——————————————————————-
(1) jQuery addClass()
(2) jQuery addClass() – Multiple classes
(3) jQuery removeClass()
(4) jQuery toggleClass()
Examples
(1) $(“h1, h2, p”).addClass(“blue”);
$(“div”).addClass(“important”);
(2) $(“#div1“).addClass(“important blue”);
(3) $(“h1, h2, p”).removeClass(“blue”);
(4) $(“h1, h2, p”).toggleClass(“blue”);
jQuery css() Method
——————————————————————-
(1) jQuery css() – return CSS property
(2) jQuery css() – set CSS property
Examples
(1) $(“p”).css({“background-color”: “yellow”, “font-size”: “200%”});
(2) $(“p”).css(“background-color”, “yellow”);
jQuery Dimensions
——————————————————————-
(1) jQuery – return width() and height()
(2) jQuery – return innerWidth() and innerHeight()
(3) jQuery – return outerWidth() and outerHeight()
(4) jQuery – return outerWidth(true) and outerHeight(true)
(5) jQuery – return width() and height() of document and window
(6) jQuery – set width() and height()
jQuery Traversing Siblings
——————————————————————-
(1) jQuery siblings()
(2) jQuery next()
(3) jQuery nextAll()
(4) jQuery nextUntil()
Examples
(1) $(“h2”).siblings().css({“color”: “red”, “border”: “2px solid red”});
(2) $(“h2”).next().css({“color”: “red”, “border”: “2px solid red”});
(3) $(“h2”).nextAll().css({“color”: “red”, “border”: “2px solid red”});
(4) $(“h2”).nextUntil(“h6”).css({“color”: “red”, “border”: “2px solid red”})
jQuery Traversing Filtering
——————————————————————-
(1) jQuery first()
(2) jQuery last()
(3) jQuery eq()
(4) jQuery filter()
(5) jQuery not()
Examples
(1) $(“div p”).first().css(“background-color”, “yellow”);
(2) $(“div p”).last().css(“background-color”, “yellow”);
(3) $(“p”).eq(1).css(“background-color”, “yellow”);
(4) $(“p”).filter(“.intro”).css(“background-color”, “yellow”);
(5) $(“p”).not(“.intro”).css(“background-color”, “yellow”);
Pushpendra Tripathi 