Before learning jQuery, you should learn HTML, CSS, JavaScript, and learn how to debug JavaScript. You should also be familiar with JSON. Knowing XML will also be helpful.<\/p>\n\n\n\n
jQuery is a free and open source JavaScript library. It simplifies common web tasks such as state initialization or updating elements and makes it easy to make AJAX calls, manipulate content, and create animations. It also does the dirty work of dealing with cross-browser compatibility issues. jQuery’s syntax is much simpler and concise than the syntax of vanilla JavaScript.<\/p>\n\n\n\n
JQuery uses CSS syntax for many operations. It works easily with elements and sets of elements. It can also be extended with plugins. You use free plugins or create your own.<\/p>\n\n\n\n
Selectors and filters are used to extract information from web pages. To select an element, use<\/p>\n\n\n\n
$(\"p\")\n<\/code><\/pre>\n\n\n\nThis selects all <p> html elements. The following code will select all HTML elements with the class classes with the name “myclass”:<\/p>\n\n\n\n
$(\".myclass\")\n<\/code><\/pre>\n\n\n\nThe following code will select all HTML elements with the identifier “myid”:<\/p>\n\n\n\n
$(\"#myid\")\n<\/code><\/pre>\n\n\n\nFollowing example shows how the three types of selector are used.<\/p>\n\n\n\n
<html>\n<head>\n <title>Selectors<\/title>\n <script type=\"text\/javascript\" src=\"jquery-3.1.1.js\"><\/script>\n <script type=\"text\/javascript\">\n $(\"document\").ready(function() {\n $(\"h1\").css(\"border\", \"5px solid red\");\n $(\".myclass\").css(\"border\", \"5px solid green\");\n $(\"#myid\").css(\"border\", \"5px solid blue\");\n });\n <\/script>\n<\/head>\n<body>\n <h1>Tag selector<\/h1>\n <h2 class=\"myclass\">Class Selector<\/h2>\n <h3 id=\"myid\">Id Selector<\/h3>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nFilters<\/h3>\n\n\n\n
Filters are used to narrow down results of selectors. :first selects the first instance of the selector. :last selects the last instance of the selector. p:not(p:eq(2)) means select all <p> tags except the one with index=2. Since indexing starts with 0, this will select all except the third. :even select even number indexed tags and :odd is for odd numbered. Since the indexing starts with 0, even would select first, third, fifth, etc. See the code below:<\/p>\n\n\n\n
<html>\n<head>\n <title>Filters<\/title>\n <script type=\"text\/javascript\" src=\"jquery-3.1.1.js\"><\/script>\n <script type=\"text\/javascript\">\n $(\"document\").ready(function() {\n $(\"#one p:first\").css(\"border\", \"5px solid red\");\n $(\"#one p:last\").css(\"border\", \"5px solid red\");\n $(\"#two p:even\").css(\"border\", \"5px solid green\");\n $(\"#two p:odd\").css(\"border\", \"5px solid blue\");\n $(\"#three p:not(p:eq(2))\").css(\"border\", \"5px solid orange\");\n });\n <\/script>\n<\/head>\n<body>\n <h3>:first and :last<\/h3>\n <div id=\"one\">\n <p>First paragraph<\/p>\n <p>Second paragraph<\/p>\n <p>Third paragraph<\/p>\n <\/div>\n <h3>:even and :odd<\/h3>\n <div id=\"two\">\n <p>First paragraph<\/p>\n <p>Second paragraph<\/p>\n <p>Third paragraph<\/p>\n <p>Fourth paragraph<\/p>\n <\/div>\n <h3>All except one<\/h3>\n <div id=\"three\">\n <p>First paragraph<\/p>\n <p>Second paragraph<\/p>\n <p>Third paragraph<\/p>\n <p>Fourth paragraph<\/p>\n <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nEditing Page Content<\/h3>\n\n\n\n
To edit page content, you use html(), prepend() or text() functions. html() will replace existing content. prepend() will add content in front of existing content. text() will add new content. Following code shows how they are used:<\/p>\n\n\n\n
<html>\n<head>\n <title>Creating and Changing Content<\/title>\n <script type=\"text\/javascript\" src=\"..\/jquery-3.1.1.js\"><\/script>\n <script type=\"text\/javascript\">\n $(\"document\").ready(function () {\n var newcontent = $(\"<p>\");\n newcontent.append(\"Added this text\");\n $(\"#txt1\").html(newcontent);\n $(\"#txt2\").html(\"Replaced existing content\")\n $(\"#txt3\").prepend(\"Added this text before \");\n $(\"#txt4\").text(\"Adding new text\");\n });\n <\/script>\n<\/head>\n<body>\n <div id=\"txt1\"><\/div>\n <div id=\"txt2\">This will be replaced<\/div>\n <div id=\"txt3\">existing text<\/div>\n <div id=\"txt4\">new text<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Before learning jQuery, you should learn HTML, CSS, JavaScript, and learn how to debug JavaScript. You should also be familiar with JSON. Knowing XML will also be helpful. jQuery is a free and open source JavaScript library. It simplifies common web tasks such as state initialization or updating elements and makes it easy to make […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[185],"tags":[54,256],"class_list":["post-791","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-quickstart"],"_links":{"self":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/comments?post=791"}],"version-history":[{"count":1,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/791\/revisions"}],"predecessor-version":[{"id":792,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/791\/revisions\/792"}],"wp:attachment":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/media?parent=791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/categories?post=791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/tags?post=791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}