Notes on JQuery

Google Download JQuery
jquery.com

Select “Download the compressed, production jQuery 2.1.1” to go to code.jquery.com

Save this code into a file named ‘jquery.js’.


<head>
  <script src="jquery.js"></script>
</head>

Or use the ajax.googleapis.com via:


<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

PUTTING IT TOGETHER
Create a file named index.html.


<html>
<head>
  <script src="jquery.js"></script>
  <script src="index.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

In the same folder, add the jquery.js file downloaded above and add a new file index.js with the following code:


$(document).ready(function() {
  console.log('...Hello World');
});

Open index.html in Google Chrome. Right click the heading and select “Inspect Element”. Then, click on the Console tab. This will show the message from the index.js file. This prints “…Hello World” to the console when the page is ready.

FINDING ELEMENTS
See api.jquery.com for more details.


$(document).ready(function() {
  $('div.mydiv').addClass('classToAdd'); // <div class='mydiv classToAdd'>
  $('#myID > li').addClass('classToAdd'); // <div id='myID'><li class='classToAdd'>
  $('#myID li.myclass').addClass('classToAdd'); // <div id='myID'><li class='myclass classToAdd'>
  $('#myID li:not(.classToAdd)').addClass('classToAdd'); // <div id='myID'><li class='classToAdd'> // Adds the classToAdd class to any li tag contained within an element whose id is myID which does not currently have the classToAdd class
  $('a[href^="mailto:"]').addClass('mailto'); // <a href='mailto:scottizu@gmail.com'>e-mail me</a> // Adds the mailto class to any anchor whose href starts with "mailto"
  $('a[href$="pdf"]').addClass('pdflink'); // Ends with pdf
  $('a[href^="http"][href*="google"]').addClass('googleClass'); // <a href='http://www.google.com' class='googleClass'>www.google.com</a>

  $('tr:even').addClass('classToAdd');
  $('tr:nth-child(odd)').addClass('classToAdd');
  $('td:contains(Henry)').nextAll().andSelf().addClass('classToAdd');
  $('td:contains(Henry)').parent().children().addClass('classToAdd');
  $('li li li').addClass('classToAdd');
  $('tr').find('td:eq(2)').addClass('classToAdd');
  $('td:contains(Henry)').parent().first().addClass('classToAdd');
  $('li > a').siblings().addClass('classToAdd');
  $('a[href$="pdf"]').closest('ul').addClass('classToAdd');
}); // starts with http and contains google

Advertisements

A Simple Image Overlay Example

From jquerytools.org

This example uses jquery 1.2.7. Create a file “test.html” and edit with a text editor. Add the following code. You will need to add an image “myimage.png” to the same directory.


<html>
    <head>
        <meta charset="UTF-8" />
        <title>Image Overlay Example</title>
		<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

	</head>
    <body>
<p>
	<button class="modalInput" rel="#myID">Show Image</button>
	<!-- yes/no dialog -->
	<div class="modal" id="myID" style="display:none;padding:15px;border:2px solid #333;-webkit-border-radius:6px;">
		<image src="myImage.png" />
		<br>
		<button class="close">Close</button>
	</div>
</p>

<script>
$(document).ready(function() {
	$(".modalInput").overlay({
		// some mask tweaks suitable for modal dialogs
		mask: {
			color: '#ebecff',
			loadSpeed: 200,
			opacity: 0.9
			},
		closeOnClick: false,
		fixed: false
	});
  });
</script>
    </body>
</html>

Working with JQuery, JSFiddle and Highcharts

At www.highcharts.com, there are several possible javascript charts that can be used to visualize data. Click demo, highcharts demos. Click on edit in JSFiddle to go to jsfiddle.net. In order to get this example working, you will need to include three things: 1) JQuery, 2) Javascript and 3) HTML.

Create a new file named “highcharts.html” and edit it with a text editor like Notepad or Notepad++. Copy the following template:


<html>
<!--INCLUDE_JQUERY-->
<script type="text/javascript">
<!--INCLUDE_JAVASCRIPT-->
</script>
<body>
<!--INCLUDE_HTML-->
</body>
</html>

Insert code to include JQuery on the line after the INCLUDE_JQUERY marker. In this JSFiddle example, they reference JQuery 1.9.1 so you would add the following:


<!--INCLUDE_JQUERY-->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

You might have to google “Include JQuery 1.9.1” or such for other versions since JQuery 1.4 is included with the following:


<!--INCLUDE_JQUERY-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Next, insert the Javascript code on the line after INCLUDE_JAVASCRIPT and the html code on the line after INCLUDE_HTML. This will give you the following html file:


<html>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });
</script>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

You can then open this html file in firefox to see the basic chart demonstrated by the demo.

Pulling out the actual variables from the highcharts code, we create variables for chartTitle, chartSubTitle, yAxisTitle, monthsArray and seriesJSONArray. This might yield the following code:


<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var chartTitle = 'Financial Tracking';
var chartSubTitle = '2014';
var yAxisTitle = 'Totals';
var monthsArray =  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
var seriesJSONArray = [];
seriesJSONArray[0] = new Object();
seriesJSONArray[0].name = 'Debt'
seriesJSONArray[0].data = [-61958, -57724, -54632, -53689, -34209, -36329];
seriesJSONArray[1] = new Object();
seriesJSONArray[1].name = 'Net Worth'
seriesJSONArray[1].data = [-41794, -38026, -33297, -31256, -25154, -26260];

$(function () {
        $('#container').highcharts({
            title: {
                text: chartTitle,
                x: -20 //center
            },
            subtitle: {
                text: chartSubTitle,
                x: -20
            },
            xAxis: {
                categories: monthsArray
            },
            yAxis: {
                title: {
                    text: yAxisTitle
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
			series: seriesJSONArray
        });
    });
</script>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

This displays the following.

Financials