{"id":486,"date":"2018-05-31T23:57:38","date_gmt":"2018-05-31T23:57:38","guid":{"rendered":"https:\/\/ucsbwebdev.fzilla.com\/?p=486"},"modified":"2018-06-01T01:26:39","modified_gmt":"2018-06-01T01:26:39","slug":"jquery-for-beginners","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=486","title":{"rendered":"jQuery for Beginners"},"content":{"rendered":"<h2>The 6 Line Starter Template<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;script src=\"http:\/\/code.jquery.com\/jquery-latest.min.js\"&gt;&lt;\/script&gt;  \r\n&lt;script&gt;  \r\n$(function(){\r\n    \/\/ jQuery Code Here  \r\n});  \r\n&lt;\/script&gt;<\/pre>\n<p>Paste these lines right above the\u00a0<strong>&lt;\/body&gt;\u00a0<\/strong>of your page and you have access to all of jQueries abilities!<\/p>\n<h2>Syntax<\/h2>\n<p>The jQuery syntax is tailor-made for\u00a0<b>selecting<\/b>\u00a0HTML elements and performing some\u00a0<b>action<\/b>\u00a0on the element(s).<\/p>\n<p>Basic syntax is:\u00a0<b>$(<i>selector<\/i>).<i>action<\/i>()<\/b><\/p>\n<ul>\n<li>A $ sign to define\/access jQuery<\/li>\n<li>A (<i>selector<\/i>) to &#8220;query (or find)&#8221; HTML elements (same as a CSS selector)<\/li>\n<li>A jQuery\u00a0<i>action<\/i>() to be performed on the element(s) (like hiding)<\/li>\n<\/ul>\n<p><strong>Example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(this).hide() \/\/- hides the current element.\r\n\r\n$(\"p\").hide() \/\/- hides all &lt;p&gt; elements.\r\n\r\n$(\".test\").hide() \/\/- hides all elements with class=\"test\".\r\n\r\n$(\"#test\").hide() \/\/- hides the element with id=\"test\".<\/pre>\n<p>jQuery selectors allow you to select and manipulate HTML element(s).<\/p>\n<p>jQuery selectors are used to &#8220;find&#8221; (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It&#8217;s based on the existing\u00a0<a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\">CSS Selectors<\/a>.<\/p>\n<p>All selectors in jQuery start with the dollar sign and parentheses: $().<\/p>\n<h2>Actions<\/h2>\n<p>Let&#8217;s hide all paragraphs on a page:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\"p\").hide();<\/pre>\n<h2>What are Events?<\/h2>\n<p>All the different user&#8217;s actions that a web page can respond to are called events.<\/p>\n<p>An event represents the precise moment when something happens.<\/p>\n<p><strong>Examples:<\/strong><\/p>\n<ul>\n<li>moving a mouse over an element<\/li>\n<li>scrolling the page<\/li>\n<li>resizing the browser<\/li>\n<li>clicking on an element<\/li>\n<\/ul>\n<p>The term\u00a0<b>&#8220;fires\/fired&#8221;<\/b>\u00a0is often used with events. Example: &#8220;The click event is fired, the moment you click with the mouse&#8221;.<\/p>\n<p>Here are some common DOM events:<\/p>\n<table class=\"w3-table-all notranslate\">\n<tbody>\n<tr>\n<th>Mouse Events<\/th>\n<th>Keyboard Events<\/th>\n<th>Form Events<\/th>\n<th>Document\/Window Events<\/th>\n<\/tr>\n<tr>\n<td>click<\/td>\n<td>keypress<\/td>\n<td>submit<\/td>\n<td>load<\/td>\n<\/tr>\n<tr>\n<td>dblclick<\/td>\n<td>keydown<\/td>\n<td>change<\/td>\n<td>resize<\/td>\n<\/tr>\n<tr>\n<td>mouseenter<\/td>\n<td>keyup<\/td>\n<td>focus<\/td>\n<td>scroll<\/td>\n<\/tr>\n<tr>\n<td>mouseleave<\/td>\n<td><\/td>\n<td>blur<\/td>\n<td>unload<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>jQuery Syntax For Event Methods<\/h2>\n<p>In jQuery, most DOM <strong>events<\/strong> have an equivalent jQuery method.<\/p>\n<p>To assign a click event to all paragraphs on a page, you can do this:<\/p>\n<div class=\"w3-code w3-border notranslate jsHigh\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\"p\").click();<\/pre>\n<\/div>\n<p>The next step is to define what should happen when the event fires. You must pass a function to the event:<\/p>\n<div class=\"w3-code w3-border notranslate jsHigh\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\"p\").click(function(){\r\n\u00a0\u00a0\/\/ action goes here!!\r\n});<\/pre>\n<h1>Common Events and Actions<\/h1>\n<h2><b>click()<\/b><\/h2>\n<p>The click() method attaches an event handler function to an HTML element.<\/p>\n<p>The function is executed when the user clicks on the HTML element.<\/p>\n<p>The following example says: When a click event fires on a &lt;p&gt; element; hide the current &lt;p&gt; element:<\/p>\n<p><strong>Example:<\/strong><\/p>\n<div class=\"w3-example\">\n<div class=\"w3-code notranslate jsHigh\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\"p\").click(function(){\r\n\u00a0\u00a0\u00a0 $(this).hide();\r\n});<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h2>jQuery hide() and show()<\/h2>\n<p>With jQuery, you can hide and show HTML elements with the hide() and show() methods:<\/p>\n<div class=\"w3-example\">\n<p><strong>Example:<\/strong><\/p>\n<div class=\"w3-code notranslate jsHigh\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\"#hide\").click(function(){\r\n\u00a0\u00a0\u00a0 $(\"p\").hide();\r\n});\r\n\r\n$(\"#show\").click(function(){\r\n\u00a0\u00a0\u00a0 $(\"p\").show();\r\n});<\/pre>\n<\/div>\n<h2>jQuery toggle()<\/h2>\n<p>With jQuery, you can toggle between the hide() and show() methods with the toggle() method.<\/p>\n<p>Shown elements are hidden and hidden elements are shown:<\/p>\n<div class=\"w3-example\">\n<h3>Example<\/h3>\n<div class=\"w3-code notranslate jsHigh\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\"button\").click(function(){\r\n\u00a0\u00a0\u00a0 $(\"p\").toggle();\r\n});<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p class='codepen'  data-height='325' data-theme-id='32466' data-slug-hash='GGJxPQ' data-default-tab='js,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen backToBasics by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n<p><a href=\"https:\/\/api.jquery.com\/category\/effects\/\">Full list of actions<\/a><\/p>\n<h2>Traversing the dom<\/h2>\n<p>Often you need to get creative with selecting the right element. jQuery offers a huge selection of actions to traverse (navigate the dom) from the current selector.<\/p>\n<p>For example, if we want to click on a dropdown button and activate the closest dropdown content element we can:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\".open-dropdown\").click(function(){  \r\n    $(this).closest(\".dropdown-content\").slideToggle();  \r\n});<\/pre>\n<p>Other useful traverse actions:<\/p>\n<ul>\n<li>parents(&#8220;selector of parent to find&#8221;)<\/li>\n<li>find(&#8220;selector of ethe lement to find inside currently selected element)<\/li>\n<li>parent() \/\/ selects immediate parent element<\/li>\n<li>siblings() \/\/ selects all of the siblings of the selected element (like all other list items)<\/li>\n<li>children() \/\/ selects all immediate children of the element<\/li>\n<\/ul>\n<p><a href=\"https:\/\/api.jquery.com\/category\/traversing\/\">Full list with examples<\/a><\/p>\n<h2>Checking things (filtering)<\/h2>\n<p>We can also filter the results from our selector. For example if we want to get all .button elements but only get the ones with a class .email.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(\".button\").is(\".email\").addClass(\"email_icon\");<\/pre>\n<p>Some other filters:<\/p>\n<ul>\n<li>first() \/\/ get the first matched<\/li>\n<li>last() \/\/ get the last<\/li>\n<li>not(&#8220;selector to ignore&#8221;)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/api.jquery.com\/category\/traversing\/filtering\/\">Full list of filters<\/a><\/p>\n<h2>Manipulating the dom<\/h2>\n<p>Sometimes we want to remove or add new elements to the page.<\/p>\n<p>For example, after the user registers we may want to add a profile image in the header:<\/p>\n<p class='codepen'  data-height='300' data-theme-id='32466' data-slug-hash='KepRaK' data-default-tab='js,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen appendMe by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n<p>Append adds the new element right before the closing of the selected element. There are other methods like:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-488\" src=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/jqueryCheatSheet.gif\" alt=\"\" width=\"536\" height=\"837\" \/><\/p>\n<p>It can be a nightmare to write HTML inside of the append(&#8220;STRING&#8221;). Especially because you have to constantly remember to use double or single quotes depending on what you use to wrap the entire html element with. But we do have some options! First, let&#8217;s review the issues:<\/p>\n<ul>\n<li>Need to use single quotes around the element and double quotes inside where you add attributes<\/li>\n<li>To write the HTML on multiple lines so it&#8217;s legible we need to use the string concatenation &#8216;+&#8217;<\/li>\n<li>To add any variables from javascript we need to also use string concatenation &#8216;+variable+&#8217;<\/li>\n<li>It&#8217;s hard to edit the HTML<\/li>\n<\/ul>\n<p><strong>Advanced variable usage:<\/strong><\/p>\n<p>We can use some JavaScript hacks to make it easier to support multiple lines and easier to work with code. But it&#8217;s not ideal!<\/p>\n<p class='codepen'  data-height='300' data-theme-id='32466' data-slug-hash='oyXdoE' data-default-tab='js,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen templates by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n<p><strong>Using a script tag:<\/strong><\/p>\n<p>One option is to use a script tag with a special type so the page doesn&#8217;t try to run the code. Then select the script tag and get its HTML content with jQuery. Then we can go about changing text or attributes.<\/p>\n<p class='codepen'  data-height='300' data-theme-id='32466' data-slug-hash='xzGjrr' data-default-tab='js,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen templates by Angel Grablev (@agrublev) on CodePen.<\/p>\n\n<p>We can achieve a similar effect by adding an html element with our template, hiding it, then using jQuery to duplicate it and append it everytime we need to use the template.<\/p>\n<p><strong>Literals:<\/strong><\/p>\n<p>We can use the special ` slanted quote to define the HTML and even add multiple lines, it&#8217;s called <a href=\"https:\/\/babeljs.io\/docs\/plugins\/transform-es2015-template-literals\/\">Template Literals<\/a>\u00a0and of course, Internet Explorer does\u00a0<strong>not\u00a0<\/strong>support it!<\/p>\n<p>There are hundreds of plugins\/libraries that actually make working with templates into a fun experience.<\/p>\n<p>https:\/\/github.com\/BorisMoore\/jquery-tmpl<\/p>\n<p>https:\/\/github.com\/janl\/mustache.js<\/p>\n<p>http:\/\/handlebarsjs.com\/<\/p>\n<p>http:\/\/idangero.us\/template7\/#.WxCKsFMvyOE<\/p>\n<p>And of course it comes built into Angular\/Vue\/React and other libraries.<\/p>\n<h2>Examples of using what we learned<\/h2>\n<ul>\n<li><a href=\"https:\/\/codepen.io\/agrublev\/pen\/KepQLo\">Increase\/Decrease font sizes<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/agrublev\/pen\/KepQYo\">Going through each element<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/agrublev\/pen\/xzGYMe\">Partial page reload<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/agrublev\/pen\/yENvXz\">Equal height columns<\/a><\/li>\n<\/ul>\n<h2>Plugins<\/h2>\n<p>jQuery plugins allow us to do a lot of amazing things without having to write almost any code!<\/p>\n<p>http:\/\/vanity.enavu.com\/<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"IYvKhMpuIE\"><p><a href=\"https:\/\/jqueryui.com\/\">jQuery UI<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"\u201cjQuery UI\u201d \u2014 jQuery UI\" src=\"https:\/\/jqueryui.com\/embed\/#?secret=KI7VUM3I85#?secret=IYvKhMpuIE\" data-secret=\"IYvKhMpuIE\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p><strong>Voting time\u00a0http:\/\/x.co\/votejs<\/strong><\/p>\n<p><a href=\"https:\/\/alvarotrigo.com\/pagePiling\/\">https:\/\/alvarotrigo.com\/pagePiling\/<\/a><\/p>\n<p><a href=\"https:\/\/alvarotrigo.com\/fullPage\">https:\/\/alvarotrigo.com\/fullPage<\/a><\/p>\n<p><a href=\"http:\/\/www.thepetedesign.com\/demos\/tiltedpage_scroll_demo.html\">http:\/\/www.thepetedesign.com\/demos\/tiltedpage_scroll_demo.html<\/a><\/p>\n<p><a href=\"http:\/\/git.blivesta.com\/animsition\/\">http:\/\/git.blivesta.com\/animsition\/<\/a><\/p>\n<p><a href=\"http:\/\/scrollme.nckprsn.com\/\">http:\/\/scrollme.nckprsn.com\/<\/a><\/p>\n<p><a href=\"https:\/\/www.adchsm.com\/slidebars\/\">https:\/\/www.adchsm.com\/slidebars\/<\/a><\/p>\n<p><a href=\"http:\/\/rubentd.com\/gifplayer\/\">http:\/\/rubentd.com\/gifplayer\/<\/a><\/p>\n<p><a href=\"http:\/\/vodkabears.github.io\/vide\/\">http:\/\/vodkabears.github.io\/vide\/<\/a><\/p>\n<p><a href=\"https:\/\/mntn-dev.github.io\/t.js\/\">https:\/\/mntn-dev.github.io\/t.js\/<\/a><\/p>\n<h2>Modals<\/h2>\n<p><a href=\"http:\/\/izimodal.marcelodolce.com\/#modal-default\">http:\/\/izimodal.marcelodolce.com\/#modal-default<\/a><\/p>\n<p><a href=\"http:\/\/jquerymodal.com\/\">http:\/\/jquerymodal.com\/<\/a><\/p>\n<h2>Dropdowns<\/h2>\n<p><a href=\"https:\/\/www.jqueryscript.net\/menu\/jQuery-Plugin-To-Create-Multi-level-Bootstrap-Dropdowns-Bootstrap-Submenu.html\">https:\/\/www.jqueryscript.net\/menu\/jQuery-Plugin-To-Create-Multi-level-Bootstrap-Dropdowns-Bootstrap-Submenu.html<\/a><\/p>\n<p><a href=\"https:\/\/www.jqueryscript.net\/menu\/jQuery-Plugin-To-Toggle-Bootstrap-Dropdowns-On-Hover.html\">https:\/\/www.jqueryscript.net\/menu\/jQuery-Plugin-To-Toggle-Bootstrap-Dropdowns-On-Hover.html<\/a><\/p>\n<h2>Many ways to find them!<\/h2>\n<p>https:\/\/www.sitepoint.com\/jquery-popular-plugins-list\/<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The 6 Line Starter Template &lt;script src=&#8221;http:\/\/code.jquery.com\/jquery-latest.min.js&#8221;&gt;&lt;\/script&gt; &lt;script&gt; $(function(){ \/\/ jQuery Code Here }); &lt;\/script&gt; Paste these lines right above the\u00a0&lt;\/body&gt;\u00a0of your page and you have access to all of jQueries abilities! Syntax The jQuery syntax is tailor-made for\u00a0selecting\u00a0HTML elements and performing some\u00a0action\u00a0on the element(s). Basic syntax is:\u00a0$(selector).action() A $ sign to define\/access jQuery A [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-486","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=486"}],"version-history":[{"count":4,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/486\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}