Trong thiết kế web, khi chúng ta cần thao tác lên các đối tượng trong html thì jquery đã cung cấp cho chúng ta một số hàm để thực hiện yêu cầu này.
Để lấy hay gán dữ liệu cho các đối tượng trong html chúng ta có thể sử dụng một số hàm đã được cung cấp sẵn như:
<h2>CHƯƠNG TRÌNH MINH HỌA</h2>
<p id="txt">Thầy <b>Xuyên</b> minh họa</p>
<p>Tên bạn: <input type="text" id="txtTen" value="xuyên"/></p>
<p>Trang web: <a href="http://abc.com" id="link">Đến trang web</a></p>
<button id="btnText">Hiển thị Text</button>
<button id="btnHtml">Hiển thị Html</button>
<button id="btnTen">Hiển thị Giá trị</button>
<button id="btnLink">Hiển thị Thuộc tính</button>
<script>
$(document).ready(function(){
$("#btnText").click(function(){
alert("Text là: " + $("#txt").text());
});
$("#btnHtml").click(function(){
alert("HTML là: " + $("#txt").html());
});
$("#btnTen").click(function(){
alert("Tên bạn là: " + $("#txtTen").val());
});
$("#btnLink").click(function(){
alert($("#link").attr("href"));
});
});
</script>
<h2>CHƯƠNG TRÌNH MINH HỌA</h2>
<p id="txt1">Thầy <b>Xuyên</b> minh họa</p>
<p id="txt2">Thầy <b>Xuyên</b> minh họa</p>
<p>Tên bạn: <input type="text" id="txtTen" value="xuyên"/></p>
<button id="btnText">Gán Text</button>
<button id="btnHtml">Gán Html</button>
<button id="btnTen">Gán Giá trị</button>
<script>
$(document).ready(function(){
$("#btnText").click(function(){
$("#txt1").text("Text: Trần Vĩnh Xuyên!");
});
$("#btnHtml").click(function(){
$("#txt2").html("Html: <b>Xuyên</b>");
});
$("#btnTen").click(function(){
$("#txtTen").val("Trần Vĩnh Xuyên");
});
});
</script>
<h2>CHƯƠNG TRÌNH MINH HỌA</h2>
<p id="txt">Thầy <b>Xuyên</b> minh họa</p>
<button id="btnText">Hàm Callback</button>
<script>
$(document).ready(function(){
$("#btnText").click(function(){
$("#txt").text(function(){
alert("Text: Trần Vĩnh Xuyên!");
});
});
});
</script>
Khi sử dụng jquery chúng ta có thể thao tác lên các định dạng css trong trang web. Bằng cách sử dụng một số hàm đã được cung cấp sẵn như:
<h1>MÔN HỌC THIẾT KẾ WEB</h1>
<h2>CHƯƠNG TRÌNH MINH HỌA</h2>
<p id="txt">Thầy <b>Xuyên</b> minh họa</p>
<div>Mời nhấn vào nút để xem kết quả.</div>
<button id="btnApdat">Áp đặt.</button>
<button id="btnHuy">Hủy đặt.</button>
<button id="btnToggle">Toggle cài đặt.</button>
<style>
.antuong {
font-weight: bold;
font-size: xx-large;
}
.mauchu {
color: blue;
}
</style>
<script>
$(document).ready(function(){
$("#btnApdat").click(function(){
$("h2, p").addClass("mauchu");
$("div").addClass("antuong");
$("h1").addClass("mauchu antuong");
});
$("#btnHuy").click(function(){
$("h2, p").removeClass("mauchu");
});
$("#btnToggle").click(function(){
$("h2, p").toggleClass("mauchu");
});
});
</script>
Là phương thức cho phép chúng ta lấy hay gán giá một hay nhiều thuộc tính định dạng cho các đối tượng trong web.
</script>
css("thuộc_tính");
</script>
Trong đó:
<h2>CHƯƠNG TRÌNH MINH HỌA</h2>
<p
style= "background-color: #ff0000">
Thầy Xuyên chào bạn</p>
<button id="btnHien">Hiển thị thuộc tính</button>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("p").css("background-color"));
$("h2").css({
"background-color": "yellow",
"font-size": "200%"});
});
});
</script>
Trích dẫn: (http://khonggiankythuat.com)
