How to check, if jQuery is used in a given web application?
javascript, jquery
Solution
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.
Problem
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 } ```