{"id":437,"date":"2017-08-28T06:56:33","date_gmt":"2017-08-28T06:56:33","guid":{"rendered":"http:\/\/mansainfotech.com\/blog\/?p=437"},"modified":"2017-08-28T06:56:33","modified_gmt":"2017-08-28T06:56:33","slug":"jquery-a-write-less-do-more-javascript-library","status":"publish","type":"post","link":"https:\/\/mansainfotech.com\/blog\/jquery-a-write-less-do-more-javascript-library\/","title":{"rendered":"JQuery \u2013 A \u2018write less, do more\u2019 Javascript library."},"content":{"rendered":"<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Developed by John Resign in 2006, Jquery is a Javascript toolkit designed to simplify various tasks of documet traversing, animating, event handling and cross browser compatibilities.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">It also accomplishes lots of complicated things from JS, such as DOM\/HTML manipulation and AJAX calls. <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><b>In addition,<\/b> Jquery has got plugins for almost any task out there. <\/span><\/span><\/p>\n<p style=\"text-align: center;\" align=\"center\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><b>Getting Started&#8230;<\/b><\/span><\/span><\/p>\n<hr \/>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Before studying Jquery, you should have basic understanding of Html, Css and Javascript, respectively. <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">To get started with Jquery, you can: <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: verdana,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\">~ <\/span><span style=\"font-family: FreeSans,sans-serif;\">Download jQuery library from jQuery.com.<\/span><\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: verdana,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\">~ <\/span><span style=\"font-family: FreeSans,sans-serif;\">Include jQuery from CDN<\/span><\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">There are two versions of Jquery library: <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>Production version<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>Development version<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">The Jquery Syntax: <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Jquery allows you to select Html elements and perform action on them. It can be depicted as &#8211; $(selector).action()<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>$ defines or access jquery<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>(selector) to query\/find Html elements<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>Jquery action() to be performed on elements<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">For instance: $(this).hide() hides the current element. <\/span><\/span><\/p>\n<p style=\"text-align: center;\" align=\"center\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><b>Jquery \u2013 HowTos&#8230;<\/b><\/span><\/span><\/p>\n<hr \/>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"text-decoration: underline;\">Jquery Effects: <\/span><\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Jquery provides simple interface for doing various kinds of amazing effects. So, here\u2019s the list: <\/span><\/span><\/p>\n<ul>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Show and hide elements \u2013 show(), hide()<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Toggling the elements \u2013 toggle()<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Fading elements \u2013 fadeIn(), fadeOut(), fadeToggle(), fadeTo()<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Sliding elements \u2013 slideDown(), slideUp(), SlideToggle()<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Animations \u2013 animate()<\/span><\/span><\/p>\n<\/li>\n<\/ul>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"text-decoration: underline;\">Jquery DOM Manipulations: <\/span><\/span><\/span><\/p>\n<ul>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Get content \u2013 text(), html(), val()<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Set content \u2013 text(), html(), val()<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Add elements \u2013 append(), prepend()<\/span><\/span><\/p>\n<\/li>\n<li>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Remove elements \u2013 remove(), empty()<\/span><\/span><\/p>\n<\/li>\n<\/ul>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"text-decoration: underline;\">Jquery Traversing:<\/span><\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">It means \u2018move through\u2019. Jquery traversing helps us to find\/select Html elements based on their relation to other elements. <\/span><\/span><\/p>\n<p align=\"justify\">\u2018<span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Starting from the selection, move through the selection until you reach the desired element you are desiring.\u2019<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Methods \u2013 parent(), children(), siblings(). <\/span><\/span><\/p>\n<p style=\"text-align: center;\" align=\"center\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><b>What Jquery can do for you&#8230;<\/b><\/span><\/span><\/p>\n<hr \/>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Jquery is not a language, rather, it is well written javascript code. So, why jquery and how it can help you? <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>It increases productivity of developer.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>It improves performance of application.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>It developes most browser-compatible webpages.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>It is fast and extensible. <\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>It helps implement UI related critical functionality.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><span style=\"color: #000000;\"><span style=\"font-family: verdana,sans-serif;\">~ <\/span><\/span>It provides simpler and cleaner code.<\/span><\/span><\/p>\n<p style=\"text-align: center;\" align=\"center\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><b>Wrapping Up<\/b><\/span><\/span><\/p>\n<hr \/>\n<p align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\">Jquery is easy enough, for if you have a good hang of Html, Css, Js. If you want to learn more on Jquery, follow this link: <cite class=\"_Rm\">https:\/\/jquery.com\/<\/cite>.<\/span><\/span><\/p>\n<p style=\"text-align: center;\" align=\"justify\"><span style=\"font-family: FreeSans,sans-serif;\"><span style=\"font-size: medium;\"><strong>That\u2019s<\/strong> <strong>it guys. See you with another blog post.\u00a0<\/strong> <\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developed by John Resign in 2006, Jquery is a Javascript toolkit designed to simplify various tasks of documet traversing, animating, event handling and cross browser compatibilities. It also accomplishes lots of complicated things from JS, such as DOM\/HTML manipulation and AJAX calls. In addition, Jquery has got plugins for almost &hellip; <a href=\"https:\/\/mansainfotech.com\/blog\/jquery-a-write-less-do-more-javascript-library\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JQuery \u2013 A \u2018write less, do more\u2019 Javascript library.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design-and-development"],"_links":{"self":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":0,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/posts\/437\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media\/441"}],"wp:attachment":[{"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mansainfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}