With this in place, you can confirm that jQuery is available and working by adding this block of JavaScript code to the script portion of the HTML:<\/p>\n
window.onload = function() {\r\n if (window.jQuery) {\r\n \/\/ jQuery is loaded\r\n alert(\"jQuery is working!\");\r\n } else {\r\n \/\/ jQuery is not loaded\r\n alert(\"Hmm, jQuery not working.\");\r\n }\r\n }<\/pre>\nIf jQuery is running, the alert will say “jQuery is working!”. Otherwise the alert will say “Hmm, jQuery not working.”. You can test this by commenting and uncommenting the jQuery CDN.<\/p>\n
Another way to use jQuery is to download the package and call it locally rather than use a CDN. For example, on this download page:
\nhttp:\/\/jquery.com\/download\/<\/a><\/p>\nI chose the option “Download the compressed, production jQuery 3.3.1”:<\/p>\n
![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/04\/download-jquery.png\")
<\/p>\n
Which sent me to this page:
\nhttps:\/\/code.jquery.com\/jquery-3.3.1.min.js<\/a><\/p>\nTo save the code, right click and choose “Save Page As…”:<\/p>\n
![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/04\/jquery-save-as.png\")
<\/p>\n
Save this to the directory your project is in, and then call it in the HTML like this:<\/p>\n
<script src=\"jquery-3.3.1.min.js\"><\/script><\/pre>\nThen test to make sure it is working the same way described above.<\/p>\n
Here is what w3schools says about jQuery:<\/p>\n
jQuery is a lightweight, “write less, do more”, JavaScript library.<\/p>\n
The purpose of jQuery is to make it much easier to use JavaScript on your website.<\/p>\n
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.<\/p>\n
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.<\/p>\n
The jQuery library contains the following features:<\/p>\n
\n- HTML\/DOM manipulation<\/li>\n
- CSS manipulation<\/li>\n
- HTML event methods<\/li>\n
- Effects and animations<\/li>\n
- AJAX<\/li>\n
- Utilities<\/li>\n<\/ul>\n
In addition, jQuery has plugins for almost any task out there.<\/p><\/blockquote>\n
For more information about getting started with jQuery, see:
\nhttps:\/\/www.w3schools.com\/jquery\/jquery_get_started.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"The fastest way to make jQuery available for a project is to use a CDN in the HEAD portion of the HTML. For example, here is a CDN for jQuery 3.3.1: <script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js”><\/script> With this in place, you can confirm that jQuery is available and working by adding this block of JavaScript code to the … Continue reading jQuery: How to use jQuery in a project and confirm it is working<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,128],"tags":[45,123],"class_list":["post-1824","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-jquery","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1824"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1824\/revisions"}],"predecessor-version":[{"id":1834,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1824\/revisions\/1834"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}