Javascript session june 2013 (iii) jquery json

Jquery & JSON
● Jquery Simplifies javascript writing
● 10-20 lines of javascript code can be converted to 1 line of jquery
$(‘#myPanel’).find(‘TABLE.firstCol’).removeClass(‘firstCol’).css(
‘background’, ‘red’).append(‘<SPAN>red cell</SPAN>’);
● Cross-browser compatible
● Selectors CSS based
● Components, Animations & Ajax
● $=jQuery=window.jQuery=window.$
● $(selector) function( ) $(selector).function(…) e.g. $(‘button’).show()
● $.function(…) e.g. $.each(…), $.ajax(…)
● $(document).ready(function(){// insert jQuery code here…});
document ready is faster then window.onload.
● var el = $(“<div/>”) creates HTML elements on the fly
● GET >> ACT $(“<span/>”).appendTo(“body”) or $(“div”).hide()
● Jquery Selectors (ref jquery portal)

Example: Modifying DOM appearance
<!DOCTYPE html><html><head>
<script src="jquery.min.js"></script>
<style>
.nice {background-color: orange; color: white;}
</style></head><body>
<div id="clickme" onclick="toggle()">Click me!</div>
<script>
function toggle() {
var els = $("#clickme");
if (!els.hasClass('nice'))
els.addClass('nice');
else
els.removeClass('nice');
}
</script>

Example: Creating new nodes
</head><body>
<div id="mydiv" onclick="addstuff()">Add stuff</div>
<script>
function addstuff() {
for (var i = 0; i < 10; i++) {
$('#mydiv').append('<div class="kid">'+i+'</div>');
}
}
</script>

Example: Removing nodes
</head><body>
<div id="mydiv" onclick="setInterval(addstuff,1000);">Add stuff</div>
<script>
function addstuff() {
var kids = $(".kid"); // this creates a "wrapped set" around all nodes with class=kid
if (!kids.length) {
for (var i = 0; i < 10; i++)
$('#mydiv').append('<div class="kid">'+i+'</div>');
} else {
kids.remove();
}
}
</script>

Example: Manipulating event handlers
<style>
.nice {background-color: orange; color: white;}
</style></head><body>
<div id="clickme">Click me!</div>
<script>
function toggle() {
var els = $("#clickme");
if (!els.hasClass('nice'))
els.addClass('nice');
else
els.removeClass('nice');
}
$("#clickme").click(toggle);
</script>

Assignment Microprocessor Simulator Design:

Javascript session june 2013 (iii) jquery json

More Related Content

What's hot

Viewers also liked

Similar to Javascript session june 2013 (iii) jquery json

Recently uploaded

Javascript session june 2013 (iii) jquery json