<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal: Siblings</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<ul>
<li class='new'>Item 1</li>
<li id='two' class='new'>Item 2</li>
<li >Item 3</li>
<li class='new'>Item 4</li>
<li class='new'>Item 5</li>
<li >Item 6</li>
<li >Item 7</li>
</ul>
<script>
$('#two').siblings('.new').css('font-weight', 'bold')
// Alternative to select from all siblings, including the callee
// $('#two').parent().children('.new').css('font-weight', 'bold')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal: Parents</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<div>
<div>
<section>
<blockquote>
<ul>
<li>Item 1</li>
<li id='elem'>Item 2</li>
<li>Item 3</li>
</ul>
</blockquote>
</section>
</div>
<div>
<section>
<blockquote>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</blockquote>
</section>
</div>
</div>
<script>
$('#elem').parents('div') .css('background', 'yellow')
$('#elem').parentsUntil('div').css('text-decoration', 'underline')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal: Parent</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class='memo'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
$('li').parent() .css('font-weight', 'bold')
$('li').parent('.memo').css('list-style-type', 'circle')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Dimensions</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<p>
<button id='getdoc'>Get document width</button>
<button id='getwin'>Get window width</button>
<button id='getdiv'>Get div width</button>
<button id='setdiv'>Set div width to 150 pixels</button>
</p>
<div id='result' style='300px; height:50px; background:#def;'></div>
<script>
$('#getdoc').click(function()
{
$('#result').html('Document ' + $(document).width())
} )
$('#getwin').click(function()
{
$('#result').html('Window ' + $(window).width())
} )
$('#getdiv').click(function()
{
$('#result').html('Div ' + $('#result').width())
} )
$('#setdiv').click(function()
{
$('#result').width(150)
$('#result').html('Div ' + $('#result').width())
} )
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Modifying The DOM</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<h2>Example Document</h2>
<a href='http://google.com' title='Google'>Visit Google</a>
<code>
This is a code section
</code>
<p>
<button id='a'>Remove the image</button>
<button id='b'>Empty the quote</button>
</p>
<img id='ball' src='ball.png'>
<blockquote id='quote' style='border:1px dotted #444; height:20px;'>
test
</blockquote>
<script>
$('a').prepend('Link: ')
$("[href^='http']").append(" <img src='link.png'>")
$('code').before('<hr>').after('<hr>')
$('#a').click(function() { $('#ball').remove() } )
$('#b').click(function() { $('#quote').empty() } )
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The DOM: attr</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<h2>Example Document</h2>
<p><a id='link' href='http://google.com' title='Google'>Visit Google</a></p>
<script>
$('#link').text('Visit Yahoo!')
$('#link').attr( { href :'http://yahoo.com', title:'Yahoo!' } )
alert('The new HTML is:
' + $('p').html())
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The DOM: html & text</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<h2>Example Document</h2>
<p id='intro'>This is an example document</p>
<script>
alert($('#intro').html())
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Effects: Animation</title>
<script src='jquery-3.2.1.min.js'></script>
<style>
#ball {
position :relative;
}
#box {
width :640px;
height :480px;
background:green;
border :1px solid #444;
}
</style>
</head>
<body>
<div id='box'>
<img id='ball' src='ball.png'>
</div>
<script>
bounce()
function bounce()
{
$('#ball')
.animate( { left:'270px', top :'380px' }, 'slow', 'linear')
.animate( { left:'540px', top :'190px' }, 'slow', 'linear')
.animate( { left:'270px', top :'0px' }, 'slow', 'linear')
.animate( { left:'0px', top :'190px' }, 'slow', 'linear', bounce)
}
$('#ball').click(function() { $(this).finish() })
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Effects: Sliding</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<button id='slideup'>slideUp</button>
<button id='slidedown'>slideDown</button>
<button id='slidetoggle'>slideToggle</button>
<div id='para' style='background:#def'>
<h2>From A Tale of Two Cities - By Charles Dickens</h2>
<p>It was the best of times, it was the worst of times, it was the age of
wisdom, it was the age of foolishness, it was the epoch of belief, it was
the epoch of incredulity, it was the season of Light, it was the season of
Darkness, it was the spring of hope, it was the winter of despair, we had
everything before us, we had nothing before us, we were all going direct to
Heaven, we were all going direct the other way - in short, the period was so
far like the present period, that some of its noisiest authorities insisted
on its being received, for good or for evil, in the superlative degree of
comparison only</p>
</div>
<script>
$('#slideup') .click(function() { $('#para').slideUp( 'slow') })
$('#slidedown') .click(function() { $('#para').slideDown( 'slow') })
$('#slidetoggle').click(function() { $('#para').slideToggle('slow') })
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Effects: Fading</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<button id='fadeout'>fadeOut</button>
<button id='fadein'>fadeIn</button>
<button id='fadetoggle'>fadeToggle</button>
<button id='fadeto'>fadeTo</button>
<p id='text'>Click the buttons above</p>
<script>
$('#fadeout') .click(function() { $('#text').fadeOut( 'slow' ) })
$('#fadein') .click(function() { $('#text').fadeIn( 'slow' ) })
$('#fadetoggle').click(function() { $('#text').fadeToggle('slow' ) })
$('#fadeto') .click(function() { $('#text').fadeTo( 'slow', 0.5) })
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Effects: toggle</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<button id='toggle'>Toggle</button>
<p id='text'>Click the Toggle button</p>
<script>
$('#toggle').click(function() { $('#text').toggle('slow', 'linear') })
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Effects: hide & show</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<button id='hide'>Hide</button>
<button id='show'>Show</button>
<p id='text'>Click the Hide and Show buttons</p>
<script>
$('#hide').click(function() { $('#text').hide('slow', 'linear') })
$('#show').click(function() { $('#text').show('slow', 'linear') })
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events: submit</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<form id='form'>
First name: <input id='fname' type='text' name='fname'><br>
Last name: <input id='lname' type='text' name='lname'><br>
<input type='submit'>
</form>
<script>
$('#form').submit(function()
{
if ($('#fname').val() == '' ||
$('#lname').val() == '')
{
alert('Please enter both names')
return false
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events: Further Mouse Handling</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<h2 id='test'>Pass the mouse over me</h2>
<script>
$('#test').mouseenter(function() { $(this).html('Hey, stop tickling!') } )
$('#test').mouseleave(function() { $(this).html('Where did you go?') } )
// Or you can use these...
//
// $('#test').mouseover(function() { $(this).html('Cut it out!') } )
// $('#test') .mouseout(function() { $(this).html('Try it this time...') } )
// This...
//
// $('#test').hover(function() { $(this).html('Cut it out!') },
// function() { $(this).html('Try it this time...') } )
// Or this...
//
// $('#test').mouseover(function() { $(this).html('Cut it out!') } )
// .mouseout(function() { $(this).html('Try it this time...') } )
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events: Mouse Handling</title>
<script src='jquery-3.2.1.min.js'></script>
<style>
#pad {
background:#def;
border :1px solid #aaa;
}
</style>
</head>
<body>
<canvas id='pad' width='480' height='320'></canvas>
<script>
canvas = $('#pad')[0]
context = canvas.getContext("2d")
pendown = false
$('#pad').mousemove(function(event)
{
var xpos = event.pageX - canvas.offsetLeft
var ypos = event.pageY - canvas.offsetTop
if (pendown) context.lineTo(xpos, ypos)
else context.moveTo(xpos, ypos)
context.stroke()
})
$('#pad').mousedown(function() { pendown = true } )
$('#pad') .mouseup(function() { pendown = false } )
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events: keypress</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<h2>Press some keys</h2>
<div id='result'></div>
<script>
$(document).keypress(function(event)
{
key = String.fromCharCode(event.which)
if (key >= 'a' && key <= 'z' ||
key >= 'A' && key <= 'Z' ||
key >= '0' && key <= '9')
{
$('#result').html('You pressed: ' + key)
event.preventDefault()
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events: click & dblclick</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<h2>Click and double click the buttons</h2>
<button class='myclass'>Button 1</button>
<button class='myclass'>Button 2</button>
<button class='myclass'>Button 3</button>
<button class='myclass'>Button 4</button>
<button class='myclass'>Button 5</button>
<script>
$('.myclass') .click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide() })
// Alternative using named functions instead
//
// $('.myclass').click(doslide)
// function doslide()
// {
// $(this).slideUp()
// }
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events: blur</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<h2>Click in and out of these fields</h2>
<input id='first'> <input> <input> <input>
<script>
$('#first').focus()
$('input').focus(function() { $(this).css('background', '#ff0') } )
$('input') .blur(function() { $(this).css('background', '#aaa') } )
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Events</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<button id='clickme'>Click Me</button>
<p id='result'>I am a paragraph</p>
<script>
$('#clickme').click(function()
{
$('#result').html('You clicked the button!')
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Second jQuery Example</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<blockquote>Powerful and flexible as JavaScript is, with a plethora of
built-in functions, it is still necessary to use additional code for
simple things that cannot be achieved natively or with CSS, such as
animations, event handling, and asynchronous communication.</blockquote>
<div id='advert'>This is an ad</div>
<p>This is my <span class='new'>new</span> website</p>
<script>
$('blockquote').css('background', 'lime')
$('#advert').css('border', '3px dashed red')
$('.new').css('text-decoration', 'underline')
$('blockquote, #advert, .new').css('font-weight', 'bold')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>First jQuery Example</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
The jQuery library uses either the <code>$()</code>
or <code>jQuery()</code> function names.
<script>
$('code').css('border', '1px solid #aaa')
</script>
</body>
</html>
// The smallest jQuery 'ready' code encapsulation function
// -- Make sure jQuery is loaded first
$(function()
{
// Your code goes here
})
<!DOCTYPE html>
<html> <!-- jqueryasyncget.htm -->
<head>
<title>jQuery Asynchronous Get</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body style='text-align:center'>
<h1>Loading a web page into a DIV</h1>
<div id='info'>This sentence will be replaced</div>
<script>
$.get('urlget.php?url=amazon.com/gp/aw', function(data)
{
$('#info').html(data)
} )
</script>
</body>
</html>
<!DOCTYPE html>
<html> <!-- jqueryasyncpost.htm -->
<head>
<title>jQuery Asynchronous Post</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body style='text-align:center'>
<h1>Loading a web page into a DIV</h1>
<div id='info'>This sentence will be replaced</div>
<script>
$.post('urlpost.php', { url : 'amazon.com/gp/aw' }, function(data)
{
$('#info').html(data)
} )
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Using each & map</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<div id='info'></div>
<script>
pets =
{
Scratchy : 'Guinea Pig',
Squeeky : 'Guinea Pig',
Fluffy : 'Rabbit',
Thumper : 'Rabbit',
Snoopy : 'Dog',
Tiddles : 'Cat'
}
guineapigs = []
$.each(pets, function(name, type)
{
if (type == 'Guinea Pig') guineapigs.push(name)
})
// Alternate version using $.map
//
// guineapigs = $.map(pets, function(type, name)
// {
// if (type == 'Guinea Pig') return name
// })
$('#info').html('The guinea pig names are: ' + guineapigs.join(' & '))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Using is</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<div><button>Button in a div</button></div>
<div><button>Button in a div</button></div>
<span><button>Button in a span</button></span>
<div><button>Button in a div</button></div>
<span><button>Button in a span</button></span>
<p id='info'></p>
<script>
$('button').click(function()
{
var elem = ''
if ($(this).parent().is('div')) elem = 'div'
else elem = 'span'
$('#info').html('You clicked a ' + elem)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Selection Traversal</title>
<script src='jquery-3.2.1.min.js'></script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id='new'>Item 3</li>
<li>Item 4
<ol type='a'>
<li>Item 4a</li>
<li>Item 4b</li>
</ol></li>
<li>Item 5</li>
</ul>
<script>
$('ul>li').first() .css('text-decoration', 'underline')
$('ul>li').last() .css('font-style', 'italic')
$('ul>li').eq(1) .css('font-weight', 'bold')
$('ul>li').filter(':even').css('background', 'cyan')
$('ul>li').not('#new') .css('color', 'blue')
$('ul>li').has('ol') .css('text-decoration', 'line-through')
//test = $('ul>li').eq(2)
//if ($(test).is('#new'))
// $(test).css('font-size', '120%')
</script>
</body>
</html>
<?php // urlpost.php
if (isset($_POST['url']))
{
echo file_get_contents("http://" . SanitizeString($_POST['url']));
}
function SanitizeString($var)
{
$var = strip_tags($var);
$var = htmlentities($var);
return stripslashes($var);
}
?>
<?php // urlget.php
if (isset($_GET['url']))
{
echo file_get_contents("http://".sanitizeString($_GET['url']));
}
function sanitizeString($var)
{
$var = strip_tags($var);
$var = htmlentities($var);
return stripslashes($var);
}
?>