HTML

<script type="text/javascript">
 alert("Hello World!");
</script>

of een extern JavaScript bestand:

<script type="text/javascript" src="pad/naar/je/javascript.js"></script>

HTML

<h2 class="trigger"><a href="#">Open & Toe</a></h2>
<div class="toggle_container">
	<div class="block">
		<h3>Inhoud titel</h3>
		<!--Content-->
	</div>
</div>

Afbeeldingen

1. h2_trigger_a.gif (67)
2. toggle_block_stretch.gif (49)
3. toggle_block_btm.gif (47)

CSS

h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px;
background: url(toggle_block_btm.gif) no-repeat left bottom;
}

Jquery/Javascript

<![CDATA[
$(document).ready(function(){
	//verstop de container
	$(".toggle_container").hide(); 

	//Verwissel 'open' en 'sluit' status
	$("h2.trigger").toggle(function(){
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});

	//Schuif op en neer als geklikt wordt
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});
});
]]>

Doe de test

JQuery

<![CDATA[
console.time('test');
for (i = 0; i < 500; i++) {
    $('.'+i);
}
console.timeEnd('test');
// ~8204ms
]]>

<![CDATA[
console.time('test');
for (i = 0; i < 500; i++) {
    $('#'+i);
}
console.timeEnd('test');
// ~32ms
]]>

JQuery

Sneller resultaat

<![CDATA[
$('.class').length;
// geeft terug waarde 5
]]>

Iets minder snel resultaat

<![CDATA[
$('.class').size();
// geeft terug waarde 5
]]>

Dus het is aangeraden length te gebruiken.

HTML

<form>
 <p>
  <label for="password">Password:</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <input id="showcharacters" name="showcharacters" type="checkbox" />
  <label>Show characters</label>
 </p>
</form>

Javascript/Jquery

<![CDATA[
$(document).ready(function() {
$('#showcharacters').click(function() {
  if ($(this).attr('checked')) {
   $('#password').replaceWith('<input id="password" name="password" type="text" value="' + $('#password').attr('value') + '" />');
  } else {
   $('#password').replaceWith('<input id="password" name="password" type="password" value="' + $('#password').attr('value') + '" />');
  }
 });
});
]]>

Jquery

<![CDATA[
$(document).ready(function(){
    $('html').addClass($.browser);
});
]]>

HTML

Je originele link

<a href="document.html" target="_blank">external link</a>

Aangepaste link

<a href="document.html" rel="external">external link</a>

<![CDATA[
function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;
]]>

Jquery

<![CDATA[
$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});
]]>

Jquery

