دوره های پیشنهادی

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

علیرضا حاتمی نیا 1693

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

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

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

HTML dom
دسترسی و تغییر محتوای عناصر 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());
  });

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

jquery text method

مثال دریافت و نمایش محتوای تگ <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());
  });

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

jquery html method
دریافت مقدار یک خصوصیت توسط متد 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"));
  });

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

jquery attr method

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت