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

Java- Interview

Here are some popular tips in Java General Question JVM - Java Virtual Machine. Used to execute byte code. Platform dependent (but byte code is platform independent) JRE- Java Run time Environment. It provides run time environment and it's the implementation of JVM. It contains libraries and files that need to execute JVM.   JDK- Java Development Kit. It contains JRE and development tools. Why java doesn't support pointers: It's insecure and complex to understand We can save java file with another name if class is not defined as public Java use camalCase notation for objects naming (ex: firstName) OOP Concepts Related  Aggregation: weak relationship (bike has an indicator) Composition:  strong relationship (bike has an engine) GUI Java GUI - Install Window builder to create GUI using Eclipse IDE Code Related No issues when you write static public void instead of public static void We can execute program without main method : using static bloc...
Post a Comment
Read more

Hibernate

Hibernate is an ORM (Object Relational Mapping) tool which is primarily used in the data layer. Object Relational Mappings Problems There are several problems can occur when you are trying to save objects in the database from the scratch without using Hibernate. Mapping member variables to columns Mapping relationships Handling data types Managing changes to an object Set Up the Development Environment  Following steps are briefly pointed out how to set up Hibernate on your local machine. Download the hibernate jar files Create a project in Eclipse Right click on the project name and go to properties Navigate to libraries tab Add library and import jar files (lib-> JPA/required) Add Postgres JDBC driver as jar file Configurations After you set up the Hibernate you have to create hiberante.cfg.xml file and do some configurations like setup database details, entity class, etc. Dialect: Define what kind of language should use to talk...
Post a Comment
Read more