/ / Javascript & Jquery / Comment (0)

Jquery Selector

Nếu các bạn đã từng học qua về css, cách lựa chọn phần tử trong css, thì trong Jquery cũng làm việc gần giống vậy trong việc lựa chọn các phần tử để làm việc. jQuery selector tận dụng thế mạnh của CSS selector nhằm giúp người mới tìm hiểu về jQuery có thể nắm bắt nhanh chóng khi đã làm việc và có kiến thức về CSS. Do đó jQuery selector tương tự như CSS selector.

jQuery selector giúp chúng ta dễ dàng truy vấn đến các phần tử DOM (Document Object Model – Mô hình đối tượng tài liệu) một cách nhanh nhất, code đơn giản và ngắn ngọn nhất.

Yều cầu để có thể nghiên cứu được bài này:

Jquery selectors

Cú pháp:

<script type="text/javascript" >
$(document).ready(function(){
    //code jquery
    $("phần tử thao tác"). action () ;
})
<script>

+ $ : là cú pháp khai báo Jquery.
+ $(‘phần tử’) : là tìm những phần tử cần thao tác.
+ action : là hành động đi kèm (click, hide, addclass,…).

Quét chọn dữ liệu trên 1 đối tượng

$(‘*’): Chọn tất cả các phần tử trong tài liệu HTML

$(‘Tên_Thẻ’): Dành cho việc tìm 1 phần tử thẻ

$(“.tên_class”): Dành cho việc tìm 1 class của phần tử.

$(“#tên_id”): Dành cho việc tìm 1 ID của phần tử

– Để quét chọn các phần tử con trong một vùng đối tượng hay 1 thẻ, ta dùng dấu “>”.

Ví dụ:

+ Chọn tất cả các phần tử trong tài liệu HTML

<script type="text/javascript" >
$(document).ready(function() {
    $("*").click(function() {
          alert(“Chọn tất cả các phần tử trong tài liệu HTML");
    });
})
<script>

+ Lựa chọn tất cả các thẻ <a>

<script type="text/javascript" >
$(document).ready(function() {
    $("a").click(function() {
          alert(“Bạn đã click vào thẻ a");
    });
})
<script>

+ Lựa chọn tất cả các thẻ <a class=”jquery”>

<script type="text/javascript" >
$(document).ready(function() {
    $("a.jquery").click(function() {
          alert(“Bạn đã click vào thẻ a có class là jquery ");
    });
})
<script>

+ Lựa chọn tất cả các thẻ <a id=”jquery”>

<script type="text/javascript" >
$(document).ready(function() {
    $("a#jquery").click(function() {
          alert(“Bạn đã click vào thẻ a có ID là jquery ");
    });
})
<script>

+ Chọn tất cả các thành phần li (cấp 1) trong danh sách;

<script type="text/javascript" >
$(document).ready(function() {
    $("ul li").click(function() {
          alert(“Bạn đã click vào thẻ li cấp 1 trong danh sách");
    });
})
<script>

jQuery Attribute selector

– Attribute selectors là cách chọn các thành phần trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó, với Attribute selectors chúng ta có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc Id vào trong thẻ HTML mà vẫn có thể hướng được đến các thành phần đó.

Ví dụ:
+ Chọn tất cả các thẻ a có thuộc tính href;

<script type="text/javascript" >
$(document).ready(function() {
    $("a[href]").click(function() {
          alert(“Bạn đã click vào thẻ a có thuộc tính href");
    });
})
<script>

+ Chọn tất cả các thẻ input có kiểu là submit;

<script type="text/javascript" >
$(document).ready(function() {
    $("input[type='submit']").click(function() {
          alert(“Bạn đã click vào thẻ input có kiểu là submit");
    });
})
<script>

Kết thúc bài viết: Qua bài này mình đã hướng dẫn cho các bạn các cách lựa chọn phần từ làm việc trong jquery,đây là những cách hay sử dụng nhất trong khi lập trình,ngoài ra các bạn có thể tham khảo thêm nhiều cách Jquery selectors khác tại đây.Sang bài tiếp theo chúng ta sẽ tiếp tục nghiên cứu sang Jquery Events



02/09/2014
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL