How to check, if jQuery is used in a given web application?

Question

This may seem like a ridiculous question, but as a newbie to JS/JQuery I've been merrily creating a simple .js file for creating a two column menu, mostly grabbing advice and bits of code from here. I've just come across a solution to something I need, where I need to use different code depending on whether I'm using JS or Jquery - and I have no idea what I'm using! This is confused by the fact that I was already including the JQuery library for my use of bxSlider (see below), before I started all this.

Apologies if I'm totally misunderstanding something fundamental here..

This is the relevent area from my HTML head:

<!-- jQuery library (served from Google)-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />

<!--Other javascript-->
<script src="<?php bloginfo('template_directory'); ?>/js/menu-two-cols.js"></script>

And this is my "menu-two-cols.js" file so far:

function menuTwoCols() {

var browserH = $(window).height();

if (browserH > 630) {
    //do nothing - menu can stay as a single column
}else{
    //do everything below

//make width auto for measurement for this child
$('.menu-header li:nth-child(6) li').css({'width':'auto'});

var maxOdd = 0;
var maxEven = 0;
var listItemNum = $(".menu-header li:nth-child(6) li").length;

console.log("First level menu (6) ODD num widths");
$('.menu-header ul li:nth-child(6) ul li:nth-child(odd)').each(function() {
    var $this = $(this);
    var colWidth = $this.outerWidth();
    if (colWidth > maxOdd) {
        maxOdd = colWidth;
    }
console.log(colWidth);   
});
console.log("Max Odd = " + maxOdd);

console.log("First level menu (6) EVEN num widths");
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)').each(function() {
    var $this = $(this);
    var colWidth = $this.outerWidth();
    if (colWidth > maxEven) {
        maxEven = colWidth;
    }
console.log(colWidth);   
});

console.log("Max Even = " + maxEven);    

var maxBoth = maxOdd + maxEven;
var maxOddPc = ((maxOdd / maxBoth) * 100)+"%";
var maxEvenPc = ((maxEven / maxBoth) * 100)+"%";

console.log("Max BothPx = " + maxBoth + '\n' +
            "Max Odd% = " + maxOddPc + '\n' +
            "Max Even% = " + maxEvenPc + '\n' +
            "List Item Num = " + listItemNum + '\n');

console.log("Text content");
console.log($('.menu-header ul li:nth-child(6) ul').text() + ' _ ');

//make changes to widths if no space for single column
$('.menu-header ul li:nth-child(6) > ul').css('width', maxBoth);
$('.menu-header li:nth-child(6) li:nth-child(odd)').css('width', maxOddPc);
$('.menu-header li:nth-child(6) li:nth-child(even)').css('width', maxEvenPc);
$('.menu-header ul li:nth-child(6) ul li:nth-child(2)').css({'border-top':'5px solid #fff'}); //top white line

}//end of if statement

}

jQuery is JavaScript. It's a library, not a separate language. — Rory McCrossan
– Rory McCrossan, Commented Oct 31, 2016 at 9:16
Anything which starts with $ or "jQuery" namespace is Jquery, This is your catch to know you are using jQuery. Its a Wrapper for javascript, behind the scenes its vanilla js. — Fida
– Fida, Commented Oct 31, 2016 at 9:23
I basically understand that - so how do I tell by just looking at a bit of code in a .js file whether it it JavaScript or JQuery? What are the differences? And what is my .JS file above? — Slab
– Slab, Commented Oct 31, 2016 at 9:25
Sorry my reply above was to Rory. Seeing Feeda's response, I see a lot of $ signs in my code, so I guess I'm using JQuery? — Slab
– Slab, Commented Oct 31, 2016 at 9:29

Mangu Singh Rajpurohit · Accepted Answer · 2016-10-31 09:54:51Z

4

jQuery is a one of the most useful and commonly used library, available in javascript. Javascript is a language, which is commonly used in the front-end development. But, there are lot of inconsistencies amongst browser, regarding API they expose for doing different tasks. Thus, at that time, jQuery comes into picture, which abstracts cross-browser API differences and offers a generic interface to use. Thus, Your code is no more concerned about different browser-dependent API issues. Hope it helps you. For more information, refer to https://en.wikipedia.org/wiki/JQuery.

Generally, code which includes jQuery, makes heavy use of '$', which is an alias for jQuery selector function.

Eg. in your code, there are several selectors such as

$('.menu-header li:nth-child(6) li')
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)')

Apart from above indicators, you can also use the following trick to find, if jQuery library is the part of your run-time environment or not :-

Press F12. Go to console. Type jQuery and press enter.

In case, your app is not using jQuery, then you'll get error.

edited Oct 31, 2016 at 9:54

answered Oct 31, 2016 at 9:21

Mangu Singh Rajpurohit

11.5k4 gold badges76 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slab Over a year ago

But how do I tell the difference between them by just looking at the code?

Slab Over a year ago

That is exactly what I wanted to know - so simple, but so hard to find out! Many thanks.

Slab Over a year ago

Thanks again for the extra information about typing jQuery into the console - I'm definately using jQuery!

Matt Fellows · Accepted Answer · 2016-10-31 09:51:09Z

The presence of a $ is usually a giveaway, but not exclusive to jQuery. Basically jQuery creates a namespace (A psuedo object to encapsulate all its code, functions variables etc) under the variable jQuery. Normally it also aliases this variable to another variable $, however jQuery isn't the only library/framework to do this.

Ultimately the only way to be certain is to follow the code through from the beginning. The HTML file will have to have imported jQuery at somepoint so if your page shows a <script> tag which has a src value which contains the word jquery, you probably are using jQuery somewhere. But look for $(document).ready(function($) ... or jQuery(document).ready(function($) ... in som js files to be sure?

k0pernikus · Accepted Answer · 2016-10-31 09:59:14Z

0

Read the relevant docs.

JavaScript Referency by Mozilla, and esp. dive into the ECMAScript 2016 as it is the current state of JavaScript. There's also a full language specification.
jQuery

Basically, jQuery an abstraction library written in JavaScript to handle browser differences in a unified way. And was often used as a hammer to solve all frontend problems in the past.

With the rise of shim libraries like es6-shim and tools like babel it is not as mandatory anymore.

answered Oct 31, 2016 at 9:59

k0pernikus

67.6k79 gold badges245 silver badges366 bronze badges

Collectives™ on Stack Overflow

How to check, if jQuery is used in a given web application?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related