modifikasi attribut Archives

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

indocoder.com

Tag: modifikasi attribut

Tutorial jQuery 7 : Selection dan Modifikasi Atribut