Tutorial jQuery 4 : Fungsi text(), val(), dan html()

Posted on October 30, 2017 by admin

Fungsi text(), val(), dan html() merupakan tiga fungsi yang berguna pada jQuery untuk melakukan modifikasi pada tulisan di elemen HTML. Fungsi text() Fungsi text() digunakan untuk mengganti tulisan yang berada di elemen html seperti di heading atau di paragraf. Contoh ketika tombol Replace ditekan, maka tulisan heading akan berubah. index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQuery Tutorial 6</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h2 class="dope">You'll learn how to replace me</h2>
	
	<input type="button" value="Replace" id="btn_main" />

	<input type="button" value="Change HTML" id="btn_new" />

	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/insert.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JQuery Tutorial 6</title>

</head>

<body>

<h2 class="dope">You'll learn how to replace me</h2>

</body>

</html>

insert.js

$("#btn_main").on("click", function(){
	$(".dope").text("This is new replacement text");
	$("#btn_main").val("Double Click me");
});

$("#btn_main").on("dblclick", function(){
	$(".dope").text("You'll learn how to replace me");
	$("#btn_main").val("Replace");
});

$("#btn_new").on("click", function(){
	$(".dope").html('<b class="cool"> Hey There This is HTML </b>');
});

$("#btn_main").on("click", function(){

$(".dope").text("This is new replacement text");

$("#btn_main").val("Double Click me");

});

$("#btn_main").on("dblclick", function(){

$(".dope").text("You'll learn how to replace me");

$("#btn_main").val("Replace");

});

$("#btn_new").on("click", function(){

$(".dope").html('<b class="cool"> Hey There This is HTML </b>');

});

style.css

.timestwo {
	font-size: 2em;
}

.colorful {
	color: pink;
}

.cool {
	font-size: 2em;
	color: green;
}

.timestwo {

font-size: 2em;

}

.colorful {

color: pink;

}

.cool {

font-size: 2em;

color: green;

}

Tutorial JQuery 3 : Events dan Effects

Posted on October 30, 2017 by admin

Secara umum, prinsip jQuery adalah menargetkan elemen HTML dan memodifikasi elemen tersebut. Event yaitu ketika user melakukan sesuatu dengan elemen html, effect adalah modifikasi yang dilakukan terhadap elemen tersebut. Contoh event : click, dblclick, mouseenter, mouseleave Contoh effects : show(), hide(), toggle(), slideDown(), slideUp(), fadeIn(), fadeOut(), fadeTo(), slideToggle(), fadeToggle(). Salah satu referensi lengkapnya ada di w3schools.com : Read more about Tutorial JQuery 3 : Events dan Effects[…]

Tutorial jQuery 2 : Menambahkan CSS Class

Posted on October 29, 2017 by admin

Pada sintaks jQuery juga dapat ditambahkan method addClass(), removeClass() dan toggleClass(). Langkah 1 : Menghubungkan file html dengan CSS Hubungkan file html dengan css menggunakan

<link rel="stylesheet" type="text/css" href="css/style.css">

1	<link rel="stylesheet" type="text/css" href="css/style.css">

<div>
	<p>Ini adalah sebuah paragraf</p>
	<p> Ini juga</p>
	<h4> Jangan lupa yang ini! </h4>
</div>

<div>

<p>Ini adalah sebuah paragraf</p>

<h4> Jangan lupa yang ini! </h4>

</div>

Buat folder css dan isikan dengan style.css, isinya adalah memberikan class colorful dan timestwo. Class colorful akan membuat tulisan menjadi berwarna pink , timestwo akan membuat tulisan besarnya dua kali lipat.

.timestwo {
	font-size: 2em;
}

.colorful {
	color: pink;
}

.timestwo {

font-size: 2em;

}

.colorful {

color: pink;

}

Tutorial jQuery 1 : jQuery Basic

Posted on October 27, 2017 by admin

JQuery merupakan library Javascript yang populer saat ini. Dengan jQuery, kita dapat melakukan hal yang sama dengan javascript namun dengan baris kode yang lebih sedikit sesuai dengan slogannya Write Less Do More, dan lebih mudah dipelajari. Mengapa menggunakan jQuery? Kita menggunakan jQuery beberapa alasannya adalah untuk mencari elemen di dalam dokumen HTML, mengganti HTML di Read more about Tutorial jQuery 1 : jQuery Basic[…]

indocoder.com

Tag: jquery tutorial

Tutorial jQuery 4 : Fungsi text(), val(), dan html()

Tutorial JQuery 3 : Events dan Effects

Tutorial jQuery 2 : Menambahkan CSS Class

Tutorial jQuery 1 : jQuery Basic