jQuery

@abhi123ravi

12th October, 2014

BootMeUp.in

What is it?

  • The purpose of jQuery is to make it much easier to use JavaScript on your website.
  • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
  • jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

Features it offers:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

jQuery installation

  • Download the jQuery library from jQuery.com
  • Include jQuery as a script in your head section from a CDN, like Google

Let's try out both!

First method - download

  • Go to jquery.com/download
  • Production version - this is for your live website because it has been minified and compressed
  • Development version - this is for testing and development (uncompressed and readable code)
  • Download the Development version
  • Place the downloaded file in the current working directory or in the "js" directory
  • Ready to go!

Include in your html page

<head>
<script src="jquery-1.11.1.min.js"></script>
</head>

  • If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

  • Both Google and Microsoft host jQuery.

Second method - plug in

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)

Examples

  • $(this).hide() - hides the current element.

  • $("p").hide() - hides all <p> elements.

  • $(".test").hide() - hides all elements with class="test".

  • $("#test").hide() - hides the element with id="test".

The Document ready event

$(document).ready(function(){

   // jQuery methods go here...

});

Selectors, revisited!

  • The element Selector

Text

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

  • The #id Selector

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

  • The .class Selector

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

jQuery events

//mouseEnter methods
$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

//

BootMeUp_jQuery

By Abhiram Ravikumar

Made with Slides.com

BootMeUp_jQuery

  • 2,091

More from Abhiram Ravikumar