vi
new
+1
Avatar
Tran Dat @Dattx1
1.5K 91 54
Đã đăng vào thg 7 6, 2017 8:56 SA 3 phút đọc
382

Tìm hiểu về JQuery part 4

Chào tất cả mọi người. Tháng 7 mình sẽ tiếp tục với các bài viết liên quan đến Jquery. Trong 3 phần trước thì Chúng ta đã tìm hiểu kha khá kiến thức về Jquery rồi . Hôm nay chúng ta sẽ tiếp tục đi tìm hiểu "Tìm kiếm trong Jquery".

Tìm kiếm bằng Index

Đối với 1 list thì các item đều sẽ được đánh index theo thứ tự từ trên xuống dưới và chúng ta có thể gọi và thao tác với các item trong list khi chúng ta biết được index của từng item.

Và Jquery cũng vậy, nó hỗ trợ cho chúng ta các phương thức có thể làm việc được với các item trong 1 list thông qua index, và mình xin giới thiệu phương thức "eq()"

Sau đây là cú pháp để sử dụng eq(index) trong jQuery:

selector.eq( index )

index − Đây là vị trí của phần tử trong tập hợp các phần tử được so khớp, bắt đầu tại 0 và tiếp đến bằng độ dài = 1.

ví dụ

<html>
   <head>
      <title>The JQuery Example</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
		
   </head>
	
   <body>
	
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
		
   </body>
</html>

trong ví dụ này với 1 list <li> khi ta sử dụng $("li").eq(2) có nghĩa là chúng ta đã chọn item có số index = 2 và có thể thao tác với item này $("li").eq(2).addClass("selected");

Các bạn có thể thử tại đây

Lọc phần tử

với phương thức

selector.eq( index )

chúng ta nhận sẽ nhận được kết quả là item và thao tác với item, còn trong 1 số bài toán các bạn ko thể đi tìm index của từng item để thao tác với chúng vậy làm các nào. Chúng ta sẽ đi tìm các item đó bằng các phương thức LỌC. Lọc ở đây có nghĩa là chúng ta sẽ tìm kiếm các phần tử theo các yêu cầu mà chúng ta mong muốn.

filter

Sau đây là cú pháp để sử dụng filter(selector) trong jQuery:

selector.filter( selector )

selector − Nó sẽ là một danh sách các Expression phần biệt nhau bởi dấu phảy để áp dụng nhiều bộ lọc cùng lúc (ví dụ: filter(".class1, .class2")).

với phương thức filter chúng ta có thể dễ dàng lấy ra 1 list và thao thao tác với chúng mà ko cần foreach qua từng item.

ví dụ:

<html>
   <head>
      <title>The JQuery Example</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
		
   </head>
	
   <body>
	
      <div>
         <ul>
            <li class="top">list item 1</li>
            <li class="top">list item 2</li>
            <li class="middle">list item 3</li>
            <li class="middle">list item 4</li>
            <li class="bottom">list item 5</li>
            <li class="bottom">list item 6</li>
         </ul>
      </div>
		
   </body>
</html>

Trong ví dụ này chúng ta sẽ lấy ra 1 list các element dựa vào selector "middle" (các element có class là middle) và sau khi lấy được list đó chúng ta sẽ dễ dàng thao tác với chúng mà ko cần phải duyệt qua từng item

Các bạn có thể thử tại đây

Note: với function filter thì nó sẽ lấy luôn cả element đang gọi nó nếu element đó thỏa mãn yêu đầu filter

Các bạn có thể thử tại đây

find

Sau đây là cú pháp để sử dụng find(selector) trong jQuery:

selector.find( selector )

Phương thức find cũng có phần giống như phương thức filter, nó cũng sẽ dựa vào selector truyền vào để đi tìm các element phù hợp với selector và trả về cho chúng ta 1 list. Chỉ có 1 điểm khác duy nhất đó là function find() sẽ tìm tìm ở trong list các element con của element đang gọi function

<html>
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style type="text/css">
	div{
		padding:8px;
		border:1px solid;
	}
</style>

</head>

<body>

<h1>jQuery find() vs filter() example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#filterClick").click(function () {

	$('div').css('background','white');

	$('div').filter('#Fruits').css('background','red');

    });

    $("#findClick").click(function () {

	$('div').css('background','white');

	$('div').find('#Fruits').css('background','red');

    });

  });
</script>
</head><body>

<div id="Fruits">
	Fruits
	<div id="Apple">Apple</div>
	<div id="Banana">Banana</div>
</div>

<div id="Category">
	Category
	<div id="Fruits">Fruits</div>
	<div id="Animals">Animals</div>
</div>

<br/>
<br/>
<br/>

<input type='button' value='filter(Fruits)' id='filterClick'>
<input type='button' value='find(Fruits)' id='findClick'>

</body>
</html>

Các bạn có thể thử tại đây

parent()

Sau đây là cú pháp để sử dụng parent() trong jQuery:

selector.parent(  )

function parent() sẽ trả về ngay lập tức khi tìm được parent gần nhất của element

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function(){
            $("p").parent().addClass('danger');
            $("p").parent().find("span").first().text("Div danger")
         });
      </script>
		
      <style>
         .hilight { background:yellow; }
         .danger { background:red; }
      </style>

   </head>
	
   <body>
	
      <scan>Top Element</scan>
	  <div class="div1">
      	<span></span>
        <div class="div2">
           <span></span>
           <p>sibling</p>
        </div>
	  </div>
   </body>
	
</html>

parents([selector])

Sau đây là cú pháp để sử dụng parents([selector]) trong jQuery:

selector.parents( [selector] )

function parent() sẽ trả về 1 list, nếu ko có select truyền vào thì nó sẽ lấy hết tất cả các element đang chưa element đang gọi functon parents

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function(){
            $("p").parents(".div1").addClass('hilight');
            $("p").parents(".div1").find("span").first().text("Div hilight")
            $("p").parent().addClass('danger');
            $("p").parent().find("span").first().text("Div danger")
         });
      </script>
		
      <style>
         .hilight { background:yellow; }
         .danger { background:red; }
      </style>

   </head>
	
   <body>
	
      <scan>Top Element</scan>
	  <div class="div1">
      	<span></span>
        <div class="div2">
           <span></span>
           <p>sibling</p>
        </div>
	  </div>
   </body>
	
</html>

Ví dụ về parent() và parent(selector)

tạm thời hôm nay chúng ta dừng ở đây, ở bài tiếp theo chúng ta sẽ tìm hiểu các Event trong Jquery nhé 😃

jquery plugins

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí