jQuery To Manipulate The DOM
jQuery is a tool set that allows you to be able to manipulate the DOM (using JavaScript), handling input events and creating animations in an easy way. You don’t have to use jQuery, but it does make things much simpler. Being a library of different commands, it has to be loaded in your HTML file by providing a link inside the <head> tag.
jQuery: <script type = “text/javascript” src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
jQueryUI: <script type = “text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset=”utf-8"></script>
To make sure the whole documents gets loaded before JS is run, in other words, as soon as your page is loaded, you have to write $(document).ready(function() {}); , or simply $(function() {}); . This will avoid potential bugs and errors.
jQuery’s syntax is pretty straightforward: $("selector").method(); . The selector selects the element (by type, class, or ID), and the method specifies the actions that you want to perform on it. Just like CSS, if you have to select a class you will have to write $(".class").method(); , whereas if you have to select an ID you will need to write $("#ID").method(); . The method’s parentheses can sometimes be used to select the number of milliseconds at which the action fires.
With jQuery you can also chain methods: this means that, for instance, you will be able to chain method1 and method2 in the following way, without having to write two separate statements, one for each method: $("selector").method1().method2(); .
Some of the most common jQuery methods include:
- The
.addClass()function, to add a class to an element. For instance:$("img").addClass("image");. - The
.removeClass()function to remove a class from an element. For instance:$("img").removeClass("image");. - The
.remove()function, to completely remove an element. For instance:$("img").remove();. - The
.text()function, to edit the text of an element. For instance:$("button").text("Hello");. - The
.html()function, to edit the HTML of an element. For instance:$("button").html("<b>Hello</b>");. - The
.css()function, to edit the CSS of an element. For instance:$("button").css("color", "green");. - The
.prop()function, to edit a property of an element. For instance:$("button").prop("disabled", true);. - The
.appendTo()function, to append an HTML element to another element. For instance:$("#myButton").appendTo("myDiv");. - The
.clone()function, to clone an element. For instance:$("#myButton").clone().appendTo("#myDiv");. - The
.parent()function, to access the parent element. For instance:$("#myButton").parent().addClass("parent");. - The
.children()function, to access the children elements. For instance:$("#myButton").children().addClass("child");. You can also select a specific child withtarget:nth-child(n).
