jQuery (Basic - 1)

Ryuan Choi (@bunhere)
Feb 15, 2012

jQuery is new kind of Javacript library.

jQuery is a fast and concise JavaScript Library that simplifies


for rapid web development.

jQuery is designed to change the way that you write JavaScript.

Before starting - CSS Selector(1)

<!doctype html>
<head>
<style>
div { width:100px; font-size:1em; }
.tile { width:50px; height:50px; }
#red { background-color:red; }
</style>
</head>
<body>
<div>ryuan:</div>
<div class="tile">HELLO</div>
<div class="tile" id="red">WORLD</div>
</body>

Before starting - CSS Selector(2)

<!doctype html>
<head>
<style>
div { width:100px; font-size:1em; }
div:first-child { background-color:blue; }
.tile { width:50px; height:50px; }
#red { background-color:red; }
</style>
</head>
<body>
<div>ryuan:</div>
<div class="tile">HELLO</div>
<div class="tile" id="red">WORLD</div>
</body>
http://www.w3.org/TR/css3-selectors/#selectors

jQuery can find elements like CSS Selector.

<!doctype html>
<body>
<div>ryuan:</div>
<div class="tile">HELLO</div>
<div class="tile" id="red">WORLD</div>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("div").css('background-color','green');
$(".tile").css('background-color','blue');
$("#red").css('background-color','red');
</script>
</body>

JavaScript Event(1)

<!doctype html>
<head>
<style> div { width:100px; height:100px; font-size:1em; } </style>
<script>
function clicked() {
    document.all["result"].innerHTML = "clicked";
}
</script>
</head>
<body>
<div id="hello" onmousedown="clicked()">HELLO</div>
<div id="result"></div>
<script>
document.all["hello"].onmouseover = function() {
    document.all["result"].innerHTML = "mouse over";
}
</script></body>
But, this is not enough.

JavaScript Event(2) DOM level 2

<!doctype html>
<head>
<style> div { width:100px; height:100px; font-size:1em; } </style>
</head>
<body>
<div id="hello">HELLO</div>
<div id="result"></div>
<script>
document.all["hello"].addEventListener("mouseover", function() {
    document.all["result"].innerHTML = "mouse over";
}, false);
document.all["hello"].addEventListener("click", function() {
    document.all["result"].innerHTML = "clicked";
}, false);
</script></body>
This is not working on IE.

jQuery version of event handling

<!doctype html>
<head>
<style> div { width:100px; height:100px; font-size:1em; } </style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
    $("#hello").on("mouseover", function() {
            $("#result").text("mouse over");
        })
        .on("click", function() {
            $("#result").text("clicked");
        })
});
</script>
</head>
<body>
<div id="hello">hello</div>
<div id="result"></div>
</body>

jQuery - Animation 

<head><style>
div { position:absolute; width:100px; height:100px;
      background-color:#0fa0ef;}
#hello { background-color: #ef0fa0; text-align:center;}
.jsversion { display:none;}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
    $("#jquery").addClass("jsversion");
    $("#hello").on("click", function() {
        $(this).siblings("div").fadeIn(2000);
        });
});
</script></head>
<body>
<div id="hello">HELLO</div>
<div id="jquery">jQuery</div></body>