Skip to content

jquery

One of the javascript frameworks out there, and i want to try them all (the popular ones that is), and make my own choice.

installation

You can download jquery as a full or minimized .js file (all in one) or just link to a certain version at googleapis.

So you can start your script section like this :

CDN
1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> alert ($.fn.jquery) </script>

Or for instance use a local downloaded version from visit and use that (example is the development uncompressed version).

downloaded
1
2
<script src="jquery-2.0.3.js"></script>
<script> alert ($.fn.jquery) </script>

introduction

jQuery uses the $ sign a lot, it is a shorthand for the jQuery function/Object which holds all functionality of jQuery. and

$
1
$.fn

Is simply shorter and clearer than :

same as
1
jQuery.prototype

Which is the same since

$ is jQuery
1
$ = jQuery

and

fn is prototype
1
jQuery.fn = jQuery.prototype

So $.fn is a shorthand for jQuery.prototype and it contains a number of members such as the version number :

log
1
2
console.log($.fn);
console.log(jQuery.prototype);

output :

output
1
2
[jquery: "2.0.3", constructor: function, init: function, selector: "", toArray: function…]
[jquery: "2.0.3", constructor: function, init: function, selector: "", toArray: function…]

main function

Or equivalent, it is the function called whenever the DOM is done loading, because some elements have to be instantiated before we begin. It is called the ready function.

$(document).ready(function() { $("div").click(function() { alert("Hello world!"); }); });

This assumes the existence of a div with id "div" and with enough content to make it 'clickable'. A complete example would be

clickable
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>The jQuery Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript" language="javascript">
   // <![CDATA[
   $(document).ready(function() {
      $("div").click(function() {
        alert("Hello world!");
      });
   });
   // ]]>
   </script>

</head>
<body>
<div id="newdiv" class="divclass">
Click on this to see a dialogue box.
</div>
<div id="newdiv" class="divclass">
this is a second div
</div>
</body>
</html>

Now this code would trigger .click() on any dom element that is a div. You can also use the class (.) and id (#) selector signs to hook up the function. For instance :

click in class
1
$(".divclass").click(function() { alert ("clicked");} )

would trigger the function on both divs shown. However :

id click
1
$("#newdiv").click(function() { alert ("clicked");} )

would only work on one of the 2 divs, because id is supposed to be unique, and only one of the two divs gets the id given (in my case it was the first).

The selectors used in jQuery are :

selector Description
Name Selects all elements which match with the given element Name.
#ID Selects a single element which matches with the given ID
.Class Selects all elements which match with the given Class.
Universal (*) Selects all elements available in a DOM.
Multiple Elements E, F, G Selects the combined results of all the specified selectors E, F or G.
As an example, for the main site's language support, i had to re-inject texts in all dom elements t hat where given special id's 'lang-*'. A simple way of getting all these is, since they where all p elements :
regexp
1
list = JQuery("p[id^='lang-']")

^= meaning "starting with". But since i also might want to use other elements than p, i used the wildcard, JQuery can become $ and we could directly run a function for each element:

regexp
1
2
3
4
5
$("*[id^='lang-']").each(
    function(idx,elm) { 
        console.log(elm);
    } 
)

custom scripts

It is better to divide the html from javascript and provide a custom script. In the example given it would be a split in :

split js ...
1
2
3
4
5
6
/* Filename: custom.js */
$(document).ready(function() {
    $("div").click(function() {
        alert("Hello world!");
    });
});

And :

... and html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
    <head>
        <title>The jQuery Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
       <script type="text/javascript" src="custom.js"></script>
    </head>
    <body>
        <div id="newdiv">
           Click on this to see a dialogue box.
        </div>
    </body>
</html>

troubleshooting

Denying load

This message :

Denying load of <chrome-extension://bjgfdlplhmndoonmofmflcbiohgbkifn/js/lib/jquery-2.0.2.min.map>. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Could be a possible installation problem, but first check if you have the opensubtitles.org extension installed. It has an old version of jquery (1.5) without the map file which caused my problems. Also it tried to 'inject' some advertising site so i deleted it

Otherwise : Seems to be caused by the extension for jquery which is installed in (in my case) :

extension
1
~/.config/chromium/Default/Extensions/bokkhpcjhfanbnpfgkjdcjfdfohdlbpf/1.5_0/jquery-latest.min.js

This downloaded version cannot find the "map" file :

debug map
1
jquery-latest.min.map

It is used for minimized js files to still be able to be debugged, where the debug info is gotten from the .map filed mentioned. This is called sourceMapping.

A quick fix is editing the file, and removing the line saying :

disable
1
//@ sourceMappingURL=jquery-latest.min.map

It's high up in the file, probably the second line. Commenting won't work as you see, it already is.

Supposedly this would also be fixed when you use the online versions of jquery. For a list of where they can be found on-line see this link :

visit