Look at jQuery for JavaScript

After gaining a basic understanding of JavaScript, the natural progression would be to look at jQuery for JavaScript.

The previous post demonstrated a simple web page that displayed the heading “Hello”, and it would log the same to the console each time a user clicked on the heading.

This next bit of code is rather simple, but it takes a huge leap forward in terms of capability. It introduces the concept of page interactivity. In other words, a page can have dynamics based on how the user interacts.

<head>
++<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>
</head>

<body>
++<h1 id =”title” onclick=”$(‘#title’).html(‘Goodbye’);”>
++++Hello
++</h1>
</body>

 

The src attribute inside the <script> tag links the HTML document to the jQuery library. jQuery is a library of built-in JavaScript functions that makes using JavaScript faster and easier. Much like Bootstrap is a CSS library built for CSS3 that does lots of the heavy lifting for page styling, jQuery works in a similar way by making it easier to manipulate pages using JavaScript.

Breaking Down jQuery for JavaScript

In the above example, look at the code after the onclick attribute. It can broken down as follows:

  • The dollar sign $, calls on the jQuery library.
  • The argument ‘#title’, is a CSS selector that indicates selection of an HTML element by its id. In this case, the id is “title”. While elements can be selected by tag or class, id is normally used to select exactly one element.
  • The .html is calling a function to change the text of the element.
  • Finally, the ‘Goodbye’ is what the heading changes to. Click on “Hello”, and it will change to “Goodbye”.

In summary, this post demonstrated a simple interactive web page. This concept can quickly be expanded to create rich, interactive web experiences.

Download the jQuery library for free.

Leave a Reply

Your email address will not be published. Required fields are marked *