jQuery

Recently I started to learn jQuery.jQuery is a lightweight javascript library. You can use it online or offline. I used Google CDN for my projects. Many users already have downloaded jQuery from Google when visiting another site. As a result, it will be loaded from the cache when they visit your site, which leads to faster loading time. Also, most CDNs will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

We can use jquery to select an HTML element and add various events to it. jQuery events are actions or occurrences that happen in the browser, such as a user clicking on a button or an image loading. The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). This is the basic syntax.

$(selector).action()

The document-ready event

This is to prevent any jQuery code from running before the document is finished loading.

$(document).ready(function(){
  // jQuery methods go here....
});

jQuery selectors

We can select an HTML element by its Id(#id) or Class(.class).

$(document).ready(function(){
  $(".button").click(function(){
    $("#test").hide();
  });
});

jQuery is very easy to use and it's a very useful library. This is a code that I wrote to change the theme of a web page.

 <script>
      function theme_dark() {
        $('.theme-dark').css('color', 'white');
        $('body').css('background-image', 'url(image-dark.jpg)');
        $('.input-box').css('border-bottom', '2px solid white ');
        $('.input-box input').css('color', '#fff');
        $('.input-box label').css('color', '#fff');
        $('.form-box h2').css('color', '#fff');
        $('.forgot').css('color', '#fff');
        $('.forgot a').css('color', '#fff');
        $('.icons').css('color', '#fff');
      }

      function theme_lite() {
        $('.theme-dark').css('color', '#162839');
        $('body').css('background-image', 'url(background-            lite.jpg)');
        $('.input-box').css('border-bottom', '2px solid #162839');
        $('.input-box input').css('color', '#162839');
        $('.input-box label').css('color', '#162839');
        $('.form-box h2').css('color', '#162839');
        $('.forgot').css('color', '#162839');
        $('.forgot a').css('color', '#162839');
        $('.icons').css('color', '#162839');
      }
      $(document).ready(function () {
        $('.theme-dark').click(function () {
          $(theme_dark()).fadeIn('slow');
          }
        });
      });
    </script>

I know it looks like garbage but It WORKS!!