Admin

Nothing to lose.. your love to win..
23,298 ❤︎ Bài viết: 4187 Tìm chủ đề
3156 4
Kiếm tiền
Admin đã kiếm được 31560 đ
jQuery là một bộ thư viện javascript giúp cho công việc của lập trình viên được sắp xếp & code một cách khoa học hơn, dễ hiểu hơn, nhanh hơn giúp giảm tải code & đỡ bị trùng lặp. Nói cách khác jQuery là một thư viện giúp tổ chức lại cách viết code rắc rối của javascript, do vậy nên bạn hoàn toàn có vẫn thể sử dụng javascript mà không cần đến jQuery, tuy nhiên hầu hết các plugin javascript hỗ trợ các chức năng cơ bản được viết dựa trên jQuery, lập trình viên chỉ cần add các plugin đó vào web và sử dụng mà không cần phải viết lại. Vì thế mà có đến 99% website trên thế giới sử dụng jQuery trừ những website sử dụng JS Framework.

Download: jQuery Bản Mới Nhất

Để sử dụng các bạn nhớ khai báo thư viện, có thể upfile trực tiếp lên host của bạn:

PHP:
<script type="text/javascript" src="clients/jquery.min.js"></script>

hoặc sử dụng thư viện có sẵn trên máy chủ CDN của Google để tiết kiệm băng thông:

PHP:
 <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

Ví dụ như bạn cần viết đoạn code kiểm tra tiêu đề bài viết không được bỏ trống thì mới cho submit như sau.

Sử dụng Javascript:

PHP:
<input id="nameId" type="text" name="title" value="Nhập tiêu đều vào đây">
<input id="submit" type="submit" onclick="return checkTitle('nameId');">

function checkTitle(name) {
     var val = document.getElementById(name).value;
     if (val == "") {
          alert('Không được bỏ trống!');
     }
}

Sử dụng jQuery:

PHP:
$('#submit').click(function() {
     if ($('#nameId').val == "") {
          alert('Không được bỏ trống!');
     }
});

Jquery dựa trên cú pháp HTML & CSS để viết code nên rất đơn giản và dễ hiểu.

Học jQuery có lẽ các bạn chỉ cần nhớ: Tiền "$" là bắt buộc, "#" đại diện cho ID, "." đại diện cho class vậy là xong.

Còn các thứ loằng ngoằng khác các bạn chỉ cần xem tài liệu của jQuery hoặc xem code của thằng khác và làm vài lần sẽ nhớ.

Ví dụ bạn có 1 phần tử có id là 1234 và 1 phần tử có 1 class là 6789:

PHP:
<input id="1234" value="4321">
<input class="hide" value="Ẩn nội dung class 6789">
<div class="6789">Nội dung cần ẩn</div>

Bạn muốn lấy giá trị của cái input:

PHP:
value = $('#1234').val;

Khi ấn vào input có thuộc tính class là hide sẽ ẩn nội dung trong cái div class 6789:

PHP:
$('.hide').click(function() {
      $('.6789').css("display", "none");
});

Cực nhanh gọn & dễ hiểu.

Và trong bài hướng dẫn này, mình sẽ đưa ra các ví dụ cụ thể cho thực tế và dễ hiểu. Sẽ update dần dần..
 
Chỉnh sửa cuối:
23,298 ❤︎ Bài viết: 4187 Tìm chủ đề
Các module chính mà của Jquery sử bao gồm.

Ajax - xử lý Ajax

Atributes - xử lý thuộc tính của dối tượng HTML

Effect - xử lý hiệu ứng

Event - xử lý sự kiện

Form - xử lý form

DOM - xử lý Data Object Model

Selector - xử lý luồng lách các đối tượng HTML

Selector trong jQuery​


Trong jQuery thường sử dụng cú pháp của CSS để truy vấn

Chọn theo tên thẻ:

Mã:
$("p")     // chọn tất cả thẻ <p>

Chọn theo id:

Mã:
$("#myId")

Chọn theo class

Mã:
$(".myClass")

Selector Attributes​


Selector Attributes là sàn lọc thẻ HMTL dựa vào thuộc tính và giá trị của thuộc tính

Nhiều selector cùng lúc:

Mã:
$("p.item, #header")

Theo cây DOM:

Mã:
$("#menu li")     // li bên trong #menu
$("ul > li")      // li là con trực tiếp của ul
$(".box + p")     // p ngay sau .box

Selector thuộc tính:

Mã:
$("input[type='text']")
$("a[href^='https']")   // bắt đầu bằng
$("a[href$='.pdf']")    // kết thúc bằng
$("img[src*='banner']") // chứa

Vị trí:

Mã:
$("li:first")
$("li:last")
$("li:eq(2)")       // phần tử thứ 2 (0–based)
$("li:odd")         // vị trí lẻ
$("li:even")        // vị trí chẵn

Trạng thái:

Mã:
$(":checked")
$(":selected")
$(":disabled")
$(":focus")

Nội dung:

Mã:
$("div:contains('Hello')")
$("div:empty")     // không có nội dung
$("div:has(p)")    // chứa thẻ p

Biểu mẫu:

Mã:
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":file")
$(":input")         // tất cả input

Selector tùy chỉnh bằng hàm filter()

Mã:
$("li").filter(function() {
  return $(this).text().length > 10;
});

Ví dụ: dùng selector + sự kiện

Mã:
$("#btn").click(function() {
  $(".item").hide();
});
 
Từ khóa: Sửa

Những người đang xem chủ đề này

Xu hướng nội dung

Back