CODEWITHSUNDEEP
javascriptjquery
Slab
Slab

Reputation: 363

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

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

}

Upvotes: 3

Views: 10375

Answers (3)

k0pernikus
k0pernikus

Reputation: 66787

Read the relevant docs.

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.

Upvotes: 0

Mangu Singh Rajpurohit
Mangu Singh Rajpurohit

Reputation: 11420

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. enter image description here

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

Upvotes: 4

Matt Fellows
Matt Fellows

Reputation: 6532

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?

Upvotes: 2

Related Questions