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

Maven

Maven is a software project management and comprehension tool, based on the concept of project object model. Maven Usages Build the code in the development environment (compile the source code, run the test cases and packaging the project) Project management tool Generate reports Dependency management Installation Steps You can install Maven by following below steps .  Manual Installation Download Maven binary file Create some environment variables M2_HOME = environment point to maven directory PATH = append Maven path until bin to path variable Using Ubuntu Terminal sudo apt-get install maven To check Maven is successfully installed, issue the following command mvn --version To create a Maven project using Terminal use following steps mkdir myApp cd myApp/ mvn archetype:generate : choose archetype for the project  groupId: org.amali.myProject (like package name) artifactId: MavenTestApp (like class name) The...
Post a Comment
Read more

Model-View-Controller (MVC)

MVC(Model-View-Controller) is a software design pattern.It divided your applications into three components Model: Contain business rules and application Data View: Presentation layer (user interface) Controller: Handles the communication between view and model  Objectives of MVC Promote code usability Implement separation of concerns  Separate user interface and software logic Web Frameworks That Use MVC There are several web frameworks that use MVC design pattern.  Ruby On Rails (Ruby) Angular (JS) Django (Python) Express (JS) Flask (Python) Codeigniter (PHP) Simple UseCase for MVC In this use case scenario, Browser sends information that needs to create Employee Object, and Controller save that information in Model and Update the Employee View. Following Image shows the class diagram for above Scenario. Implementation:  https://github.com/kaosadi17/MVC
Post a Comment
Read more