Basic Javascript to JQuery examples
May 09 2010
Most of my experience with scripting has been with straight javascript. For a variety of reasons, I've been looking at some other tools, including jQuery. Below is a list of basic functions that I've used in javascript and the corresponding jQuery syntax to help you get started.
|
Retrieve element |
js: document.getElementById('orderId').value jQuery: $('#orderId').val() |
|
CheckBox Checked |
js: document.getElementById('myCheckbox').value = true jQuery: $('#myCheckbox').attr('checked', true); |
|
CheckBox not Checked |
js: document.getElementById('myCheckbox').value = false jQuery: $('#myCheckbox').attr('checked', false); |
|
Disable element |
js: document.getElementById('orderId').disabled = true jQuery: $('#orderId').attr(“disabled”, true) |
|
Hide element |
js: document.getElementById('orderId').display = 'none' jQuery: $('#orderId').hide() |
|
Display element |
js: document.getElementById('orderId').display = 'block' jQuery: $('#orderId').show() |
|
Check element exists |
js: document.getElementById('orderId').value != null jQuery: $('#orderId').length != 0 |
|
Change Color |
js: document.getElementById('orderId').style.color = 'yellow' jQuery: $('#orderId').css('color', “yellow”) |
|
OnClick (or OnChange) |
js: <a href="alertLink" id="alertLink" onclick="alertFunction();">Alert</a>
<script type="text/javascript"> function alertFunction() { alert("Hi There"); } </script>
jQuery: <a href="alertLink" id="alertLink">Alert</a>
<script type="text/javascript"> $(document).ready(function() { $("alertLink").click(function() { alert("Hi There"); }); }); </script> |