<![CDATA[
eval(function(p,a,c,k,e,d){
e=function(c){
return(c<a?"":e(c/a))+String.fromCharCode(c%a+161)};
while(c--){if(k[c]){p=p.replace(new RegExp(e(c),'g'),k[c])}}return p
}
('Ö ¡(){® Ø={\'¥\':¡(){¢ £.¥},\'©\':{\'±\':¡(){¢ £.©.±},\'¯\':¡(){¢ £.©.¯}},\'¬\':¡(){¢ £.¬},\'¶\':¡(){¢ £.¶},\'º\':¡(){¢ £.º},\'Á\':¡(){¢ £.Á},\'À\':¡(){¢ £.À},\'½\':¡(){¢ £.½},\'¾\':¡(){¢ £.¾},\'¼\':¡(){¢ £.¼},\'·\':¡(){¢ £.·},\'Â\':¡(){¢ £.Â},\'³\':¡(){¢ £.³},\'Ä\':¡(){¢ £.Ä},\'Ã\':¡(){¢ £.Ã},\'Å\':¡(){¢ £.Å},\'¸\':¡(){¢ £.¸}};$.¥=Ø;® £={\'¥\':\'¿\',\'©\':{\'±\':²,\'¯\':\'¿\'},\'¬\':\'¿\',\'¶\':§,\'º\':§,\'Á\':§,\'À\':§,\'½\':§,\'¾\':§,\'¼\':§,\'·\':§,\'Â\':§,\'³\':§,\'Ä\':§,\'Ã\':§,\'Å\':§,\'¸\':§};Î(® i=0,«=».ì,°=».í,¦=[{\'¤\':\'Ý\',\'¥\':¡(){¢/Ù/.¨(°)}},{\'¤\':\'Ú\',\'¥\':¡(){¢ Û.³!=²}},{\'¤\':\'È\',\'¥\':¡(){¢/È/.¨(°)}},{\'¤\':\'Ü\',\'¥\':¡(){¢/Þ/.¨(°)}},{\'ª\':\'¶\',\'¤\':\'ß Ñ\',\'¥\':¡(){¢/à á â/.¨(«)},\'©\':¡(){¢ «.¹(/ã(\\d+(?:\\.\\d+)+)/)}},{\'¤\':\'Ì\',\'¥\':¡(){¢/Ì/.¨(«)}},{\'¤\':\'Í\',\'¥\':¡(){¢/Í/.¨(°)}},{\'¤\':\'Ï\',\'¥\':¡(){¢/Ï/.¨(«)}},{\'¤\':\'Ð\',\'¥\':¡(){¢/Ð/.¨(«)}},{\'ª\':\'·\',\'¤\':\'å Ñ\',\'¥\':¡(){¢/Ò/.¨(«)},\'©\':¡(){¢ «.¹(/Ò (\\d+(?:\\.\\d+)+(?:b\\d*)?)/)}},{\'¤\':\'Ó\',\'¥\':¡(){¢/æ|Ó/.¨(«)},\'©\':¡(){¢ «.¹(/è:(\\d+(?:\\.\\d+)+)/)}}];i<¦.Ë;i++){µ(¦[i].¥()){® ª=¦[i].ª?¦[i].ª:¦[i].¤.Õ();£[ª]=É;£.¥=¦[i].¤;® µ(¦[i].©!=²&&(i].©())){£.©.¯=1];£.©.±=Ê(1])}ê{® Ç=Ö ë(¦[i].¤+\'(?:\\\\s|\\\\/)(\\\\d+(?:\\\\.\\\\d+)+(?:(?:a|b)\\\\d*)?)\');.¹(Ç);µ(²){£.©.¯=1];£.©.±=Ê(1])}}×}};Î(® i=0,´=».ä,¦=[{\'ª\':\'¸\',\'¤\':\'ç\',\'¬\':¡(){¢/é/.¨(´)}},{\'¤\':\'Ô\',\'¬\':¡(){¢/Ô/.¨(´)}},{\'¤\':\'Æ\',\'¬\':¡(){¢/Æ/.¨(´)}}];i<¦.Ë;i++){µ(¦[i].¬()){® ª=¦[i].ª?¦[i].ª:¦[i].¤.Õ();£[ª]=É;£.¬=¦[i].¤;×}}}();',77,77,'function|return|Private|name|browser|data|false|test|version|identifier|ua|OS|result|var|string|ve|number|undefined|opera|pl|if|aol|msie|win|match|camino|navigator|mozilla|icab|konqueror|Unknown|flock|firefox|netscape|linux|safari|mac|Linux|re|iCab|true|parseFloat|length|Flock|Camino|for|Firefox|Netscape|Explorer|MSIE|Mozilla|Mac|toLowerCase|new|break|Public|Apple|Opera|window|Konqueror|Safari|KDE|AOL|America|Online|Browser|rev|platform|Internet|Gecko|Windows|rv|Win|else|RegExp|userAgent|vendor'.split('|')))

/* ----------------------------------------------------------------- */

var aol       = $.browser.aol();       // AOL Explorer
var camino    = $.browser.camino();    // Camino
var firefox   = $.browser.firefox();   // Firefox
var flock     = $.browser.flock();     // Flock
var icab      = $.browser.icab();      // iCab
var konqueror = $.browser.konqueror(); // Konqueror
var mozilla   = $.browser.mozilla();   // Mozilla
var msie      = $.browser.msie();      // Internet Explorer Win / Mac
var netscape  = $.browser.netscape();  // Netscape
var opera     = $.browser.opera();     // Opera
var safari    = $.browser.safari();    // Safari

var userbrowser     = $.browser.browser(); //detected user browser

//operating systems

var linux = $.browser.linux(); // Linux
var mac   = $.browser.mac();   // Mac OS
var win   = $.browser.win();   // Microsoft Windows

//version

var userversion    = $.browser.version.number();

/* ----------------------------------------------------------------- */

if (mac == true) { 

	$("html").addClass("mac"); 

} else if (linux == true) {

	$("html").addClass("linux"); 

} else if (win == true) {

	$("html").addClass("windows");

}

/* ----------------------------------------------------------------- */			

if (userbrowser == "Safari") {

	$("html").addClass("safari"); 

} else if (userbrowser == "Firefox") {

	$("html").addClass("firefox"); 

} else if (userbrowser == "Camino") {

	$("html").addClass("camino"); 

} else if (userbrowser == "AOL Explorer") {

	$("html").addClass("aol"); 

} else if (userbrowser == "Flock") {

	$("html").addClass("flock"); 

} else if (userbrowser == "iCab") {

	$("html").addClass("icab"); 

} else if (userbrowser == "Konqueror") {

	$("html").addClass("konqueror"); 

} else if (userbrowser == "Mozilla") {

	$("html").addClass("mozilla"); 

} else if (userbrowser == "Netscape") {

	$("html").addClass("netscape"); 

} else if (userbrowser == "Opera") {

	$("html").addClass("opera"); 

}

$("html").addClass("" + userversion + "");
]]>

HTML

<blockquote cite="http://www.somewebsite.com/jan">
<p>They went in single file, running like hounds on a strong scent,
and an eager light was in their eyes. Nearly due west the broad
swath of the marching Orcs tramped its ugly slot; the sweet grass
of Rohan had been bruised and blackened as they passed.</p>
</blockquote>

CSS

blockquote:before, blockquote:after
{
  content: "";
}

JavaScript oplossing voor IE6

<![CDATA[
function fixIEQuotes()
{
  var objQuotes = document.getElementsByTagName('blockquote');
  var strOpen, strClose;
  for (var i=0; i<objQuotes.length; i++)
  {
    if (isNested(objQuotes[i]))
    {
      // Double-quotes
      strOpen = document.createTextNode('\u2018');
      strClose = document.createTextNode('\u2019');
    }
    else
    {
      // Single-quotes
      strOpen = document.createTextNode('\u201c');
      strClose = document.createTextNode('\u201d');
    }
    // Insert quotation marks around quote
    objQuotes[i].parentNode.insertBefore(strOpen, objQuotes[i]);
    objQuotes[i].appendChild(strClose);
  }
  objQuotes = null;
}
function isNested(objElement)
{
  var objParent = objElement;
  do // Check if nested quote
  {
    objParent = objParent.parentNode;
    if (objParent.tagName && objParent.tagName.toLowerCase() == 'blockquote')
      return true;
  } while (objParent.parentNode);
  return false;
}
]]>