Học jquery cơ bản dành cho người mới học lập trình web

Học jquery cơ bản dành cho người mới học lập trình web
0 0

Jquery là một thư viện javascript với nhiều tính năng như truy xuất phần tử html, thay đội nội dung, định dạng, hiệu ứng, xử lý sự kiện ... Cú pháp jquery ngắn gọn và dễ nhớ. Dưới đây là những kiến thức về việc áp dụng jquery vào trang web ở mức độ cơ bản cho những bạn mới bắt đầu.

 

Tích hợp jquery vào trang web

Để tích hợp jquery vào trang web, chúng ta sẽ vào trang chủ tải về của jquery để nhận được phiên bản mới nhất. Sau khi tải file về, chúng ta sẽ nhúng vào website thông qua thẻ script như ví dụ bên dưới: 

Trong ví dụ này, file jquery.js được đặt trong thư mục js

 

Truy xuất thành phần HTML bằng Jquery

Cú pháp: $(selector)

Ví dụ: Chọn thẻ h1 bằng jquery

Có thể nói, selector trong jquery khá giống selector trong css. 

 

 

Xử lý nội dung bằng Jquery

 

Cú pháp:

$(selector).html() dùng để thao tác tới phần content html của một thẻ đầy đủ.

$(selector).text() dùng để thao tác tới phần chữ của một thẻ đầy đủ.

$(selector).val() dùng để thao tác đến giá trị của một ô nhập dữ liệu từ người dùng như textarea, input ...

Ví dụ: Lấy ra nội dung bằng jquery

Trong ví dụ này, chúng ta vừa lấy được nội dung html của thẻ p, nội dung text của thẻ p, và giá trị đang có của ô nhập tên học viên.

 

Ví dụ: Đặt lại nội dung bằng jquery

Trong ví dụ này, chúng ta đã đặt lại nội dung text cho thẻ h1, đặt lại nội dung html cho thẻ p với class intro, đặt lại giá trị tên học viên.

 

Xử lý thuộc tính thẻ html bằng jquery

Cú pháp: 

$(selector).attr() dùng để thao tác đến giá trị của thuộc tính html

$(selector).prop() dùng để thao tác đến giá trị (thuộc kiểu bool) của thuộc tính html.

Ví dụ: Lấy ra giá trị thuộc tính bằng jquery

 

Ví dụ: Gắn giá trị cho thuộc tính bằng jquery

<body>
    <h1>Gắn giá trị cho thuộc tính của thẻ html bằng jquery</h1>
    <a href="https://google.com" id="a1">
        Nhấn để chuyển trang
    </a>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script>
         $("#a1").attr('href', 'https://www.facebook.com');
    </script>
</body>

Trong ví dụ này, chúng ta đã đổi đường dẫn của liên kết thành facebook.

 

Xử lý định dạng bằng Jquery

Lấy ra giá trị css:

$(selector).css('css_atrribute_name');

 

Đặt lại giá trị css:

$(selector).css('css_attribute_name', 'value');

hoặc 

$(selector).css({css_attribute_name: 'value'});

 

Ví dụ: 

<a href="https://google.com" id="a1">
    Nhấn để chuyển trang
</a>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
    $("#a1").css("color", "red");
    $("#a1").css({'background-color': '#999'});
    console.log($("#a1").css("color"));
</script>

 

Xử lý sự kiện bằng Jquery

Bắt sự kiện bằng jquery: 

Cú pháp: 

$(selector).on('event_name', function () {
    //Todo somethings
});

 

Ví dụ: 

<p id="p1">
    Nhấn vào để xem sự kiện click
</p>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
    $("#p1").on('click', function () {
        alert('bạn đã click vào thẻ p');
    });
</script>

 

Gọi sự kiện

Cú pháp: 

$(selector).trigger('event_name');

 

Ví dụ: 

<p id="p1">
   Nhấn vào để xem sự kiện click
</p>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
   $("#p1").click(function(){
      alert(1);
   });
   $("#p1").trigger('click'); // gọi sự kiện
</script>

 

Ngoài sự kiện là click như trên, chúng ta còn thường sử dụng các sự kiện khác như:

- dbclick: Nhấn đúp chuột 2 lần liên tiếp

- change: khi thay đổi giá trị của thuộc tính value

- mouseover: Khi vừa rê chuột vào

- onmouseout: Khi vừa rời chuột đi ra ngoài phần tử

- mousemove: Khi re con trỏ chuột bên trong phần tử

- keydown: Khi thành phần đang được focus mà chúng ta nhấn xuống phím bất kỳ, nếu chúng ta giữ phím không thả lên, thì sự kiện sẽ được bắt nhiều lần cách nhau một khoảng thời gian rất ngắn.

- onkeyup: Khi thành phần đang được focus mà chúng ta nhả lên phím bất kỳ

- onkeypress: Khi thành phần đang được focus mà chúng ta nhấn phím bất kỳ

- paste: Khi dán nội dung vào thành phần

- copy: Khi copy nội dung từ thành phần

- cut: Cắt nội dung từ thành phần

- focus: Khi thành phần được focus, hiểu đơn giản, nghĩa là thành phần đang được thao tác.

- blur: Thành phần bị mất focus, khi đang được thao tác rồi lại bị mất thao tác vì lý do nào đó, có thể do nhấn chuột ra ngoài phạm vi

 

Tạo vào 2019-07-04 17:34:05, Cập nhật 1 năm trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Học jquery cơ bản dành cho người mới học lập trình web tới bạn bè để mọi người cùng đọc nhé !
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Học jquery cơ bản dành cho người mới học lập trình web
Gửi đi
Bạn đang đọc bài viết Học jquery cơ bản dành cho người mới học lập trình web , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
34920
0.044775009155273