{"id":147868,"date":"2013-08-22T12:50:57","date_gmt":"2013-08-22T19:50:57","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=147868"},"modified":"2015-10-27T07:41:53","modified_gmt":"2015-10-27T14:41:53","slug":"02-file-setup-linking-up-jquery","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/02-file-setup-linking-up-jquery\/","title":{"rendered":"#02: File Setup \/ Linking Up jQuery"},"content":{"rendered":"

In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a “real” website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a <script><\/code> and then we perform a super simple jQuery task. The entire file looks like this:<\/p>\n

<\/p>\n

<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Learning jQuery<\/title>\r\n<\/head>\r\n<body>\r\n  \r\n  <h1>Hello, World!<\/h1>\r\n\r\n  <script src=\"js\/jquery-2.0.3.js\"><\/script>\r\n  <script>\r\n    $(\"h1\").css(\"color\", \"red\");\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
I wanted to cover that right away so that you can experience how easy using jQuery can be. And also because we’ll be using CodePen<\/a> for a lot of live coding for the rest of the series. CodePen just gives us a testing \/ demonstration environment that is easy to work with and great for screencasts. What it is doing behind the scenes is essentially the same as what we just did here. I wanted that to be understood – so you don’t think using CodePen is some strange\/magical place that is different from how you would write code.<\/p>\n
The same exact thing as we did with the index.html file is like this on CodePen:<\/p>\n
See the Pen 7e6827079ef62ec19ed37ea763ef79a1<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a “real” website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a <script><\/script> and then we perform a super simple jQuery task.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":147848,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":150309,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/11-animating-jquery\/","url_meta":{"origin":147868,"position":0},"title":"#11: Animating with jQuery","date":"September 17, 2013","format":false,"excerpt":"If you first dabbled with jQuery many years ago, it might have been it's ability to do animation. That was perhaps one of jQuery's first big draws. These days, CSS can do animation as well with fairly decent browser support and it tends to be more performant, so it's less\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155499,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/26-using-jquery-plugin-wild\/","url_meta":{"origin":147868,"position":1},"title":"#26: Using a jQuery Plugin from the Wild","date":"November 8, 2013","format":false,"excerpt":"Everyone has seen a super cool jQuery plugin out there on the wild, wild internet right? Perhaps you only became interested in actually learning more about jQuery and JavaScript by finding a jQuery plugin and trying to use it on your own site. No shame of course. I'm sure that's\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155627,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/27-building-simple-jquery-plugin\/","url_meta":{"origin":147868,"position":2},"title":"#27: Building a Simple jQuery Plugin","date":"November 11, 2013","format":false,"excerpt":"Now that we've looked at using jQuery plugins, it is absolutely worth understanding how to build them as well. We already briefly touched on the fact that you can extend the native jQuery object if you want to. Just like: $.myFunction = function() { console.log(\"I am a function on the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":152212,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/16-intro-ajax\/","url_meta":{"origin":147868,"position":3},"title":"#16: Intro To Ajax","date":"October 7, 2013","format":false,"excerpt":"Ajax ranks pretty high up there on the biggest reasons to use jQuery. Not only does jQuery fix the cross-browser issues, it makes the syntax very easy to use and understand. In this video we take a stab at explain what Ajax is at all. We look at a form\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148076,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/04-jquery-selectors-css3-selectors\/","url_meta":{"origin":147868,"position":4},"title":"#04: jQuery Selectors are CSS3 Selectors","date":"August 25, 2013","format":false,"excerpt":"In CSS, you can select all elements on the page with this: h1 { \/* style all elements *\/ } In jQuery, you can use that exact same selector. $(\"h1\") \/\/ set of all elements In fact, you can use any CSS selector (even CSS3 selectors) in jQuery. In this\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148044,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/03-select\/","url_meta":{"origin":147868,"position":5},"title":"#03: Select and Do","date":"August 24, 2013","format":false,"excerpt":"One way to think of jQuery is the \"Select and Do\" library. jQuery is particularly good at selecting elements on the page (stuff in the DOM) and then doing something. Select and do. Select and do. See the Pen 99a923df4131377dc308895be1baf4e1 by Chris Coyier (@chriscoyier) on CodePen In this screencast we\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/147868"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=147868"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/147868\/revisions"}],"predecessor-version":[{"id":150372,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/147868\/revisions\/150372"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/147848"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=147868"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=147868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}