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”);
- It
returns the first element whose ID is specified by GetElementById. If no
such element exists, returns null.
- It is
supported by all browsers
- 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.
- GetElementById
is very fast as compare to jQuery ID selector ($(“#id”))
jQuery: $(“#selector”); (Id Selector)
- Returns
the first element whose ID is specified in selector. If no such element
exists, returns null.
- It is
supported by all browsers
- jQuery
selector performs a case-sensitive match on ‘Id' or ‘Class' selector
attribute on all browsers and shows accurate results.
- 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