Tutorial jQuery 7 : Selection dan Modifikasi Atribut

Posted on November 2, 2017 by admin

Tutorial selanjutnya adalah melakukan modifikasi atribut. Method yang akan kita bahas di tutorial ini adalah attr(), add(), remove() dan event mouseover dan mouseleave. index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Selection and Attribute Modification</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h1 id="title">Instruction for Changing Tire</h1>

	<img src="img/contohstempel.png" alt="" id="the_img" width="20%" height="20%" />
	<h3>How to Change Tire</h3>

	<p>We'll go over the steps for changing a tire </p>

	<p class="instruct_title">Incase of flat tire.</p>

	<ul id="steps">
		<li class="important">Park Vehicle Safety</li>
		<li>Retrieve Jack and attach to vehicle frame</li>
		<li>Untighten tire bolts</li>
		<li class="important">Raise vehicle by cranking jack</li>
		<li>Unscrew bolts and attach replacement tire</li>
		<li class="important">Tighten the bolts</li>
		<li>Lower vehicle and tighten bolts completely</li>
	</ul>

	<div id="closing_statement">
		<p>Make sure to put away the tools</p>
	</div>

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

<!DOCTYPE html>

<head>

<title>Selection and Attribute Modification</title>

</head>

<body>

<h1 id="title">Instruction for Changing Tire</h1>

<h3>How to Change Tire</h3>

<p>We'll go over the steps for changing a tire </p>

<p class="instruct_title">Incase of flat tire.</p>

<li class="important">Park Vehicle Safety</li>

<li>Retrieve Jack and attach to vehicle frame</li>

<li>Untighten tire bolts</li>

<li class="important">Raise vehicle by cranking jack</li>

<li>Unscrew bolts and attach replacement tire</li>

<li class="important">Tighten the bolts</li>

<li>Lower vehicle and tighten bolts completely</li>

</ul>

<p>Make sure to put away the tools</p>

</div>

</body>

</html>

jquery_custom_code.js

$(document).ready(function(){
	// $("p.instruct_title, div#closing_statement, h3").css("color", "red");
	$("p.instruct_title").add("div#closing_statement").add("h3").css("color", "red");

	$("li.important").on("mouseover", function(){
		$(this).attr("id", "big");
		$(this).on("mouseleave", function(){
			$(this).attr("id", "small");
		});
	});

	$("h1#title").on("click", function(){
		$(this).attr("class", "pretty border");
	});

	$("img#the_img").on("click", function(){
		// $(this).attr("width", "40%");
		// $(this).attr("length", "40%");
		// $(this).attr("width", "40%").attr("length", "40%");
		$(this).attr({
			"width" : "40%",
			"length" : "40%"
		});
	});

	$("img#the_img").on("dblclick", function(){
		// $(this).removeAttr("src");
		$(this).remove();
	});


});

$(document).ready(function(){

// $("p.instruct_title, div#closing_statement, h3").css("color", "red");

$("p.instruct_title").add("div#closing_statement").add("h3").css("color", "red");

$("li.important").on("mouseover", function(){

$(this).attr("id", "big");

$(this).on("mouseleave", function(){

$(this).attr("id", "small");

});

$("h1#title").on("click", function(){

$(this).attr("class", "pretty border");

});

$("img#the_img").on("click", function(){

// $(this).attr("width", "40%");

// $(this).attr("length", "40%");

// $(this).attr("width", "40%").attr("length", "40%");

$(this).attr({

"width" : "40%",

"length" : "40%"

});

$("img#the_img").on("dblclick", function(){

// $(this).removeAttr("src");

$(this).remove();

});

style.css

#big {
	font-size: 2em;
	font-weight: bold;
}

#small {
	font-size: 1em;
}
.pretty {
	color: pink;
	font-style: italic;
}

.border {
	border-style: dashed;
	border-color: yellow: 
}

#big {

font-size: 2em;

font-weight: bold;

}

#small {

font-size: 1em;

}

.pretty {

color: pink;

font-style: italic;

}

.border {

border-style: dashed;

border-color: yellow:

}

Result Mari kita bahas satu-satu arti dari kode yang ada di jquery_custom_code.js

$("p.instruct_title, div#closing_statement, h3").css("color", "red");

1	$("p.instruct_title, div#closing_statement, h3").css("color", "red");

Untuk setiap paragraf yang mempunyai class ‘instruct_title’, untuk setiap div yang mempunyai id ‘closing_statement, dan h3, beri warna merah. Read more about Tutorial jQuery 7 : Selection dan Modifikasi Atribut[…]

Tutorial jQuery 6 : Keyword This dan Inline Styling

Posted on November 1, 2017 by admin

Di dalam jQuery kita dapat menambahkan CSS secara inline, maksudnya secara langsung di kode jQuerynya. Bisa dalam bentuk single key-value pair, atau dalam bentuk objek. Keyword this di dalam javascript dan jquery merupakan keyword yang sangat banyak dipakai. Keyword ini digunakan untuk menentukan elemen mana yang berinteraksi dengan user, dengan referensi ke elemen yang menjadi target sebelumnya. Read more about Tutorial jQuery 6 : Keyword This dan Inline Styling[…]

Tutorial jQuery 5 : Form Events & Variables

Posted on October 31, 2017October 31, 2017 by admin

Pada tutorial ini, kita akan membuat form html yang berisi input-input. Ketika user menginputkan nilai ke dalam text field, maka nilai text field tersebut akan ditampilkan ke layar melalui method alert. Di form yang kedua, kita akan membuat ketika nilai zip code dimasukkan, maka otomatis akan muncul state dan city nya di text field yang Read more about Tutorial jQuery 5 : Form Events & Variables[…]

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[…]

indocoder.com

Category: Tutorial jQuery

Tutorial jQuery 7 : Selection dan Modifikasi Atribut

Tutorial jQuery 6 : Keyword This dan Inline Styling

Tutorial jQuery 5 : Form Events & Variables

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

Tutorial JQuery 3 : Events dan Effects