Post
Ask Question

Javascript Selector VS Jquery Selector

Javascript Selector VS Jquery Selector 

jQuery, quite popular these days, has enabled us in developing more interactive and appealing websites. jQuery is a library that has facilitated us in building JavaScript webpages and web applications much more quickly and in an easy way. More often with jQuery you can write a single line of code to fulfill the requirement. jQuery is written in JavaScript, and is available  as a single .js file that you can link to your webpage. Your JavaScript code then accesses the library by calling various jQuery functions.

This article shares some best practices that can be considered with jQuery and Javascript selector. It throws light on the use of $(“#selector”) id selector used in jQuery and  document.getElementById(“id”) function used in Java Script and allows you to decide which one is better and suits your requirement

Java Script: GetElementById(“Id”);

  1. It returns the first element whose ID is specified by GetElementById. If no such element exists, returns null.
  2. It is supported by all browsers
  3. In IE8 GetElementById perform a case-sensitive match on ID attribute, but for IE7
    and previous versions this method performs a case-insensitive match on both ‘By Id'
    and ‘By Name' attribute which shows unexpected results.
  4. GetElementById is very fast as compare to jQuery ID selector ($(“#id”))

jQuery: $(“#selector”); (Id Selector)

  1. Returns the first element whose ID is specified in selector. If no such element exists, returns null.
  2. It is supported by all browsers
  3. jQuery selector performs a case-sensitive match on ‘Id' or ‘Class' selector attribute on all browsers and shows accurate results.
  4. jQuery selector is very slow as compare to GetElementById in Java Script.

$(“# selector”) is not as simple as document.getElementById, because it exists in jQuery
framework. When you try to get an element this way, it wraps the whole jQuery object, all jQuery functions, properties, and different special cases associated with that element which makes it simple to read and easy to extend. But for some cases it has lead to bad performance.

This article shows that “GetElementById” selector in Java Script is very fast as compared to “$(“#Id”)” selector in jQuery but there is one drawback with GetElementById that most recent browsers does not support case-sensitivity for e.g IE6, IE7 and thus shows you unexpected results