jQuery

jQuery

 

jQuery is a lightweight, "write less, do more", JavaScript library.
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.
The jQuery library contains the following features:
  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities


jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.




What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Support from our corporate members makes it possible for the jQuery Foundation to continue our work on our JavaScript libraries and pushing the open web forward with events and participation in the standards process. View our members page for a full list of corporate and individual members.

DOM Traversal and Manipulation

Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'
1
 



$( "button.continue" ).html( "Next Step..." )

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.
1
2
3
4
 



var hiddenBox = $( "#banner-message" );







$( "#button-container button" ).on( "click", function( event ) {







  hiddenBox.show();







});

Ajax

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text.
1
2
3
4
5
6
7
8
9
 



$.ajax({







  url: "/api/getWeather",







  data: {







    zipcode: 97201







  },







  success: function( result ) {







    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );







  }



 

Comments

Post a Comment

Popular posts from this blog

How to build a Wall Mounted Family Calendar and Dashboard

Image
  How to build a Wall Mounted Family Calendar and Dashboard with a Raspberry Pi and cheap monitor Sponsored By I love dashboards. I love Raspberry Pis (tiny $35 computers the size of a set of playing cards). And I'm   cheap   frugal. I found a 24" old LCD at Goodwill (a local thrift shop) and bought it but it's been sitting unused in my garage. Then I stumbled on  DakBoard . The idea is simple - A wifi connected wall display for your photos, calendar, news, weather and to-do. The implementation is simple genius. It's a browser that starts up full screen (kiosk mode) and just sits there and updates occasionally. DakBoard provides the private webpage and tools to make that happen. You can certainly build this yourself with any number of open source tools. I chose  DakBoard  because it was simple, beautiful, and I was able to get the whole thing done in less than an hour. I'm sure I'll spend many hours tweaking it through. There's also the very popular  M...
Read more

Build a Node.js API

Image
Build a Node.js API Node.js can be intimidating to beginners. But its flexible structure and lack of strict guidelines makes it seem more complicated than it is. This tutorial is a quick and simple guide to Node.js, the Express framework, and MongoDB, focusing on the fundamental REST routes and basic database interaction. You’ll build a simple API boilerplate that can then be used as the foundation for any app. Who This Tutorial Is For : You should have a basic understanding of REST APIs and CRUD operations, plus basic JavaScript knowledge. I use ES6 (mainly fat-arrow functions), but nothing too complex. For this tutorial, you’ll create the skeleton of a back-end for a note-taking application — think You want to be able to do all four CRUD actions on your notes: create, read, update, and delete. Setting Up If you don’t have Node installed, . In a new directory, run npm init, and follow along with the prompts, giving your app the name of ‘notable’ (or whatever ...
Read more

Using the SoundCloud API with the JavaScript SDK

Image
Using the SoundCloud API Setup a Basic HTML Document We will create a basic HTML page which will serve as our homepage. We will also include the SDK here, so we can make use of its functionality. <!DOCTYPE html> < html > < head > < title > Include SDK - Using SoundCloud API </ title > < script src = " //connect.soundcloud.com/sdk.js " > </ script > </ head > < body > </ body > </ html > Notice that we have included the SDK in our page directly from SoundCloud’s servers. You can also download the SDK and reference to it like: < script src = " sdk.js " > </ script > To test if the SDK gets loaded in your webpage correctly: Open up the page in a browser (Chrome recommended). Open up Developer Console in the browser ( Ctrl + Shift + J , in Chrome). In the Console, type SC and press enter. SC is a Javascript Object created by the SDK which we just inc...
Read more