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

الصفحات

jQuery - معالجة DOM


يوفر JQuery طرقًا لمعالجة DOM بطريقة فعالة. لا تحتاج إلى كتابة رمز كبير لتعديل قيمة سمة أي عنصر أو لاستخراج كود HTML من فقرة أو قسم. يوفر JQuery طرقًا مثل .attr () و .html () و .val () والتي تعمل كأحرف لاسترداد المعلومات من عناصر DOM لاستخدامها لاحقًا. معالجة المحتوى تحصل طريقة html () على محتويات html (innerHTML) للعنصر المطابق الأول. هنا صيغة الطريقة -

selector.html( )

المثال التالي هو مثال يستخدم طرق .html () و .text (val). هنا يسترجع .html () محتوى HTML من الكائن ثم يعين أسلوب .text (val) قيمة الكائن باستخدام المعلمة التي تم تمريرها -

<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() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

استبدال عنصر DOM يمكنك استبدال عنصر DOM كامل بعناصر HTML أو DOM المحددة. تخدم طريقة replaceWith (المحتوى) هذا الغرض جيدًا. هنا صيغة الطريقة -

selector.replaceWith( content )

المحتوى هنا هو ما تريده بدلاً من العنصر الأصلي. يمكن أن يكون هذا HTML أو نصًا بسيطًا. المثال التالي هو مثال يستبدل عنصر القسمة بـ " "<h1>JQuery is Great </h1>" −

<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() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

إزالة عناصر DOM قد يكون هناك موقف تريد فيه إزالة عنصر DOM واحد أو أكثر من المستند. يوفر JQuery طريقتين للتعامل مع الموقف. تقوم الطريقة الفارغة () بإزالة جميع العقد الفرعية من مجموعة العناصر المتطابقة حيث تقوم طريقة الإزالة (expr) بإزالة جميع العناصر المتطابقة من DOM. هنا صيغة الطريقة -

selector.remove( [ expr ])

or 

selector.empty( )

يمكنك تمرير المعلمة الاختيارية expr لتصفية مجموعة العناصر المراد إزالتها. المثال التالي هو مثال حيث تتم إزالة العناصر بمجرد النقر عليها -

<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() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

إدراج عناصر DOM قد يكون هناك موقف ترغب فيه في إدراج عنصر DOM جديد أو أكثر في مستندك الحالي. يوفر JQuery طرقًا مختلفة لإدراج العناصر في مواقع مختلفة. تقوم الطريقة after (content) بإدراج المحتوى بعد كل عنصر من العناصر المطابقة حيث تقوم الطريقة السابقة (content) بإدراج المحتوى قبل كل عنصر من العناصر المطابقة. هنا صيغة الطريقة -

selector.after( content )

or

selector.before( content )

هنا المحتوى هو ما تريد إدراجه. يمكن أن يكون هذا HTML أو نصًا بسيطًا. المثال التالي هو مثال حيث يتم إدراج عناصر <div> قبل العنصر الذي تم النقر فوقه مباشرةً

<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() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>
هل اعجبك الموضوع :

تعليقات