Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
jQuery - session 2  More about jQuery...
.eq().eq( index )indexAn integer indicating the 0-based position of the element..eq( -index )-indexAn integer indicating t...
.addClass(), .removeClass()● Dynamically add class to an element$("p").addClass("myClass");● Dynamically add multiple clas...
.hasClass().hasClass( className )className The class name to search for.<div id="mydiv" class="foo bar"></div>$(#mydiv).ha...
.toggleClass().toggleClass( className )className One or more class names (separated by spaces) to be toggled for each elem...
Accordion Menu$(function () {     $(.menuitems).hide();     $(.menu).mouseover(function () {          $(this).next().slide...
Collapsing Menu 1$(document).ready(function(){      $(".accordion h3:first").addClass("active");      $(".accordion p:not(...
Collapsing Menu 2$(document).ready(function(){      $(".accordion2 h3").eq(2).addClass("active");      $(".accordion2 p")....
Animated Hover 1$(document).ready(function(){    $(".menu a").hover(function() {          $(this).next("em").animate({opac...
Animated Hover 2$(document).ready(function(){    $(".menu2 a").append("<em></em>");    $(".menu2 a").hover(function() {   ...
Image Replacement$(document).ready(function(){    $("h2").append(<em></em>)    $(".thumbs a").click(function(){         va...
Prochain SlideShare
Chargement dans…5
×

0

Partager

Télécharger pour lire hors ligne

Jquery2

Télécharger pour lire hors ligne

  • Soyez le premier à aimer ceci

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; });});

Vues

Nombre de vues

846

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

3

Actions

Téléchargements

15

Partages

0

Commentaires

0

Mentions J'aime

0

×