J Query

jQuery
jQuery
Apa itu jQuery ?

 jQuery adalah Library atau perpustakaan
Javascript.
 jQuery berfungsi menyederhanakan pemrograman
javascript.
 jQuery ringan artinya penulisan coding simple
tetapi berbuat lebih banyak dibanding javascript.
jQuery
Jquery Library :
 HTML/DOM* manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 API Function
 Mobile Function
* DOM = Document Object Manipulation

** API = Application Programming Interface
jQuery
Install Jquery :
 Download jQuery Library => www.jquery.com
 Tempatkan jQuery pada web anda pada section
<head>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
jQuery
Jquery Syntax :
$(document).ready(function(){
// jQuery method ketik disini...
});
atau
$(function(){
// jQuery method ketik disini...
});
jQuery
Example :
….
<head>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Click untuk sembunyi</p>
<p>Click juga untuk sembunyi</p>
</body>
jQuery
Jquery Selectors :
Berfungsi untuk memanipulasi element-
element HTML
1. Element Selector
2. Id Selector
3. Class Selector
4. CSS Selector
5. Atribut Selector
jQuery
1. Elemen Selectors
Berfungsi untuk memanipulasi tag-tag HTML
<!DOCTYPE html> <body>

<html> <h2>Heading</h2>
<head> <p>Paragraph 1.</p>
<script src="jquery-1.10.2.min.js"></script> <p>Paragraph 2.</p>
<script> <button>Click</button>
$(document).ready(function(){ </body>
$("button").click(function(){ </html>
$(“p").hide(1000);
}); Try:
}); Ganti P menjadi h2
</script> Ganti h2 menjadi P, h2
</head> Ganti P, h2 menjadi *
jQuery
2. ID Selectors
Berfungsi untuk memanipulasi DIV ID pada
HTML
<script src="jquery-1.10.2.min.js"></script> <p id=“test”>
<script> Paragraph 2.
$(document).ready(function(){ </p>
$("button").click(function(){ <button>Click</button>
$("#test").hide(1000); </body>
}); </html>
});
</script
</head>
jQuery
3. Class Selectors
Berfungsi untuk memanipulasi Class ID pada
HTML
<script src="jquery-1.10.2.min.js"></script> <p class=“test”>
<script> Paragraph 2.
$(document).ready(function(){ </p>
$("button").click(function(){ <button>Click</button>
$(“.test").hide(1000); </body>
}); </html>
});
</script>
</head>
jQuery
4. CSS Selectors
Berfungsi untuk memanipulasi CSS style

<html> <h1>Welcome</h1>
<head> <table border="1">
<script src="jquery-1.10.2.min.js"></script> <tr>
<script> <th>Nama</th>
$(document).ready(function(){ <th>Kota</th>
$("tr:odd").css("background- </tr>
color","yellow"); ……..
}); ……..
</script> </table>
</head> </body>
</html>
jQuery
5. Atribut Selectors
Berfungsi untuk memanipulasi CSS style

<html> Nama: <input type="text“ name="nama">
<head> <br>
Email: <input type="text" name="email">
<script> </body>
$(document).ready(function(){ </html>
$("input[name=‘nama']").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
jQuery
Jquery Effects :
1. Hide/Show
2. Fade
3. Slide
4. Animate
5. Stop
jQuery
1. Hide/Show :
<html> <p>Klik Button.</p>
<head> <button id="hide">
<script src="jquery-1.10.2.min.js"></script> Hide
<script> </button>
$(document).ready(function(){ <button id="show">
$("#hide").click(function(){
$("p").hide(1000);
Show
}); </button>
$("#show").click(function(){ </body>
$("p").show(1000); </html>
});
});
</script>
</head>
jQuery
1. Hide/Show (Lanjutan):
<div id="menu1">Menu 1</div>
<html> <div class="submenu1">Sub Menu 1.1</div>
<head> <div class="submenu1">Sub Menu 1.2</div>
<script src="jquery-1.10.2.min.js"></script> <div id="menu2">Menu 2</div>

<script> <div class="submenu2">Sub Menu 2.1</div>
<div class="submenu2">Sub Menu 2.2</div>
$(document).ready(function(){ <div class="submenu2">Sub Menu 2.3</div>
$(".submenu1").hide(); </body>
$(".submenu2").hide(); </html>
$("#menu1").click(function(){
$(".submenu1").toggle("slow");
});
$("#menu2").click(function(){
$(".submenu2").toggle("slow");
});
});
</script>
</head>
jQuery
2. Fade (fadeIn, fadeOut, fadeToggle):
<button>FadeIn</button>
<html> <br><br>
<head> <div id="div1" style="width:80px;
<script src="jquery-1.10.2.min.js"></script> height: 80px; display:none; background-
<script> color:red;">
$(document).ready(function(){ </div>
<br>
$("button").click(function(){
<div id="div2" style="width:80px;
$("#div1").fadeIn(); height:80px; display:none; background-
$("#div2").fadeIn("slow"); color:green;">
$("#div3").fadeIn(3000); </div>
}); <br>
}); <div id="div3" style="width:80px;
</script> height:80px;display:none; background-
color:blue;">
</head> </div>
</body>
</html>
jQuery
<button>FadeOut</button>
<html> <br><br>
<script src="jquery-1.10.2.min.js"></script> height:80px;
<script> background-color:red;">
$(document).ready(function(){ </div><br>
height:80px;
$("#div1").fadeOut(); background-color:green;">
$("#div2").fadeOut("slow"); </div><br>
$("#div3").fadeOut(3000); <div id="div3" style="width:80px;
}); height:80px;
}); background-color:blue;">
</script> </div>
</head> </body>
</html>
jQuery
<button>FadeToggle</button>
<html> <br><br>
<script src="jquery-1.10.2.min.js"></script> height:80px;
<script> background-color:red;">
$(document).ready(function(){ </div><br>
height:80px;
$("#div1").fadeToggle(); background-color:green;">
$("#div2").fadeToggle("slow"); </div><br>
$("#div3").fadeToggle(3000); <div id="div3" style="width:80px;
}); height:80px;
}); background-color:blue;">
</script> </div>
</head> </body>
</html>
jQuery
3. Slide (Down, Up, SlideToogle):
<div id="flip">Slide Down</div>
<html> <div id="panel">Welcome</div>
<head> </body>
</html>
<script>
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip{ padding:5px; text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;}
#panel{ padding:50px;display:none; }
</style>
</head>
jQuery
<div id="flip">Slide Up</div>
<head> </body>
</html>
<script>
$("#panel").slideUp("slow");
});
});
</script>
#panel{ padding:50px; }
</style>
</head>
jQuery
<div id="flip">Slide Toggle</div>
<head> </body>
</html>
<script>
$("#panel").slideToggle("slow");
});
});
</script>
#panel{ padding:50px;display:none; }
</style>
</head>
jQuery
4. Animate:
<button>Start Animation</button>
<html> <div style="background:#98bf21;
<head> height:100px;width:100px;
<script src="jquery-1.10.2.min.js"></script> position:absolute;">
<script> </body>
$(document).ready(function(){ </html>
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
jQuery
5. Stop
<!DOCTYPE html> <style type="text/css">
<html> #panel,#flip{
padding:5px; text-align:center;
<head> background-color:#e5eecc;
<script> #panel{ padding:50px;display:none;}
$(document).ready(function(){ </style>
$("#flip").click(function(){ </head>
$("#panel").slideToggle(4000); <body>
}); <button id="stop">Stop </button>
$("#stop").click(function(){ <div id="flip">Click to slide </div>
$("#panel").stop(); <div id="panel">Welcome</div>
}); </body>
}); </html>
</script>

J Query

Uploaded by

Copyright:

Available Formats

J Query

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

J Query

Uploaded by

Copyright:

Available Formats

jQuery

Apa itu jQuery ?

* DOM = Document Object Manipulation

<!DOCTYPE html> <body>

<!DOCTYPE html> <body>

<!DOCTYPE html> <body>

<script src="jquery-1.10.2.min.js"></script> <div id="menu2">Menu 2</div>

You might also like