JQuery Tutorial

Core JQuery

The JQuery is a popular open source JavaScript library, created by John Resig in 2006, that’s designed to simplify the client-side scripting of HTML. You need a scripting library that allows you to change and add behavior on web pages. To change your web pages without reloading, we need Javascript to talk to your browser.

jQuery’s motto is “Write less, do more. Purpose of JQuery is to make less code and easier to use Javascript on the website. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler and an easy-to-use.

jQuery fundamentals

At its core, jQuery focuses on retrieving elements from HTML pages and performing operations on them. If you’re familiar with CSS, you’re already well aware of the power of selectors, which describe groups of elements by their type, attributes, placement within the document, and much more. With jQuery, you can use that knowledge and that degree of power to vastly simplify your JavaScript. jQuery places a high priority on ensuring that code will work consistently across all major browsers; many of the harder JavaScript problems have been silently solved for you.

Note: The JavaScript interpreter doesn’t change the original HTML and CSS files. It makes changes to the DOM’s representation of the page in the browser’s memory.

1. Adding jQuery to Your Web Pages

 

Selecting DOM Element:

jQuery selects elements the same way CSS does. You already know more about jQuery than you realize.
CSS selectors select elements to add style to those elements; jQuery selectors select elements to add behavior to those elements. We can select an element based on its name, class, ID, attribute, attribute value and much more.

Diagram

$(“Canbe”)  Note Canbe can be element, class, Id.

Selecting by Element name:

$(“h1”).text(“Hi All”);

Element Selector
The first we have to use jQuery method to select some document elements to act upon. We will use most powerful and frequently use jQuery’s $() function: the selection of DOM elements via selectors. For example, we will select all h1 heading in page as $(“h1”)

  • Add some JQuery action : $(“h1”).text(“Hi All”); 

An example above will delete and add new text to all h1 as Hi All, the $ is an alias or shortcut of jQuery() function which returns jQuery object containing a set of DOM elements that match the given criteria and also expose many of jQuery’s methods and properties. One of jQuery’s main strengths is that it allows you to work with the DOM
without having to know every little thing about it. Underneath it all, JavaScript is doing the heavy lifting.

jQuery Syntax
The jQuery syntax for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()

  • $ sign to define/access jQuery
  • (selector) to “query (or find)” HTML elements
  • jQuery action() to be performed on the element(s)
    Examples: $(“p”).hide() – hides all <p> elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("h2").text("Hi All");
});
</script>
</head>
<body>

<h2>This is a heading 2</h2>
<h2>This is a heading 2.</h2>
<p>This is paragraph.</p>
</body>
</html>

Note: We need to add DOM ready function, to make sure that DOM has finished loading before we can reliably use jQuery.

 

Selecting with ID and class

$(“#container”); Select the html elmenent with ID container.

$(‘.country’); Select the html element with .country class.

 

JQuery Selector example

  1. Select all li element inside of ul with class breakfast and modifies new text “Eat Well”
    <script>
    $(document).ready(function(){
        $("#breakfast > li").text("Eat Well");
    });
    </script>
    </head>
    <body>
    <h2>An unordered HTML list</h2>
    <ul id="breakfast">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  
    </body>

Adding Multiple tags select using Tag Manager JQuery Plugin

Last few days, I am searching for a good and small plugin to add multiple select tags in an input box. The Tags Manager v3.0.2 project on GitHub link. The v3.0.2 work nicely on bootstrap 4 and JQuery 3.2.1. We can use this plugin in two ways.

  1. Using CDN of Tags Manager directly to our project.
  2. Install the plugin through npm
    npm install --save max-favilli/tagmanager#v3.0.2
    Add node_modules/TagManager/tagmanager.js to headerscripts
    Add node_modules/TagManager/tagmanager.css to vendor.scss

Here I have added the link to the Tag manager documents site and you can look for further information. In this example, I add simple single input text box, where can add multiple values separate them with enter, comma, or tab. All the multiple tags value to input are attached to hidden input called hidden-tags and we can save this multiple values to our remote server. I also add code to retrieve all the added multiple tags from a remote server through HTTP GET methods and add all the value back
to input box so that we can delete or edit the value of our tags. Replace our demo HTTP get methods with your own API.

<html lang="">
<head>
<title>Input Type with multiple tags using Tag Manager Jquery Plugin</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
<style>
.container{
  padding-top:2em;
}

.tm-tag.tm-tag-info {
    color: #fff;
    background-color: #007bff;
    border-color: #194a82;
}
a.tm-tag-remove {
    color: #fff !important;
    opacity: 0.4;
}
</style>
</head>
<body>
<div class="container">
  <form>
    <div class="form-group">
      <label>Tags added to input box</label><br/>
      <input type="text" name="tags" id="countryTags" placeholder="Add a new Tags" class="tm-input form-control tm-input-info"/>
    </div>

    <div class="form-group">
      <label>
        <a class="btn bg-primary text-white" onclick="setSetting('countryTags', $('input[name=hidden-tags]').val());">Save</a>
      </label>
    </div>
  </form>
</div>
<script type="text/javascript">
  $(".tm-input").tagsManager();

  $.get('/api/...........').then(function(res) {
      var tags_array = res.split(",");

      var e = jQuery.Event("keydown");
      e.which = 9;

      for (i = 0; i < tags_array.length; i++) {
          $('#countryTags').val(tags_array [i]);
          $('#countryTags').trigger(e);
      }
  });
</script>
</body>
</html>

 

Once we retrieve the multiple tags value from the remote server, we have to add it back to our input tags. First, I retrieve all value from a remote server and add it to an array called tags_array. This array contains all the tags value.  Second, we have to loop through each string in a tags_array and have to add each string value to input text. While adding each string to input we have to trigger a tab event where number 9 indicate event with tabs this value-add our retrieve string to our hidden input text.