Jquery2

515 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
515
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery2

  1. 1. jQuery - session 2 More about jQuery...
  2. 2. .eq().eq( index )indexAn integer indicating the 0-based position of the element..eq( -index )-indexAn integer indicating the position of the element, counting backwards from the last element in the set.<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>$(li).eq(2).css(background-color, red);The result: red background for item 3.Note that the supplied index is zero-based, and refers to the position of the element within the jQuery object, notwithin the DOM tree.
  3. 3. .addClass(), .removeClass()● Dynamically add class to an element$("p").addClass("myClass");● Dynamically add multiple classes at a time to an element$("p").addClass("myClass yourClass");● Dynamically remove class from an element$("p").removeClass("myClass");● Dynamically remove multiple classes at a time from an element$("p").removeClass("myClass yourClass");● In overriding - the only thing that matters is the order of the css definitions in the style sheet
  4. 4. .hasClass().hasClass( className )className The class name to search for.<div id="mydiv" class="foo bar"></div>$(#mydiv).hasClass(foo) - return true$(#mydiv).hasClass(bar) - return true$(#mydiv).hasClass(quux) - return false
  5. 5. .toggleClass().toggleClass( className )className One or more class names (separated by spaces) to be toggled for each element in the matched set..toggleClass( className, switch )className One or more class names (separated by spaces) to be toggled for each element in the matched set.switch A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.We have:<div class="tumble">Some text.</div>We do : $(div.tumble).toggleClass(bounce)and get:<div class="tumble bounce">Some text.</div>We do again : $(div.tumble).toggleClass(bounce)and get:<div class="tumble">Some text.</div>Applying .toggleClass(bounce spin) to the same <div> alternates between <div class="tumble bounce spin"> and <div class="tumble">.
  6. 6. Accordion Menu$(function () { $(.menuitems).hide(); $(.menu).mouseover(function () { $(this).next().slideDown(slow).siblings(.menuitems).slideUp(200);});});<h3 class="menu">News</h3><ul class="menuitems"><li><a href="http://www.example.com/story1">Story 1</a></li><li><a href="http://www.example.com/story2">Story 2</a></li></ul>
  7. 7. Collapsing Menu 1$(document).ready(function(){ $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });});
  8. 8. Collapsing Menu 2$(document).ready(function(){ $(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });});
  9. 9. Animated Hover 1$(document).ready(function(){ $(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); });});
  10. 10. Animated Hover 2$(document).ready(function(){ $(".menu2 a").append("<em></em>"); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); });});
  11. 11. Image Replacement$(document).ready(function(){ $("h2").append(<em></em>) $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("h2 em").html(" (" + largeAlt + ")"); return false; });});

×