Home jQuery jQuery

jQuery

By
LiamWho
-
1102
0

jQuery?

  • Hello jQuery
  • Selectors
  • Filters
  • Content Manipulation
  • Event Handling
  • Ajax

What is jQuery?

  • It’s a JavaScript library
  • It makes it easier to use JavaScript on your website
  • It simplifies common JavaScript tasks like DOM manipulation and Ajax
  • It’s precise – “write less, do more”
  • It makes it easy to select and manipulate page content
  • It does Event Handling
  • It does Visual Effects and Animation
  • It does Ajax

Download and Setup

  • There a two types of jQuery you can download:
    • Compressed Production (minified) version or
    • Uncompressed Development version
  • Use Development version during development.
  • Use Production version at deployment time.
  • Get jQuery at http://jquery.com

It’s just a .js file

Hello jQuery

FirstjQ.html

<!DOCTYPE HTML>
<html>
<head>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="FirstjQ.js"></script>
</head>
<body>
</body>
</html>

FirstjQ.js

$("document").ready( function() {
  alert("hello, jQuery");
});
  • $ is a short-cut reference to the jQuery object
  • $(“document”) is selecting the document/DOM object
  • .ready is an event associated with the document
  • So, when the DOM is ready (not loaded) an anonymous function is executed
  • alert() is a JavaScript function, not jQuery

Part 1 — Hello jQuery

Go to http://www.jquery.com and download the latest Development version. Save it in the folder restapi2018-jQuery-ex1 in htdocs. Remember where you save it so you can access it in the code below.

Run your first jQuery program using the program file http://localhost/restapi2018-jQuery-ex1/FirstjQ.html and FirstjQ.js given. Note this example uses jQuery 3.3.1 (i.e. jquery-3.3.1.min.js).

Modify the code in FirstjQ.js to print “hello world” to the browser’s console window as well. Check it works. F12 key!

Selectors

  • A very common and powerful feature of jQuery is to select content
  • jQuery returns an array of jQuery objects that match the selection criteria
  • In JavaScript content was selected using methods like:
    • document.getElementById()
    • document.getElementsByTagName()
    • document.getElementsByClassName()
    • document.querySelector()

Basic Selectors

  • jQuery basic selectors are very similar to CSS selectors
  • There are basic selectors for selecting by — tagname, classes, ids

Part 2 – Selectors

In your browser view http://localhost/restapi2018-jQuery-ex1/basicSel.html. You should see a red box line around the heading.

Edit and view both the basicSel.html and basicSel.js files given.

Use appropriate jQuery code to select (using red box line) the following content using Basic Selectors. Test one at a time.

  1. select all paragraphs
  2. select the unordered list
  3. select all classes called a
  4. select all classes called b
  5. select the id called ulist
  6. select all paragraphs labeled as class b
  7. select the text “Business” within the paragraph
  8. select only the third list item in the unordered list
  9. select the heading and the unordered list with one line of code

basicSel.html

<!doctype html>
<html>
<head>
  <script src="jquery-3.3.1.min.js" type="text/javascript"></script>   
  <script src="basicSel.js"></script>
</head>
<body>
<h1>LYIT</h1>
<p>Discover exciting third level education opportunities at Letterkenny Institute of Technology.</p>
<p class="a">We have two thriving campuses in Ireland's North West:  Letterkenny and Killybegs. </p>
<p class="b">Our Schools of <span id="business">Business</span>, Engineering, Science and Tourism provide a wide variety of programmes, with awards right up to Masters and Doctorate level. </p>
<ul id="ulist">
 <li>Courses</li>
 <li>Location</li>
 <li class="b">Contact</li>
</ul>
<table id="0" border="0">
<tr>
 <td></td>
</tr>
</table>
</body>
</html>

basicSel.js

// // H1 to have red border ***************************
// $("document").ready( function() {
// 	$("h1").css("border", "1px solid red");
// });

// // <p> select all paragraphs ***************************
// $("document").ready( function() {
// 	$("p").css("border", "1px solid red");
// });

// // <ul> select the unordered list ***************************
// $("document").ready( function() {
// 	$("ul>li").css("border", "1px solid red");
// });

// // select all classes called a ***************************
// $("class").ready( function() {
// 	$(".a").css("border", "1px solid red");
// });

// // select all classes called b ***************************
// $("document").ready( function() {
// 	$("#ulist").css("border", "1px solid red");
// });

// // select all paragraphs labeled as class b ***************************
// $("class").ready( function() {
// 	$("p.b").css("border", "1px solid red");
// });

// // select the text “Business” within the paragraph ***************************
// $("span").ready( function() {
// 	$("#business").css("border", "1px solid red");
// });

// // select only the third list item in the unordered list ***************************
// $("class").ready( function() {
// 	$("li.b").css("border", "1px solid red");
// });

// select only the third list item in the unordered list ***************************
$("document").ready( function() {
 $("h1, li").css("border", "1px solid red");
});

 

Previous articleWhat is UX
LiamWho