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

Object Oriented Programming (OOP)

Object Object is an entity that has state and behavior Class Collection of objects is known as class. There are four main types of OOP concepts Inheritance Object acquire all the properties and behavior of parent object Improve code re-usability Polymorphism One task is performed by different ways Use method overload and override Abstraction Hiding internal details and showing functionality Use abstract class and interfaces Encapsulation Binding code and data into a single unit
Post a Comment
Read more

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

Java-8

Java 8 New Features There are several new features added in Java 8 version. Some of the important new features are: Define methods inside the interface For each method Lambda Expression Stream API DateTime API 1) Define methods (default, static) inside the Interface After you published your interface, you can't change it by adding some abstract methods. But if you want to add methods you can define those methods inside the interface. Therefore Java 8 support default and static methods inside the interface. In Java 7 version interface only have abstract methods (no method implementation) and an abstract class can have both abstract and non-abstract methods. In Java 8 version you can add method implementation in the interface, but you have to declare that method as default method. ex: default void show(){............} To avoid diamond problem you have to override the method in implementation class if two interfaces have same default method ...
Post a Comment
Read more