القائمة الرئيسية

الصفحات

jQuery - DOM Traversing


jQuery هي أداة قوية جدًا توفر مجموعة متنوعة من طرق اجتياز DOM لمساعدتنا على تحديد العناصر في المستند بشكل عشوائي وكذلك بطريقة متسلسلة. لا تعدل معظم طرق DOM Traversal كائن jQuery ويتم استخدامها لتصفية العناصر من مستند بناءً على شروط معينة. البحث عن العناصر حسب الفهرس ضع في اعتبارك مستندًا بسيطًا يحتوي على محتوى HTML التالي -

<html>
   <head>
      <title>The JQuery Example</title>
   </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>

يوجد فوق كل قائمة فهرس خاص بها ، ويمكن تحديد موقعه مباشرة باستخدام طريقة eq (index) كما هو موضح أدناه. يبدأ كل عنصر فرعي فهرسه من الصفر ، وبالتالي ، يمكن الوصول إلى عنصر القائمة 2 باستخدام $ ("li"). eq (1) وما إلى ذلك. المثال التالي هو مثال بسيط يضيف اللون إلى عنصر القائمة الثاني.


<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

تصفية العناصر يمكن استخدام طريقة المرشح (المحدد) لتصفية جميع العناصر من مجموعة العناصر المتطابقة التي لا تتطابق مع المحدد (المحددات) المحدد. يمكن كتابة المحدد باستخدام أي صيغة محددة. المثال التالي هو مثال بسيط يطبق اللون على القوائم المرتبطة بالطبقة الوسطى -


<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

تحديد موقع العناصر المتسلسلة يمكن استخدام طريقة البحث (المحدد) لتحديد موقع جميع العناصر التابعة لنوع معين من العناصر. يمكن كتابة المحدد باستخدام أي صيغة محددة. المثال التالي هو مثال يحدد جميع <span> العناصر المتوفرة داخل عناصر <p> مختلفة -


<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

JQuery DOM Filter Methods

يسرد الجدول التالي الطرق المفيدة التي يمكنك استخدامها لتصفية العناصر المختلفة من قائمة عناصر DOM -


Sr.No.Method & Description
1eq( index )

Reduce the set of matched elements to a single element.

2filter( selector )

Removes all elements from the set of matched elements that do not match the specified selector(s).

3filter( fn )

Removes all elements from the set of matched elements that do not match the specified function.

4is( selector )

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector.

5map( callback )

Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).

6not( selector )

Removes elements matching the specified selector from the set of matched elements.

7slice( start, [end] )

Selects a subset of the matched elements.

JQuery DOM Traversing Methods

يسرد الجدول التالي الطرق المفيدة الأخرى التي يمكنك استخدامها لتحديد موقع العناصر المختلفة في DOM -

Sr.No.Methods & Description
1add( selector )

Adds more elements, matched by the given selector, to the set of matched elements.

2andSelf( )

Add the previous selection to the current selection.

3children( [selector])

Get a set of elements containing all of the unique immediate children of each of the matched set of elements.

4closest( selector )

Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.

5contents( )

Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.

6end( )

Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state.

7find( selector )

Searches for descendant elements that match the specified selectors.

8next( [selector] )

Get a set of elements containing the unique next siblings of each of the given set of elements.

9nextAll( [selector] )

Find all sibling elements after the current element.

10offsetParent( )

Returns a jQuery collection with the positioned parent of the first matched element.

11parent( [selector] )

Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.

12parents( [selector] )

Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).

13prev( [selector] )

Get a set of elements containing the unique previous siblings of each of the matched set of elements.

14prevAll( [selector] )

Find all sibling elements in front of the current element.

15siblings( [selector] )

Get a set of elements containing all of the unique siblings of each of the matched set of elements.

هل اعجبك الموضوع :

تعليقات