آموزش jQuery - فصل چهارم : تغییر محتوای عناصر در جی کوئری
فصل چهارم :
Jquery و تغییر محتوای عناصر :
در jquery شما میتوانید به راحتی محتوای تگ ها و عناصر موجود در صفحه را تغییر نمایید .
برای اینکار چندین تابع در jquery وجود دارد :
$(selector).html(content);
با این دستور محتوی content را داخل عناصر Selectors قرار میدهد .
به عنوان مثال :
$(”p#head”).html(” Welcome “);
این قطعه کد در تگ p با آیدی head عبارت Welcome را مینویسد .
نکته : content میتوان متن ساده یا html باشد :
$(’p').html(”<h۱> hello </h۱>”);
توابع دیگری نیز برای تغییر محتوا عناصر وجود دارند :
$(selector).append(content)
این تابع عبارت content را به انتهای محتوای Selector اضافه میکند .
$(selector).prepend(content)
این تابع عبارت content را به ابتدای محتوای Selector اضافه میکند .
$(selector).after(content)
این تابع عبارت content را بعد از تمام عناصر نظیر Selector درج میکند .
$(selector).before(content)
این تابع عبارت content را قبل از تمام عناصر نظیر Selector درج میکند .
نکته : دستور html() به تنهای محتوی عنصر را برمیگرداند :
alert($(’#box’).html());
تابع دیگری هم برای خواندن محتوی وجود دارد به نام text() که همانند تابع html() عمل میکند با این تفاوت که این تابع تگ های html را حذف میکند و فقط نوشته را برمیگرداند در حالی که html() تمام محتوی را با تگهایش برمیگرداند .
به مثال زیر توجه نمایید :
<html>
<head>
<script type=”text/javascript“ src=”jquery.js“></script>
<script type=”text/javascript“>
$(document).ready(function(){
$(“button”).click(function(){
alert($(‘#test’).text());
alert($(‘#test’).html());
});
</script>
</head>
<body>
<p id=”test“> <b> paragraph </b> </p>
<button>Click me</button>
</body>
</html>
پس از اجرای دستور فوق و کلیک رو دکمه اولین پنجره مقدار “paragraph” را نمایش میدهد و دومین پنجره عبارت “<b> paragraph </b>” نمایش داده میشود .
تغییر خصوصیات (Attribute) شی :
توسط تابع attr() میتوان به خصوصیات یک تگ html دسترسی پیدا کرد .
$(selector).attr(attribute);
خصوصیت attribute از عنصر انتخابی را بر میگرداند .
$(selector).attr(attribute,value);
به خصوصیت attribute از عناصر انتخابی مقدار value را نسبت میدهد .
مثلا :
$(’a').attr(’href’);
مقدار خصوصیت href از اولین تگ a موجود در صفحه را بر میگرداند .
$(this).attr(’id’,'newName’);
مقدار id عنصر جاری را به newName تغییر نام میدهد.
دسترسی به value عناصر فرم ها :
$(selector).val();
$(selector).val(newValue);
توسط تابع val() میتوانیم به محتوا (value ) عناصر موجود در فرم ها دسترسی و مقدارش را تغییر دهیم .
به مثال های زیر توجه نمایید :
$(’input#name’).val();
مقدار value عنصر input با آیدی name را بر میگرداند .
$(’select.foo option:selected’).val();
هنگامی که پنجره dropdown باز است مقدار انتخابی را برمیگرداند .
$(’select.foo’).val(’two’);
مقدار انتخاب شده عنصر select با کلاس foo را روی مقدار two تنظیم میکند.
$(’input:checkbox:checked’).val();
مقدار چک باکس انتخاب شده را بر میگرداند .
$(’input:radio[name=bar]:checked’).val();
مقدار انتخاب شده از دکمه های رادیویی در گروه با نام bar را بر میگرداند.
مثال :
<html>
<head>
<script src=”jquery.js“></script>
<script>
$(document).ready(function(){
$(“input:button”).click(function () {
var text = $(this).val();
$(“input:text”).val(text);
});
})
</script>
</head>
<body>
<div>
<input type=”button“ value=”First“ />
<input type=”button“ value=”Secont“ />
<input type=”button“ value=”third“ />
</div>
<input type=”text“ value=”click a button“ />
</body>
</html>
پس از اجرا با کلیک روی هر دکمه مقدار value آن دکمه ها در تکست باکس نمایش می یابد .
دسته‌ها: آموزش Jquery, طراحي وب
