Anhltgc00950@fpt.edu.vn

Chủ Nhật, 12 tháng 4, 2015

10 hàm JQuery

Filled under:

1. Hàm .length
Xác định số lượng thành phần trong  jQuery Object.
Cấu trúc:

$('li').length
Ví dụ:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var n = $('li').length;
    $('span').text(n);
});
</script>
</head>

<body>
<ul>
<li>Thành phần thứ 1</li>
<li>Thành phần thứ 2</li>
<li>Thành phần thứ 3</li>
<li>Thành phần thứ 4</li>
<li>Thành phần thứ 5</li>
</ul>
<p>Có tổng cộng <span></span> thành phần trong danh sách.</p>
</body>
</html>

Hiển thị trình duyệt:

  • Thành phần thứ 1
  • Thành phần thứ 2
  • Thành phần thứ 3
  • Thành phần thứ 4
  • Thành phần thứ 5
Có tổng cộng 5 thành phần trong danh sách.

 2. Hàm .css()
Được dùng để thêm một hoặc nhiều style cho thành phần. Ngoài ra còn có thể sử dụng .css() để lấy giá trị style của thành phần.
Cấu trúc:
Thêm một style cho thành phần
.css('thuộc tính','giá trị');
Lấy một giá trị style của thành phần
.css('thuộc tính');
Ví dụ:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p.test').css('color','red');
});
</script>
</head>

<body>
<p class="test">Tuấn Anh</p>
<p>Tuan Anh</p>
</body>
</html>

Hiển thị trình duyệt:

Tuấn Anh
Tuan Anh

3. Hàm .click()
Làm thay đổi hiệu ứng của một dòng hay đoạn văn bản khi ta click vào Hàm đã được cài đặt trước đó.
Ví dụ:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p').click(function(){
        $('span').css('color','blue');
    });
});
</script>
</head>

<body>
<p>Click</p>
<span>Tuấn Anh</span>
</div>
</body>
</html>
 Khi tác động lên thành phần p một sự kiện click thì ngay lập tức trình duyệt sẽ xử lý nội dung của function là đổi màu của span.

 4. Hàm .empty()
Loại bỏ tất cả các thành phần bên trong kể cả text của thành phần chọn.
Cấu trúc: 
$('p').empty();
Ví dụ: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.emp').empty();
});
</script>
</head>

<body>
<p class="emp">Tuan Anh</p>
<p>Tuấn Anh</p>
</body> 
</html> 

Khi hiển thị ra trình duyệt thì thành phần p có class .emp sẽ không hiển thị gì cả, Trình duyệt chỉ hiện dòng Tuấn Anh.



5. Hàm .error()

Khi có lỗi xảy ra do một thành phần gặp lỗi có thể là do thành phần được tải không chính xác, khi đó .error() sẽ kích hoạt sự kiện lỗi hoặc thực hiện một function.

Cấu trúc:



$('img').error();



$('img').error(function() {
    $('img').replaceWith('<p>Error loading image!</p>'); 


 Ví dụ:




<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').error(function(){
        $('img').replaceWith('<p>Error loading image!</p>');
    });
    $('button').click(function(){
        $('img').error();
    });
});
</script>
</head>

<body>
<img src="../images/logo.gif" /><br />
<button>Click</button>
</body>
</html>



Khi hiển thị ra trình duyệt, khi chúng ta nhấn vào button Click thì trình duyệt sẽ thông báo Error loading image!



6. Hàm .first()


Xác định thành phần đầu tiên trong các thành phần phù hợp.


Cấu trúc:



$('li').first();

Ví dụ:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').first().css('color','red');
});
</script>
</head>

<body>
<ul>
<li>Thành phần thứ 1</li>
<li>Thành phần thứ 2</li>
<li>Thành phần thứ 3</li>
</ul>
</body> 


</html> 




Hiển thị trình duyệt:


    

  • Thành phần thứ 1
    • 

  • Thành phần thứ 2
    • 

  • Thành phần thứ 3
    • 





7. Hàm .last()



Xác định thành phần cuối cùng trong các thành phần phù hợp.



Cấu trúc:




$('li').last();


Ví dụ:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').last().css('color','red');
});
</script>
</head>

<body>
<ul>
<li>Thành phần thứ 1</li>
<li>Thành phần thứ 2</li>
<li>Thành phần thứ 3</li>
<li>Thành phần thứ 4</li>
<li>Thành phần thứ 5</li>
</ul>
</body>


</html>



Hiển thị trình duyệt:


    

  • Thành phần thứ 1
    • 

  • Thành phần thứ 2
    • 

  • Thành phần thứ 3
    • 

  • Thành phần thứ 4
    • 

  • Thành phần thứ 5
    • 


8. Hàm .not()


Không chọn thành phần nào có sử dụng .not().


Cấu trúc:



$('p').not(":even");



$('p').not(function(index){....});



$('p').not($("#selected") [0]);

Ví dụ:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').not('.notSelected').css('color','red');
});
</script>
</head>

<body>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li class="notSelected">Thành phần li</li>
<li>Thành phần li</li>
</ul>
</body> 


</html> 




Hiển thị trình duyệt:


    

  • Thành phần li
    • 

  • Thành phần li
    • 

  • Thành phần li
    • 

  • Thành phần li
    • 







9. Hàm .remove()



 Loại bỏ các thành phần được xác định.

Cấu trúc: 



$('.class').remove(); 

Ví dụ: 




<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('.test').remove();
});
</script>
</head>

<body>
<div class="test">Lê Tuấn Anh</div>
<div>Tuấn Anh</div>
</body>
</html>





Khi hiển thị ra trình duyệt thì dòng Lê Tuấn Anh sẽ bị biến mất.



10.  Hàm .clone()

Tạo một bản sao (copy) cho thành phần.

Cấu trúc:



$('p').clone();

Ví dụ:




<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p').clone().appendTo('body');
});
</script>
</head>

<body>
<p>Tuấn Anh</p>
</body>
</html>



Hiển thị trình duyệt:



Tuấn Anh

Tuấn Anh




































0
nhận xét:
        
















Đăng nhận xét




















        

      







Đăng ký:
Đăng Nhận xét (Atom)