آموزش متدهای دریافت محتوا و خصوصیات عناصر HTML در جی کوئری

سلام و خسته نباشید خدمت شما علاقه مندان به آموزش جی کوئری. در جلسه قبل با آموزش chaining در جی کوئری همراه شما بودیم. در این جلسه با آموزش دریافت محتوا و صفات عناصر در جی کوئری آشنا می شویم.

دریافت محتوا و خصوصیات عناصر در جی کوئری

یکی از ویژگی های بسیار کاربردی در جی کوئری امکان تغییر و دستکاری کردن عناصر HTML و خصوصیات آنها می باشد. مثلا توسط متدهای قدرتمندی که جی کوئری در اختیار شما قرار می دهد می توانید تمامی محتوای داخل یک تگ <p> را گرفته و آن را تغییر داده و یا از آن استفاده نمایید.
جی کوئری به عناصر صفحه با استفاده از مدل DOM یا Document Object Model دسترسی دارد. مدل DOM مدلی شی گرا است که مرورگر از عناصر صفحه ایجاد می کند. این مدل یک ساختار درختی (پدر – فرزندی) از عناصر صفحه HTML می باشد.
شکل زیر یک مدل DOM از عناصر صفحه HTML را نشان می دهد.

دسترسی و تغییر محتوای عناصر HTML توسط جی کوئری

در جی کوئری 3 متد ساده و کاربردی جهت دسترسی و تغییر محتوای عناصر HTML وجود دارد:

• ()text – محتوای عنصر یا عناصر انتخاب شده را دریافت می کند.
• ()html – محتوای عنصر یا عناصر انتخاب شده را همراه با تگ های HTML دریافت می کند.
• ()val – محتوای عنصر یا عناصر انتخاب شده داخل یک فرم را دریافت می کند.

مثال دریافت و نمایش محتوای تگ <p> با شناسه content توسط متد text():

Html

  <p id="content">This is some <strong> strong </strong> text in a paragraph.</p>  <button>Show Text</button>

Jquery

  $("button").click(function(){      alert($("#content").text());    });

خروجی کد بالا به شکل زیر می باشد:

مثال دریافت و نمایش محتوای تگ <p> با شناسه content توسط متد html():

HTML

  <p id="content">This is some <strong> strong </strong> text in a paragraph.</p>  <button>Show HTML</button>  Jquery  $("button").click(function(){      alert($("#content").html());    });

 خروجی کد بالا به شکل زیر خواهد بود:

دریافت مقدار یک خصوصیت توسط متد attr() در جی کوئری

توسط متد attr در جی کوئری می توانید مقدار یک خصوصیت یا attribute را دریافت کنید.

در مثال زیر مقدار خصوصیت href برای تگ <a> را توسط متد attr دریافت و نمایش می دهیم:

HTML

  <p><a href="http://www.ilikephp.ir" id="myLink">ILikePHP.ir</a></p>  <button>Show href</button>

Jquery

  $("button").click(function(){      alert($("#myLink").attr("href"));    });

خروجی کدهای بالا به صورت زیر خواهد بود: