{"id":155,"date":"2013-03-18T20:20:49","date_gmt":"2013-03-18T20:20:49","guid":{"rendered":"http:\/\/www.webninjataylor.com\/library\/?p=155"},"modified":"2014-06-24T21:43:29","modified_gmt":"2014-06-24T21:43:29","slug":"jquery-overview","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/jquery-overview\/","title":{"rendered":"jQuery Overview"},"content":{"rendered":"<p>A JavaScript library that helps you write less and do more.<\/p>\n<ul>\n<li><span class=\"code\">$()<\/span> is the same as <span class=\"code\">jquery()<\/span><\/li>\n<li><strong>Selectors<\/strong>: <span class=\"code\">$(#id)<\/span>, <span class=\"code\">$(element)<\/span>, <span class=\"code\">$(.class)<\/span>, <span class=\"code\">$(#multiple .selectors)<\/span>, <span class=\"code\">$(p:first)<\/span>, <span class=\"code\">$(p:last)<\/span>, <span class=\"code\">$(p)[0]<\/span>\n<ul>\n<li>Adding <span class=\"code\">.eq(#)<\/span> counts 0-based forward or backwards from beginning or end of a set<\/li>\n<\/ul>\n<\/li>\n<li><span class=\"code\">.size()<\/span> method returns number of elements in the set<\/li>\n<li><span class=\"code\">$(document).ready(function(){\u2026});<\/span> is the same as using the shorthand of\u00a0<span class=\"code\">$(function(){\u2026});<\/span><\/li>\n<li>You can do <strong>simple templating<\/strong> with string replacement<\/li>\n<li>myArray.<strong>forEach<\/strong>(function(item, i){&#8230;}); gives you the item and position in the array<\/li>\n<li><strong>Modulo<\/strong> &#8230; i % 6 &#8230; remainder of i divided by six<\/li>\n<li>\n<div><strong>Inline Conditionals<\/strong> = poster.inStock ? &#8216;In Stock&#8217; : &#8216;Sold Out&#8217; &#8230; note: this can be added inline as a value<\/div>\n<\/li>\n<li>\n<div>Push into array = posterHtmls.<strong>push<\/strong>(posterHtml);<\/div>\n<\/li>\n<li>Concatenate an array with\u00a0.<strong>join<\/strong>(&#8221;); &#8230; note: using an empty string prevents commas from being inserted by default<\/li>\n<li>$(selector)<strong>.first();<\/strong> &#8211; Get first element in array<\/li>\n<li>$(selector)<strong>.last();<\/strong> &#8211; Get last element in array<\/li>\n<li>$($(selector)[0]); &#8211; Turn raw element into jQuery object<\/li>\n<li>$(selector).each(function(index, element){&#8230;}); &#8211; Iterate over array of elements<\/li>\n<li>$(selector)<strong>.draggable()<\/strong> &#8211; Part of jQuery UI for making elements draggable<\/li>\n<li>$(selector)<strong>.on(&#8216;propertychange&#8217;<\/strong>, function(){&#8230;}); &#8211;\u00a0Use propertychange event to handle text changes as they&#8217;re typed since the change event only fires when the user is done. There&#8217;s no convenience method for this one so you have to use the .on() method and pass as the first attribute.<\/li>\n<li>$(selector)<strong>.clone(true)<\/strong>; &#8211;\u00a0Clone an element AND it&#8217;s event handlers and data<\/li>\n<li>Event objects are created for every event that happens and have a ton of info like the intended target&#8230;\n<pre>$(selector).click(function(evt){\r\n\u00a0 \u00a0if(evt.target !== this) return;\r\n});<\/pre>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A JavaScript library that helps you write less and do more. $() is the same as jquery() Selectors: $(#id), $(element), $(.class), $(#multiple .selectors), $(p:first), $(p:last), $(p)[0] Adding .eq(#) counts 0-based forward or backwards from beginning or end of a set .size() method returns number of elements in the set $(document).ready(function(){\u2026}); is the same as using [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[9,27],"class_list":["post-155","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=155"}],"version-history":[{"count":5,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/155\/revisions"}],"predecessor-version":[{"id":3389,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/155\/revisions\/3389"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}