Problem with Jquery in Durpal 7 I am using Drupal 7 and bootstrap theme, I also have installed jquery update module, 

Now I have created a js (jquery) file and saved it under js folder in bootstrap theme, I tried to call my js file in the info file using script[] = '...', the console then suggested  that '$ is not a function', which means my js file was called before jquery was called. 

Then I decided to call the my js file from template.php:

function bootstrap_preprocess_html(&amp;$variables) {
  $options = array(
    'group' =&gt; JS_THEME,
  );
  drupal_add_js(drupal_get_path('theme', 'bootstrap'). 'js/product_pages.js', $options);
}


then the following line showed up in the console:

GET http://localhost/Brompton/sites/all/themes/bootstrapjs/product_pages.js?mpprnf 404 (Not Found) 


I am confused, how exactly can I get jquery work properly here?
Technically you've got two Problems. The first one is namespacing, like Molot pointet out. To use $ for jQuery you need at least to wrap your code into this construct:

(function ($) {
  $('body').fancystuff();
})(jQuery);


That's enough for getting your code executed, for the drupal way you need to attach a behaviour to the Drupal object like the tutorial in Molot's link shows.

The second problem is a missing slash in your drupal_add_js:

drupal_get_path('theme', 'bootstrap') . '/' .'js/product_pages.js'