Jquery cơ bản-HTML và CSS

Tiếp tục loạt bài về Jquery cơ bản, hôm nay mình sẽ cùng các bạn tìm hiểu qua một chút về các phương thức để thao tác với HTML và CSS trong Jquery. Những phương thức giúp bạn thao tác với các phần tử HTML và CSS chính là điểm mạnh của Jquery.
1. HTML trong Jquery.
Jquery cung cấp một loạt các phương thức giúp bạn dễ dàng thao tác với các phần tử HTML thậm chí bạn còn có thể thay đổi giá trị các thuộc tính của phần tử. Chính điều này tạo nên sự linh hoạt trong Jquery. Chúng ta sẽ cùng tìm hiểu một số phương thức cơ bản:
addClass(): thêm một hoặc nhiều class vào phần tử HTML được chọn.
after(): chèn thêm nội dung vào đằng sau phần tử được chọn. Nó có thể là text hoặc code html thuần.
append(): thêm nội dung vào phần tử được chọn nhưng vẫn nằm trong phần tử đó.
appendTo(): phương thức này giống với append() nhưng vị trị phần tử được chọn và nội dung được đổi chỗ cho nhau.
attr(): thiết lập hoặc trả về thuộc tính của phần tử được chọn.
before(): chèn thêm nội dung vào đằng trước phần tử được chọn.
html(): trả về nội dung của phần tử được chọn.
remove(): xóa phần tử được chọn.
removeAttr(): xóa thuộc tính của phần tử được chọn.
removeClass(): xóa 1 hoặc nhiều class của phần tử được chọn.
Còn rất nhiều các phương thức khác bạn có thể xem thêm ở đây:Phương thức cho HTML trong Jquery.
2. CSS trong Jquery.
Cũng giống như các phương thức cho HTML trong Jquery, các phương thức cho CSS cũng làm cho việc xử lí style cho các phần tử HTML trở nên linh hoạt và mạnh mẽ hơn. Chúng ta sẽ cùng lướt qua một số phương thức cơ bản.
addClass(): phương thức này vừa là phương thức cho HTML cũng vừa là cho CSS.
css(): thiết lập hoặc trả về các thuộc tính trong style hoặc class của phần tử được chọn. Đây là phương thức quan trọng nhất trong các phương thức cho CSS của Jquery.
hasClass(): kiểm tra xem phần tử được chọn có class được chỉ định hay không.
height(): trả về chiều cao của phần tử được chọn.
width(): trả về chiều rộng của phần tử được chọn.
removeClass(): xóa 1 hoặc nhiều class của phần tử được chọn.
Bạn có thể xem thêm và thực hành các phương thức đó ở đây: Phương thức cho CSS trong Jquery.
Tiếp theo là một ví dụ cho bài ngày hôm nay. Ví dụ này mục đích chính là thiết lập hoặc lấy về các thông tin về css và các thuộc tính của phần tử HTML.
Giả sử mình có một body html chứa các phần tử sau

<button id="btnPurple">Purple</button>
<button id="btnBlue">Blue</button>
<button id="btnGreen">Green</button>
<button id="btnHTML">Set HTML</button>
<button id="btnCurrentColor">Current Color</button>
<p id="webzoomz" class="webzoomzClass">Webzoomz.info-Tự học thiết kế web</p>
<hr />
<button id="btnGetSize">Get Size</button>
<button id="btnGetAttr">Get Attribute</button>
<img id="imgNatsu" alt="jquery co ban-html and css" src="http://goo.gl/rAvWk" />

Tiếp theo mình có style cho các phần tử này:

<style type="text/css">
        .webzoomzClass
        {
            font-weight: bold;
            text-shadow: 2px 2px 2px #4c4c4c;
        }
        .purple
        {
            color: #8000A8;
        }
        .blue
        {
            color: #0082FF;
        }
    </style>

 Tiếp theo là phần quan trọng nhất Jquery cho các phần tử trên:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnPurple").click(function () {
                $("#webzoomz").addClass("purple").removeClass("blue").css("color", "#8000A8");
            });
            $("#btnBlue").click(function () {
                $("#webzoomz").addClass("blue").removeClass("purple").css("color", "#0082FF");
            });
            $("#btnGreen").click(function () {
                $("#webzoomz").css("color", "#1FFF00").removeClass("blue").removeClass("purple");
            });
            $("#btnCurrentColor").click(function () {
                alert("Mã màu của đoạn text hiện tại là :" + $("#webzoomz").css("color"));
            });
            $("#btnHTML").click(function () {
                $("#webzoomz").html("<p> Welcome to webzoomz!</p>")
            });
            $("#btnGetSize").click(function () {
                alert("Kích thước của ảnh là width= "+$("#imgNatsu").width()+" height= "+$("#imgNatsu").height());
            });
            $("#btnGetAttr").click(function () {
                alert("Alt="+$("#imgNatsu").attr("alt")+"\nSrc="+$("#imgNatsu").attr("src"));
            });
        });
    </script>

 Đoạn script này khá đơn giản nên mình sẽ không giải thích thêm trừ đoạn code đổi màu cho text. Vì sau khi gán color cho text mà không thông qua class nên mỗi lần đổi class hoặc màu thì mình lại phải remove class đó đi và thiết lập lại màu trong class. Đoạn code đó thực ra là không tối ưu nhưng mình chỉ làm để ví dụ demo thôi ^_^.
Các bạn save và run thì kết quả như sau:

Webzoomz.info-Tự học thiết kế web

---

Chúc các bạn thành công!