نکاتی برای دستکاری DOM در jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 12 مرداد 1401

نکاتی برای دستکاری DOM در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. jQuery تعدادی روش برای دستکاری DOM به روشی کارآمد ارائه می‌دهد. برای تنظیم یا دریافت محتوای هر عنصر HTML نیازی به نوشتن کد بزرگ و پیچیده ندارید!

دستکاری DOM در جی کوئری

jQuery متدهایی مانند ()attr() ،html() ،text و ()val را ارائه می‌دهد که به عنوان گیرنده و تنظیم کننده برای دستکاری محتوای اسناد HTML عمل می‌کنند.

Document Object Model (DOM) – یک استاندارد W3C (کنسرسیوم وب جهانی) است که به ما امکان ایجاد، تغییر یا حذف عناصر از اسناد HTML یا XML را می‌دهد.

در اینجا چند عملیات اساسی وجود دارد که می‌توانید با کمک روش‌های کتابخانه استاندارد jQuery روی عناصر DOM انجام دهید:

محتوای یک عنصر را استخراج کنید
تغییر محتوای یک عنصر
افزودن عنصر فرزند به عنصر موجود
افزودن یک عنصر والد به بالای یک عنصر موجود
اضافه کردن یک عنصر قبل یا بعد از یک عنصر موجود
یک عنصر موجود را با عنصر دیگری جایگزین کنید
حذف یک عنصر موجود
بسته بندی محتوا با یک عنصر

جی کوئری – دریافت محتوا

جی کوئری متدهای html() و text() را برای استخراج محتوای عنصر HTML منطبق ارائه می‌کند. نحو و ساختار این دو روش در زیر آمده است:

$(selector).html();

$(selector).text();

متد text() در جی کوئری مقدار متن ساده محتوا را برمی‌گرداند، در حالی که html() محتوا را با تگ‌های HTML برمی‌گرداند. برای انتخاب عنصر هدف باید از انتخابگرهای جی کوئری استفاده کنید.

مثال – نکاتی برای دستکاری DOM در jQuery

مثال زیر نحوه دریافت محتوا را با متدهای text() و html() نشان می‌دهد:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#text").click(function(){
         alert($("p").text());
      });
      $("#html").click(function(){
         alert($("p").html());
      });
   });
</script>
</head>
<body>
   <p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p>
   
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

دریافت فیلدهای فرم

متد val() برای دریافت مقدار از هر فیلد فرمی استفاده می‌شود. در زیر سینتکس ساده این روش آمده است:

$(selector).val();

مثال

در زیر مثال دیگری برای نشان دادن نحوه دریافت مقدار یک فیلد ورودی با متد val() آورده شده است:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert($("#name").val());
      });
      $("#b2").click(function(){
         alert($("#class").val());
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value="Zara Ali"/></p>
   <p>Class: <input type="text" id="class" value="Class 12th"/></p>
   
   <button id="b1">Get Name</button>
   <button id="b2">Get Class</button>
</body>
</html>

جی کوئری – تنظیم محتوا

از متدهای html() و text() می‌توان برای تنظیم محتوای عنصر HTML همسان استفاده کرد. در زیر دستور این دو روش برای تنظیم مقادیر آمده است:

$(selector).html(val, [function]);

$(selector).text(val, [function]);

در اینجا val، اچ تی ام ال محتوای متنی است که باید برای عنصر تنظیم شود. ما می‌توانیم یک تابع فراخوانی اختیاری برای این متدها ارائه کنیم که وقتی مقدار عنصر تنظیم شود فراخوانی می‌شود.

متد text() مقدار متن ساده محتوا را تنظیم می‌کند در حالی که متد html() محتوا را با تگ‌های HTML تنظیم می‌کند.

مثال – نکاتی برای دستکاری DOM در jQuery

مثال زیر نحوه تنظیم محتوای یک عنصر را با متدهای text() و html() نشان می‌دهد:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#text").click(function(){
         $("p").text("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
      $("#html").click(function(){
         $("p").html("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
   });
</script>
</head>
<body>
   <p>Click on any of the two buttons to see the result</p>
   
   <button id="text">Set Text</button>
   <button id="html">Set HTML</button>
</body>
</html>

تنظیم فیلدهای فرم

متد جی کوئری val() نیز برای تنظیم مقدار از هر فیلد فرمی استفاده می‌شود. در زیر سینتکس ساده این روش در هنگام استفاده از آن برای تنظیم مقدار آورده شده است:

$(selector).val(val);

در اینجا val مقداری است که باید برای فیلد ورودی تنظیم شود. ما می‌توانیم یک تابع فراخوانی اختیاری ارائه کنیم که وقتی مقدار فیلد تنظیم شود فراخوانی می‌شود.

مثال – نکاتی برای دستکاری DOM در jQuery

در زیر مثال دیگری برای نشان دادن نحوه تنظیم مقدار یک فیلد ورودی با متد val() آورده شده است:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         $("#name").val("Zara Ali");
      });
      $("#b2").click(function(){
         $("#class").val("Class 12th");
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value=""/></p>
   <p>Class: <input type="text" id="class" value=""/></p>
   
   <button id="b1">Set Name</button>
   <button id="b2">Set Class</button>
</body>
</html>

jQuery – عناصر جایگزین

متد ()replacementWith می‌تواند برای جایگزینی یک عنصر DOM کامل با یک عنصر HTML یا DOM دیگر استفاده شود. در زیر سینتکس این روش آمده است:

$(selector).replaceWith(val);

در اینجا val چیزی است که می‌خواهید به جای عنصر اصلی داشته باشید؛ این می‌تواند HTML یا متن ساده باشد.

مثال – نکاتی برای دستکاری DOM در jQuery

در زیر مثالی وجود دارد که در آن عنصر <p> را با عنصر <h1> جایگزین می‌کنیم و سپس عنصر <h1> را با عنصر <h2> جایگزین می‌کنیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         $("p").replaceWith("<h1>This is new heading</h1>");
      });
      $("#b2").click(function(){
         $("h1").replaceWith("<h2>This is another heading</h2>");
      });
   });
</script>
</head>
<body>
   <p>Click below button to replace me</p>

   
   <button id="b1">Replace Paragraph</button>
   <button id="b2">Replace Heading</button>
</body>
</html>

شما می‌توانید یک مرجع کامل از تمام روش های جی کوئری برای دستکاری محتوای CSS و HTML را در مقاله مرجع Html/Css در jQuery مشاهده کنید. مقاله نکاتی برای دستکاری DOM در jQuery در اینجا به پایان رسید، نظرات خود را با ما به اشتراک بگذارید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