Scribd
Upload
33 views

J Query

Uploaded by

FATIMAH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

J Query

Uploaded by

FATIMAH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

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 src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("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
<!DOCTYPE html> <body>
<html> <h2>Heading</h2>
<head> <p>Paragraph 1.</p>
<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
<!DOCTYPE html> <body>
<html> <h2>Heading</h2>
<head> <p>Paragraph 1.</p>
<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

<!DOCTYPE html> <body>


<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

<!DOCTYPE html> <body>


<html> Nama: <input type="text“ name="nama">
<head> <br>
Email: <input type="text" name="email">
<script src="jquery-1.10.2.min.js"></script>
<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 :
<!DOCTYPE html> <body>
<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):
<!DOCTYPE html> <body>
<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):
<!DOCTYPE html> <body>
<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
2. Fade (fadeIn, fadeOut, fadeToggle):
<!DOCTYPE html> <body>
<button>FadeOut</button>
<html> <br><br>
<head> <div id="div1" style="width:80px;
<script src="jquery-1.10.2.min.js"></script> height:80px;
<script> background-color:red;">
$(document).ready(function(){ </div><br>
<div id="div2" style="width:80px;
$("button").click(function(){
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
2. Fade (fadeIn, fadeOut, fadeToggle):
<!DOCTYPE html> <body>
<button>FadeToggle</button>
<html> <br><br>
<head> <div id="div1" style="width:80px;
<script src="jquery-1.10.2.min.js"></script> height:80px;
<script> background-color:red;">
$(document).ready(function(){ </div><br>
<div id="div2" style="width:80px;
$("button").click(function(){
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):
<!DOCTYPE html> <body>
<div id="flip">Slide Down</div>
<html> <div id="panel">Welcome</div>
<head> </body>
<script src="jquery-1.10.2.min.js"></script>
</html>
<script>
$(document).ready(function(){
$("#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
3. Slide (Down, Up, SlideToogle):
<!DOCTYPE html> <body>
<div id="flip">Slide Up</div>
<html> <div id="panel">Welcome</div>
<head> </body>
<script src="jquery-1.10.2.min.js"></script>
</html>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip{ padding:5px; text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;}
#panel{ padding:50px; }
</style>
</head>
jQuery
3. Slide (Down, Up, SlideToogle):
<!DOCTYPE html> <body>
<div id="flip">Slide Toggle</div>
<html> <div id="panel">Welcome</div>
<head> </body>
<script src="jquery-1.10.2.min.js"></script>
</html>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("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
4. Animate:
<!DOCTYPE html> <body>
<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>
$("button").click(function(){
$("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 src="jquery-1.10.2.min.js"></script>
border:solid 1px #c3c3c3;}
<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>

You might also like