{"id":259,"date":"2010-04-23T10:45:46","date_gmt":"2010-04-23T10:45:46","guid":{"rendered":"http:\/\/www.thestupidbox.com\/blog\/?p=259"},"modified":"2021-06-25T04:16:35","modified_gmt":"2021-06-25T04:16:35","slug":"i-love-jquery","status":"publish","type":"post","link":"http:\/\/thestupidbox.com\/blog\/i-love-jquery\/","title":{"rendered":"I looovvveeeee jQuery"},"content":{"rendered":"<p>I\u2019ve become a fan of jQuery. The day I started working on JQuery, I keep admiring about the architecture of the framework. As the caption rightly says \u201cWrite less and do more\u201d, our source code will be reduced considerably, using this framework.<\/p>\n<p>There are plenty of other frameworks available on the web like \u201c<a href=\"http:\/\/www.prototypejs.org\/\" target=\"_new\" rel=\"noopener\">Prototype<\/a>\u201d, \u201c<a href=\"http:\/\/mootools.net\/\" target=\"_new\" rel=\"noopener\">MooTools<\/a>\u201d, <a href=\"http:\/\/developer.yahoo.com\/yui\/\" target=\"_new\" rel=\"noopener\">\u201cYUI\u201d by yahoo<\/a>, \u201c<a href=\"http:\/\/www.dojotoolkit.org\/\" target=\"_new\" rel=\"noopener\">Dojo<\/a>\u201d etc., But I like <a href=\"http:\/\/jquery.com\/\" target=\"_new\" rel=\"noopener\">jQuery<\/a>. May be the first one I started using it.<br \/>\nI know this is not anything new. These frameworks exist from years back.<\/p>\n<p>Here I will explain in simple terms about what JQuery is and how it works.<\/p>\n<p>The basis of jQuery is &#8220;selectors&#8221;. We use regular expression like queries to select the DOM elements in the web page. We were using the below code segment to retrieve the DOM elements.<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 310px;\"><code>document.getElementById(\"tag id\");<\/code><\/div>\n<p>$ -&gt; is nothing but a function given by jQuery which returns the jQuery DOM object array. jQuery DOM object has more functions, which can do lot of stuff. $ function takes a string parameter, criteria for the objects to select. A simple jQuery statement is given below.<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 310px;\"><code>$(\u201ca\").text(\"hi\");<\/code><\/div>\n<p>The above statement, will select all &#8220;anchor&#8221; tag in the web page and set the text to &#8220;hi&#8221;. We have given the simple criteria for selection, ie., &#8220;a&#8221; tags. The same way the below statement will hide all the &#8220;div&#8221; tags in the web page.<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 310px;\"><code>$(\"div\").hide();<\/code><\/div>\n<p>The functions text(), and hide() provided by jQuery are cool stuff. The hide() function takes the parameter like &#8216;slow&#8217; and &#8216;fast&#8217;. Check the below demo for more clarification. You can also select a particular DOM element by just passing the element id like this<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 310px;\">$(&#8220;#divid&#8221;).show();<\/div>\n<p><input onclick=\"javascript: jQuery(&quot;#dTest&quot;).hide(&quot;slow&quot;);\" type=\"button\" value=\"$(&quot;#dTest&quot;).hide(&quot;slow&quot;);\" \/> <input onclick=\"javascript: jQuery(&quot;#dTest&quot;).show(&quot;slow&quot;);\" type=\"button\" value=\"$(&quot;#dTest&quot;).show(&quot;slow&quot;);\" \/><\/p>\n<div id=\"dTest\">\n<p>I\u2019d like to take this opportunity to announce the brand new jQuery 1.0! A lot of work has gone into this release. A lot of bugs fixed, a ton of new features, and a complete overhaul of how the jQuery development process is run.<\/p>\n<p>By John Resig (from<a href=\"http:\/\/blog.jquery.com\/2006\/08\/26\/jquery-10\/\" target=\"_new\" rel=\"noopener\"> jQuery website<\/a>, published in Aug 2006)<\/p>\n<\/div>\n<p>Thats all for now folks! Check more <a href=\"http:\/\/api.jquery.com\/category\/selectors\/\" target=\"_new\" rel=\"noopener\">selectors <\/a>and <a href=\"http:\/\/docs.jquery.com\/Tutorials\" target=\"_new\" rel=\"noopener\">tutorials <\/a>here. Happy jQuerying!!<\/p>\n<div class=\"wp-caption aligncenter\">Note: As jQuery $ is not working in WordPress, I&#8217;m using jQuery keyword itself for the above demo. I&#8217;m not going to dig more into it.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve become a fan of jQuery. The day I started working on JQuery, I keep admiring about the architecture of the framework. As the caption rightly says \u201cWrite less and do more\u201d, our source code will be reduced considerably, using&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[75,76,74,77],"class_list":["post-259","post","type-post","status-publish","format-standard","hentry","category-technical","tag-introduction-to-jquery","tag-javascript-framework","tag-jquery","tag-js-framework"],"_links":{"self":[{"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/posts\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":31,"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":749,"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions\/749"}],"wp:attachment":[{"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/thestupidbox.com\/blog\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}