Skip to content

General

IT Notes → JQuery @ December 22, 2020

  • jQuery is the most popular JavaScript library. It uses $ by default.
  • https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js..
    • $(“#id”);
    • $(“.class”);
    • $(“xpath”);
  • $.noconflict() relinquishes jQuery’s control of the $ variable and if assigned to say $j will use $j to access jQuery.
  • <script type="text/javascript">
    var $j = jQuery.noConflict();
    
    $j(document).ready(function() {
    // Code that uses jQuery's $ can follow here like $j("div").hide();
    });
    
    // Code that uses other library's $ can follow here.
    </script>
  • Some important functions. fn() is called on an element and $.fn() on jQuery and is usually low-level and not preferred.
    • css() can be used to change the style dynamically. Properties as {‘color’:”#000″, ‘display’:”block”};
    • addClass(), removeClass() and removeClass() to add, remove or toggle a class.
    • animate() gives the properties to which the animation moves. We can use easing function and speed and call back function executed after completion.
    • setInterval() and clearInterval() to repeat after an interval and setTimeout() and clearTimeout() to be executed after timeout. There is also delay to bring in a delay between functions.
    • slideUp(), slideDown() and slideToggle() and fadeIn(), fadeOut() and fadeToggle().
    • clone() will clone a copy which could be used later say for appending.
    • html(), text() and empty() and val().
    • append(), prepend() — inside block and after(), before() — outside block.
    • ajax() will dynamically load contents, scripts and data. load() to grab html from another page given the URL
    • $.ajax({
      url: filename,
      type: "GET",
      dataType: "html",
      beforeSend: function () {},
      success: function (data, textStatus, xhr) {},
      error: function (xhr, textStatus, errorThrown) {}
      });
    • bind() and unbind() to add an event to an existing code on page load. We can use live() for adding to a dynamically added code also but delegate() preferred. on() and off() is the best method available for same.
    • preventDefault() prevents default firing action say href of a link. stopPropogation() stops event firing on ancestors. Events are fired in the order they are bound. stopImmediatePropogation() stops all future bound events.
    • each(fn) will execute function on each element of object.
    • data() will attach data to any DOM element. removeData() removes key and values. $.hasData inform status.
    • jQuery.data(div, "test", { first: 16, last: "pizza!" });
      
      $("span:first").text(jQuery.data(div, "test").first);
    • match() extracts part of a string matching a regex whereas test() checks if it matches. contains() checks it in parent and children.
    • find(selector) gives descendents matching the selector. filter() is similar but also applies it to the parent.
    • slice() can be used to perform actions on a subset of elements prev() and next() on immediate elements in a matched set of array.
    • $.extend(target, obj1, obj2, …) combines two or more objects into target object.
    • serialize() will create a string from a form and serializeArray() an array from form.
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x