Main Question: Is it possible to use a JavaScript conditional and then use some jQuery code?

Here is a currently non-working example:

<script>
//<![CDATA[ 
if (location.pathname == "/SearchResults.asp" 
|| location.pathname.indexOf("-s/") != -1 
|| location.pathname.indexOf("_s/") != -1) 
$('.colors_productname span').css("background-color", "#F7F7F7");
//]]> 
</script>

The JavaScript conditional was provided by my ecommerce platform (Volusion) to target just category pages (the jQuery was my doing). I asked them if this JavaScript code would still work given that my urls dont include "/SearchResults.asp" (One of them is actually "/Meats-s/3393.htm"), but they assured me that it should still work.

Secondary Question: What do the "location.pathname.indexOf" lines do?

Main Question: Is it possible to use a JavaScript conditional and then use some jQuery code?

Here is a currently non-working example:

<script>
//<![CDATA[ 
if (location.pathname == "/SearchResults.asp" 
|| location.pathname.indexOf("-s/") != -1 
|| location.pathname.indexOf("_s/") != -1) 
$('.colors_productname span').css("background-color", "#F7F7F7");
//]]> 
</script>

The JavaScript conditional was provided by my ecommerce platform (Volusion) to target just category pages (the jQuery was my doing). I asked them if this JavaScript code would still work given that my urls dont include "/SearchResults.asp" (One of them is actually "/Meats-s/3393.htm"), but they assured me that it should still work.

Secondary Question: What do the "location.pathname.indexOf" lines do?

• javascript
• jquery

• 15 JQuery is javascript. – 000 Commented Jul 10, 2013 at 23:01
• 2 The second question is the answer to your first one :) – Ilia G Commented Jul 10, 2013 at 23:01

5 Answers 5

While you can mix then, it is important to understand that jQuery and native Javascript refer to DOM elements differently.

Assume you have a document with an element like this:

<span id="message_location"><span>

To get that element in regular Javascript would be:

var spanElement = document.getElementById("message_location");

However, with the jQuery library you would use this syntax:

var $spanElement = $("#message_location");

Here you must be aware that spanElement and $spanElement are not the same thing. One is a DOM element and the other is an array cum jQuery object that holds one value -- the span element.

When going back and forth from the jQuery library and regular Javascript, it is very easy to get confused as to what you are really referring to.

(Personally, any time I have a jQuery reference to a DOM element, I always start the variable name with a $. It keeps my life simple...)

jQuery and JavaScript are not separate languages. jQuery is a library written in Javascript, so any valid jQuery statement is a valid JavaScript statement.

Q2: location.pathname is the path of the url after your domain name.

e.g http://www.google.com/s/goo.html -> the pathname would return s/goo.html

So your if condition is trying to find out if this string contains the substring "-s".

You can absolutely mix them.

The location.pathname.indexOf is searching the current URL for an instance of "_s/" or "-s/". If the URL does not contain those characters (or if it equals "/SearchResults.asp"), your jquery code is run.

You should be able to mix the two freely, be careful of using JQuery selectors vs regular Javascript dom elements though, the two are not always the same. (ie. class, multiple selectors.)

jQuery is just a javascript object that provide usefull methods. So yes, you can use vanilla js and jQuery together.