https://akatquas.github.io/assets/js/705bd80d.cf3f5e85.js

1"use strict";(self.webpackChunkblog=self.webpackChunkblog||[]).push([[3711],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>d});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},f=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),c=s(n),f=r,d=c["".concat(p,".").concat(f)]||c[f]||m[f]||l;return n?a.createElement(d,o(o({ref:t},u),{},{components:n})):a.createElement(d,o({ref:t},u))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[c]="string"==typeof e?e:r,o[1]=i;for(var s=2;s<l;s++)o[s]=n[s];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},66897:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>i,toc:()=>s});var a=n(87462),r=(n(67294),n(3905));const l={title:"Learn some jQuery",categories:["frontend","javascript","jquery"],tags:["jquery"]},o=void 0,i={permalink:"/blog/2018/11/08/jquery",source:"@site/blog/2018-11-08-jquery.md",title:"Learn some jQuery",description:"Literally, I don't learn much about jQuery before I take it seriously.",date:"2018-11-08T00:00:00.000Z",formattedDate:"November 8, 2018",tags:[{label:"jquery",permalink:"/blog/tags/jquery"}],readingTime:2.82,hasTruncateMarker:!0,authors:[],frontMatter:{title:"Learn some jQuery",categories:["frontend","javascript","jquery"],tags:["jquery"]},prevItem:{title:"Garbage Collector in C",permalink:"/blog/2018/11/14/garbage-collector-in-c"},nextItem:{title:"Assembly",permalink:"/blog/2018/10/23/assembly"}},p={authorsImageUrls:[]},s=[{value:"Beautiful Snippets",id:"beautiful-snippets",level:2},{value:"extend object",id:"extend-object",level:3},{value:"create an element and put it into DOM",id:"create-an-element-and-put-it-into-dom",level:3},{value:"event management with delegation, default parameters",id:"event-management-with-delegation-default-parameters",level:3},{value:"custom events",id:"custom-events",level:3},{value:"ajax requests",id:"ajax-requests",level:3},{value:"effects / animation",id:"effects--animation",level:3},{value:"plugins",id:"plugins",level:3},{value:"Useful References",id:"useful-references",level:2}],u={toc:s};function c(e){let{components:t,...n}=e;return(0,r.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"Literally, I don't learn much about jQuery before I take it seriously."),(0,r.kt)("p",null,"So I dive into the official website on ",(0,r.kt)("a",{parentName:"p",href:"https://jquery.com/"},"jQuery"),"."),(0,r.kt)("p",null,"\ud83d\ude07 What a challenge!"),(0,r.kt)("h2",{id:"beautiful-snippets"},"Beautiful Snippets"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/AkatQuas/kiddo-plays/tree/master/jQuery"},"Demo project")),(0,r.kt)("h3",{id:"extend-object"},"extend object"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"var newObject = $.extend({}, firstObject, secondObject);\nconsole.log('new ', newObject);\nconsole.log('first ', firstObject);\nconsole.log('second ', secondObject);\n")),(0,r.kt)("h3",{id:"create-an-element-and-put-it-into-dom"},"create an element and put it into DOM"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"$('<div />')\n  .attr({ class: 'append' })\n  .text('an appended div')\n  .appendTo('#content');\n\n$('<div />')\n  .attr({ class: 'append' })\n  .text('an insert before div')\n  .insertBefore('#content');\n\n$('<div />')\n  .attr({ class: 'append' })\n  .text('an insert after div')\n  .insertAfter('#content');\n\n$('#content').append(\n  $('<div />').attr('class', 'append').text('parent called append')\n);\n")),(0,r.kt)("h3",{id:"event-management-with-delegation-default-parameters"},"event management with delegation, default parameters"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"$('#one').on('click', 'span', { foo: 'bark' }, function (e) {\n  e.stopPropagation();\n  e.preventDefault();\n  console.log(e.pageX, e.pageY);\n  console.log(e.type);\n  console.log(e.data);\n  console.log($(this));\n  console.log('click p#one');\n});\n")),(0,r.kt)("h3",{id:"custom-events"},"custom events"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"// bad\n$('.switch, .clapper').on('click', function () {\n  var light = $(this).closest('.room').find('.lightbulb');\n  if (light.is('.on')) {\n    light.removeClass('on').addClass('off');\n  } else {\n    light.removeClass('off').addClass('on');\n  }\n});\n\n// better\n$('.lightbulb')\n  .on('light:toggle', function (e) {\n    var light = $(this);\n    if (light.is('.on')) {\n      light.removeClass('on').addClass('off');\n    } else {\n      light.removeClass('off').addClass('on');\n    }\n  })\n  .on('light:on', function (e) {\n    $(this).removeClass('off').addClass('on');\n  })\n  .on('light:off', function (e) {\n    $(this).removeClass('on').addClass('off');\n  });\n\n$('.switch, .clapper').click(function () {\n  var room = $(this).closest('.room');\n  room.find('.lightbulb').trigger('light:toggle');\n});\n")),(0,r.kt)("h3",{id:"ajax-requests"},"ajax requests"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"$.getJSON('foo.json', function (json) {\n  console.log(json);\n  $('<h1>').text(json.title).appendTo('body');\n  $('<div class=\"content\">').html(json.html).appendTo('body');\n})\n  .fail(function (xhr, status, errorThrown) {\n    alert('Sorry, there was a problem!');\n    console.log('Error: ' + errorThrown);\n    console.log('Status: ' + status);\n    console.dir(xhr);\n  })\n  .always(function (xhr, status) {\n    alert('Sec request complete with status: ' + status);\n  });\n")),(0,r.kt)("h3",{id:"effects--animation"},"effects / animation"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"$('div.funtimes').animate(\n  {\n    width: ['+=50', 'swing'],\n    opacity: [0.25, 'linear'],\n  },\n\n  // Duration\n  800,\n\n  // Callback to invoke when the animation is finished\n  function () {\n    $('div.funtimes')\n      .animate({ height: '+= 50' }, 500)\n      .queue(function (next) {\n        $(this).text('funtimes queue');\n        $(this).dequeue();\n\n        // or call next to dequeue automatically\n        // next();\n      });\n  }\n);\n")),(0,r.kt)("h3",{id:"plugins"},"plugins"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"// Plugin defaults \u2013 added as a property on our plugin function.\n$.fn.hilight.defaults = {\n  foreground: 'red',\n  background: 'yellow',\n};\n\n$.fn.hilight = function (options) {\n  // Extend our default options with those provided.\n  // Note that the first argument to extend is an empty\n  // object \u2013 this is to keep from overriding our \"defaults\" object.\n  var opts = $.extend({}, $.fn.hilight.defaults, options);\n\n  // Our plugin implementation code goes here.\n\n  // todo\n};\n\n$.fn.showLinkLocation = function () {\n  /*\n    // ok\n    this.filter(\"a\").each(function () {\n        var link = $(this);\n        link.append(\" -> \" + link.attr(\"href\"));\n    });\n    */\n\n  // better\n  this.filter('a').append(function () {\n    return ' -> ' + this.href;\n  });\n\n  return this;\n};\n\n// using optinos to minimize plugin\n// bad\n$.fn.openPopup = function () {\n  // Open popup code.\n};\n\n$.fn.closePopup = function () {\n  // Close popup code.\n};\n\n// good\n$.fn.popup = function (action) {\n  if (action === 'open') {\n    // Open popup code.\n  }\n\n  if (action === 'close') {\n    // Close popup code.\n  }\n};\n")),(0,r.kt)("h2",{id:"useful-references"},"Useful References"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://github.com/AkatQuas/kiddo-plays/tree/master/jQuery/i18next"},"i18n"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"[DOM]"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/using-jquery-core/selecting-elements/"},"selection"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/using-jquery-core/manipulating-elements/"},"elements manipulating"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/using-jquery-core/jquery-object/"},"Understanding the jQuery-Object"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/using-jquery-core/traversing/"},"Traversing among the elements"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/using-jquery-core/utility-methods/"},"jQuery Utility Methods")),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"http://api.jquery.com/category/utilities/"},"more")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/using-jquery-core/faq/"},"FAQ examples"))))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"[Events]"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/events/event-basics/"},"events binding basics"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/events/handling-events/"},"events handling examples"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/events/event-delegation/"},"event delegation"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/events/introduction-to-custom-events/"},"custom events"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/events/event-extensions/"},(0,r.kt)("strong",{parentName:"a"},"event extensions")))))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/ajax/"},"Ajax")),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"http://api.jquery.com/Ajax_Events/"},"Ajax Events")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/plugins/basic-plugin-creation/"},"Plugins")),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/"},"Stateful Plugins")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/performance/"},"Performance"),": minimize the operation on dom tree, most jobs should be done with in JavaScript"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/performance/detach-elements-before-work-with-them/"},"Detach Elements to Work with Them"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/performance/optimize-selectors/"},"Optimize selectors"))))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/code-organization/"},"Code Organization"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/jquery-ui/"},"jQuery UI, tl;dr"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"https://learn.jquery.com/jquery-mobile/"},"jQuery Mobile")))))}c.isMDXComponent=!0}}]);