Skip to main content

Introduction to JQuery

JQuery

  • Open source JavaScript library.
  • Cross browser compatibility
Include the JQuery code inside this function

      $(document).ready(function(){
            your code is here
            });

Creating CSS

  • element : nothing added (body{})
  • class name : added fullstop (.clzname{})
  • id : added slash (#idname{})


JQuery Methods 
  • click(): can include actions when after clicking defined button
    • $("button").click
  • mouseover: can include actions when over the mouse on defined element
    • $(button').mouseover
  • hover : can include tow functions when the mouse is over it and not
    • $("img").hover
  • load : execute when complete page is fully loaded 
    • $("img").load
JQuery Actions
  • hide() : hide the defined content
    • $("#right").hide()
  • html() : change the html element with defined content
    • $("p").html("<p>My content<p>")
  • text() :  change the content as defined text
    • $("p").text("My Content")
  • addClass : Add defined css style to defined element
    • $("p:last").addClass("para")
  • removeClass :  remove defined css style to defined element
    • $("p:last").removeClass("para")
  • toggleClass: on and off defined feature
    • $("p:first").toggleClass("para")
  • fadeIn : appear the element after defined time 
    • $("#right").fadeIn(1000)
  • fadeOut : disappear the element after defined time
    • $("#right").fadeOut(1000)
  • fadeTo : appear the element after the defined time with defined capacity
    • $("#right").fadeTo(1000,0.5)
  • fadeToggle : on and off the element in defined time
    • $("#right").fadeToggle(1000)
  • append : append the html content as last part of the defined div elemnet
    • $("#right").append("<h2>this is header element</h2>")
  • prepend : append the html content as first part of the defined div element
    • $("#right").prepend("<h2>this is header element</h2>")
  • after :  append the html element after the defined div (not as part of it)
    • $("#right").after("<h2>this is header element</h2>")
  • before :  append the html element before the defined div (not as part of it)
    • $("#right").before("<h2>this is header element</h2>")
  • replaceWith : replace the defined content with new content
    • $("#right p").replaceWith("<p>replace paragraph </p>")
  • remove : remove the defined section
    • $("#right").remove()
  • attr : add images to the page
    • $("img").attr("src", "bear1.jpg")
  • each : iterate through list
    •  $("li").each
  • slideup : slide the section to up
    • $("#right").slideUp
  • slideDown : slide the section down
    • $("#right").slideDown
  • slideToggle :  slide up and down the section
    • $("#right").slideToggle()
JQuery Selectors
  • first : select the first element
    • $("#left p:first").hide() 
  • even :  select even elements
    • $("div:even").hide()
  • contains : select content of specifiied element
    • $("p:contains("center") ")
Chaining Method
  • Concatenating multiple methods that refer same selector
    • $("#left").css("color","red").css("border","solid 2px blue")
JQuery UI Methods

  • datepicker: add a calendar 
    • Properties
      • numberOfMonths
      • changeMonth
      • changeYear
      • showWeek
      • minDate
      • maxDate
  • Themeroller: get the different themes to your gadgets
  • tooltip : add tooltip for images
    • properties
      • content: override the text that shows
      • track : tooltip shows anywhere when you move your mouse
      • show : can add effects and duration for that effect
      • hide : can add effects and duration when you take your mouse away from that element
  • accordion : make sections from headers and div
  • menu : To create vertical menus
  • dialog :  To create message box
    • properties
      • resizable
      • draggable
      • modal : lock the entire screen except the dialog box
  • tabs : To create tabs
  • draggable : Make the elements as draggable one
  • resizable : resize the images
  • selectMenu : To create select menu
  • autocomplete : suggest automaticcal input values in the list

Comments

Post a Comment

Popular posts from this blog

Sorting Algorithms

Bubble Sort Named as sinking sort. Compare each pair of the adjacent items and swap them if they are in the wrong order. Worst case and average case time complexity both O(n^2)  and best case time complexity is O(n).
Post a Comment
Read more

JavaScript Objects and Prototypes

Create Objects Using function Create Objects without duplication code: use functions Using constructors To indicate a function is a constructor:  append new keyword in front of the function name when executing it Call Property of function object foo.call() = foo() Call can bind different objects and can execute functions __proto__ Copy of prototype object If some property is not in the object itself, it then looks it in the prototype. If it finds it returns the value of that property All the new object instances of function point to same prototype object prototype.constructor: property that points to function  GitHub repo:  https://github.com/kaosadi17/JavaScript/blob/master/objects%26prototypes.js
Post a Comment
Read more