JavaScript Library

What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

What jQuery Does The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods AJAX Effects and animations

Adding jQuery to Your Website Downloading jQuery Library to your computer From jQery.com The jQuery library is a single JavaScript file, and you reference it with the HTML tag for example:

Another Method If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). For example: getting jQuery Library from Google,

jQuery Syntax The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() $ sign to define/access jQuery (selector) to “find" HTML elements jQuery action() to be performed on the element(s)

Examples $("p").hide() - hides all elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". Basically, you can use CSS style selector to find a particular element in your HTML document.

Document.ready() function document.ready() is a function from jQeury. $(document).ready(function(){ //your own jQeury code. }); This is to prevent any jQuery code from running before the document is finished loading.

jQuery Selectors jQuery selectors are used to find HTML elements based on their id, classes, types, attributes, etc. All selectors in jQuery start with the dollar sign and parentheses: $(). For example: $(“p”), $(“.conclusion”), $(“#creditCard”) This will find all of elements in the HTML document.

jQuery Event Handling In jQuery, most DOM events have an equivalent jQuery method. To assign a click event to all paragraphs on a page, $("p").click(); Next, define how to react if the event happens: $("p").click(function(){ $(this).hide(); });

Examples $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });

JQuery: get() function Three simple jQuery methods for DOM manipulation are: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields

Examples of getting contents $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn3").click(function(){ alert("Value: " + $("#firstname").val()); });

Getting Attributes attr() method is used to get attribute values. For example: $("button").click(function(){ alert($("#linkGoogle").attr("href")); alert($(“#mainContent”).attr(“style”); });

JQuery: set() function We will use the same three methods to set content: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields

Examples of setting contents $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val(“Hello World"); });.

Examples of setting contents $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val(“Hello World"); });.

Examples of setting contents $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val(“Hello World"); });.

Example of setting attributes attr() - is used to set/change attribute value(s). For example: $("button").click(function(){ $("#mainContent").attr({ “style" : “background-color: yellow", “font-size” : “20pt" }); });

jQuery: Add Elements We will look at four jQuery methods that are used to add new content: append() - Inserts content at the end of the selected elements prepend() - Inserts content at the beginning of the selected elements after() - Inserts content after the selected elements before() - Inserts content before the selected elements

Examples Append() - inserts content at the END of the selected HTML elements. $("p").append("Some appended text."); prepend() - inserts content at the BEGINNING of the selected HTML elements. $("p").prepend("Some prepended text."); after() - inserts content AFTER the selected HTML elements. $(“firstname”).after(“Guanyu”);

Remove Elements To remove elements and content, there are mainly two jQuery methods: remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element

Examples remove() - removes the selected element(s) and its child elements $("#div1").remove(); The jQuery empty() method removes the child elements of the selected element(s). $("#div1").empty(); remove() method also accepts one parameter, which allows you to filter the elements to be removed. $("p").remove(“#mainContent");