Mình sẽ hướng dẫn các bạn sử dụng jQuery để đổi tên một thành phần HTML bằng jQuery. Đây cũng là một bài thực hành cơ bản khi các bạn nhập môn Javascript.
Mình sẽ có một file HMTL có 4 nút, mình sẽ đổi tên nút “box2” thành “BIGBOX”.
Các bạn có thể thực hành trên jsFiddle
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Đổi tên nút sử dụng jQuery</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#box2").hover( function(){
$(this).stop().html("BIGBOX");
}, function() {
$(this).stop().html("box2");
});
</script>
<style>
#boxes{
width: 200px;
height: 350px;
}
#box1{
width: 40px;
height: 35px;
background-color: red;
}
#box2{
width: 40px;
height: 35px;
background-color: yellow;
}
#box3{
width: 40px;
height: 35px;
background-color: blue;
}
#box4{
width: 60px;
height: 35px;
padding: 5px 10px 5px 10px;
background-color: green;
}
.childbox{
background-color: yellow;
padding: 2px;
}
</style>
<div id=boxes>
<div id=box1>box1</div>
<div id=box2>box2</div>
<div id=box3>box3</div>
<div id=box4><span class="childbox">Child of Box4</span></div>
</div>
</body>
</html>Đoạn query bên dưới sẽ điều khiển việc đổi tên phần tử có id là box2. Phương thức .hover() sẽ chỉ định 2 hàm để chạy khi con trỏ chuột di chuột đi qua phần tử box2. Phương thức này kích hoạt 2 sự kiện là mouseenter và mouseleave.
Phương thức .html() giúp thay đổi nội dung bên trong box2 từ “box2” thành “BIGBOX”. Phương thức .css() giúp thêm css vào phần tử box2. Còn phương thức stop() giúp các hiệu ứng khi di chuyển không bị chồng chất, tức là khi bạn để nhiều nút gần nhau, khi đưa chuột nhanh sẽ có cảm giác giật lag.
Quảng cáo
$("#box2").hover( function(){
$(this).stop().html("BIGBOX").css("width","70px");
}, function() {
$(this).stop().html("box2").css("width","40px");
});
