jQuery cơ bản cho những Newbie

jQuery cơ bản cho những Newbie

Tạo thư mục chứa code: jquery-co-ban . Trong thư mục đó ta tiếp tục tạo 1 thư mục js chứa file thư viện jQuery

1. Download thư viện jQuery

– Trước hết ta cần download thư viện jQuery từ trang http://jquery.com/download/. Phiên bản hiện tại là jQuery 2.x

Hoặc Download tại: Download jQuery 2.2.0

Sau khi download và giải nén file vào thư mục : jquery-co-ban/js/jquery-2.2.0.min.js

2. Tạo file html và cài đặt jQuery
– Dùng Notepad++ tạo file html gọi là index.html có nội dung như sau:

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>jQuery cơ bản cho những Newbie</title>
</head>
<body>

</body>
</html>

Save vào thư mục chính: jquery-co-ban/index.html

Tiếp theo chèn thư viện jQuery vừa download được vào thẻ HEAD : <script src=”js/jquery-jquery-2.2.0.min.js”></script>

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>jQuery cơ bản cho những Newbie</title>
<script src=”js/jquery-2.2.0.min.js”></script>
</head>
<body>

</body>
</html>

3. Những tương tác ban đầu của jQuery

Vd đơn giản:
-Trong bài này, ví dụ ta có 1 thẻ INPUT và 1 thẻ BUTTON, Click vào thẻ BUTTON sẽ thông báo giá trị của INPUT đó. Trước tiên ta làm 1 ví dụ cực kì đơn giản ấy để hiểu như thế nào là jQuery. Vd ta nhập vào textbox: website366.com là Website giá rẻ

Code:

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>jQuery cơ bản cho những Newbie</title>
<script src=”js/jquery-2.2.0.min.js”></script>
</head>
<body>

<input id=”name_id” name=”name” value=”” type=”text” />
<button onclick=”clickMe();”>Nhấp Vào Đây</button>

</body>
</html>

Chạy thử file index.html ta sẽ thấy như hình:

Tiếp theo ta viết hàm clickMe(); như sau:

<script>
function clickMe(){
//Lấy giá trị thẻ input với id là name_id
var giatri = jQuery(‘#name_id’).val();
alert(giatri);
}
</script>

Tổng hợp lại file index.html như sau:

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>jQuery cơ bản cho những Newbie</title>
<script src=”js/jquery-2.2.0.min.js”></script>
</head>
<body>
<input id=”name_id” name=”name” value=”” type=”text” />
<button onclick=”clickMe();”>Nhấp Vào Đây</button>
<script>
function clickMe(){
//Lấy giá trị thẻ input với id là name_id
var giatri = jQuery(‘#name_id’).val();
alert(giatri);
}
</script>
</body>
</html>

4. Test kết quả:

5. Thêm
Ta có thể lấy giá trị thẻ input theo những cách khác như: class, name
VD: var giatri = jQuery(‘input.input’).val(); // ten_the.ten_class
Hoặc: var giatri = jQuery(‘input[name=”name”]’).val(); // ten_the[thuoc_tinh=”gia_tri_thuoc_tinh”]

6. Download bài
Download jQuery Cơ bản

Website giá rẻ Hẹn gặp lại các bạn trong bài tiếp theo >>

jQuery cơ bản cho những Newbie jQuery cơ bản cho những Newbie

Chia sẻ jquery, từ cơ bản đến nâng cao

400 490 500
  • Đừng bỏ lỡ các tin hay bên dưới nhé!

  • Xu hướng thiết kế website năm 2017 là gì?

    Căn bản một website thường có menu chính và các cột TRÁI chứa danh sách sản phẩm, cột PHẢI liệt kê bài viết hoặc thống kê….. Khu vực chính giữa thường sẽ chứa nội dung ( Hay còn gọi là content ). Kiểu website cũ – theo kiểu truyền thống Tuy nhiên, bạn hãy quên […]

    CHI TIẾT
  • Thế nào là thiết kế website giới thiệu?

    Để quảng bá hình ảnh Công Ty rộng rãi đến các Đối Tác, Khách Hàng một cách nhanh nhất. Ngày nay hầu hết Công Ty hướng đến việc thiết kế website giới thiệu, để đẩy mạnh hình ảnh thông qua các dịch SEO nhanh. Cũng như cạnh tranh trực tiếp với các đối thủ cùng […]

    CHI TIẾT
  • Giảm giá sốc chỉ 399.000 đ cho 1 website

    Chương trình KHUYẾN MÃI – GIẢM GIÁ sốc duy nhất đến hết ngày 10/04/2017. Từ ngày hôm nay đến hết ngày 10/04/2017 Thiết kế website 366 vui mừng gởi đến các bạn chương trình khuyến mãi giảm giá website. Chỉ duy nhất 399.000 đồng bạn có ngay 1 trang Website bán hàng hoặc Website giới thiệu hoàn chỉnh Chú ý: Bạn sẽ […]

    CHI TIẾT
  • Đừng thiết kế website khi bạn chưa sẳn sàng

    Website sẽ mang đến cho bạn rất nhiều thuận lợi trong việc kinh doanh. Có được một thiết kế website nghĩa là mang đến sự tin cậy dường như tuyệt đối với khách hàng. Bạn có thể quảng cáo sản phẩm của mình mọi lúc mọi nơi thông qua website bán hàng. Là con đường […]

    CHI TIẾT
  • Tiêu chí chọn công ty thiết kế website là gì?

    Bạn đang có rất nhiều ý tưởng bán sản phẩm, như có ma lực thôi thúc bạn muốn thiết kế website. Bạn lại không hiểu nhiều về website, trong khi đó bạn có rất ít bạn bè làm việc trong lĩnh vực này. Đừng quá lo lắng, chúng tôi sẽ giúp bạn giải đáp thắc mắc […]

    CHI TIẾT

Góp ý kiến

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *