1 of 8

CS 337

jQuery

Benjamin Dicken

​

2 of 8

jQuery

  • Basically a “utility” library to reduce the verbosity of the code for your application
  • Shorten your code!

3 of 8

An Example

AJAX with XHR

​

var xhr = new XMLHttpRequest();

if (!xhr) { return false; }

xhr.onreadystatechange = () => {

if (xhr.readyState === XMLHttpRequest.DONE) {

if (xhr.status === 200) {

alert(xhr.responseText);

} else { alert('ERROR'); }

}

}

let url = '/some/path/?name=Joe';

xhr.open('GET', url);

xhr.send();

AJAX with jQuery

​

$.ajax({

url: '/some/path/',

data: { name: 'Joe' },

method:'GET'

success: function( result ) {

alert(result);

}

});

​

​

​

4 of 8

An Example

AJAX with XHR

​

var xhr = new XMLHttpRequest();

if (!xhr) { return false; }

xhr.onreadystatechange = () => {

if (xhr.readyState === XMLHttpRequest.DONE) {

if (xhr.status === 200) {

alert(xhr.responseText);

} else { alert('ERROR'); }

}

}

let url = '/some/path/?name=Joe';

xhr.open('GET', url);

xhr.send();

AJAX with jQuery

​

$.get(

'/some/path/',

(data, status) => {

alert(data + '' + status);

});

​

​

​

5 of 8

An Example

Selection with Js

​

var el1 = document.getElementById('abc');

​

var els = document.getElementsByClassName('123');

for (i in els) {

els[i].style.color = 'blue';

}

​

Selection with jQuery

​

let el1 = $('#abc');

​

let els = $('.123')

.css('color' : 'blue');

​

​

​

6 of 8

An Example

Handle click event Js

​

var el1 = document.getElementById('abc');

​

el1.addEventListener('click', () => {

alert('hi')

});

​

Handle click event jQuery

​

$('#abc').click(() => {

alert('hi')

});

​

​

​

​

7 of 8

JQuery

​

​

8 of 8

Change the responsibilities application to use jQuery or Fetch and reduce SLOC