آموزش jQuery – فصل چهارم : تغییر محتوای عناصر در جی کوئری

فصل چهارم :

Jquery و تغییر محتوای عناصر :

در jquery شما میتوانید به راحتی محتوای تگ ها و عناصر موجود در صفحه را تغییر نمایید .

برای اینکار چندین تابع در jquery وجود دارد :

$(selector).html(content);

با این دستور محتوی content را داخل عناصر Selectors قرار میدهد .

به عنوان مثال :

$(“p#head”).html(” Welcome “);

این قطعه کد در تگ p با آیدی head عبارت Welcome را مینویسد .

نکته : content میتوان متن ساده یا html باشد :

$(‘p’).html(“<h1> hello </h1>”);

توابع دیگری نیز برای تغییر محتوا عناصر وجود دارند :

$(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>

بیشتر بخوانید  آموزش jQuery - فصل ششم : Ajax in jQuery (ایجاکس در جی کوئری )

<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();

بیشتر بخوانید  آموزش jQuery - فصل هفتم : پیمایش عناصر html ( Tree Traversal ( .

$(“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 آن دکمه ها در تکست باکس نمایش می یابد .

5 دیدگاه در “آموزش jQuery – فصل چهارم : تغییر محتوای عناصر در جی کوئری”

  1. سلام
    چگونه برای انتخاب دسته منوی کشویی چند تایی بسازیم؟

    من می خوام جوری باشه که وقتی کاربر یک دسته رو انتخاب می کنه زیر دسته های آن در منوی کشویی جدیدی ظاهر شوند دققا مثل همین سایت که پرسش ارسال می کنیم و مثلا php را انتخاب کرده و بعد زیر دسته های آن مثل متفرقه ، رشته ها و اعداد و … ظاهر می شوند

    پاسخ

    1. از منوی های جی کوئری آماده وب میتونید پیدا کنید . سرچ کنید : jquery dropdown menu

      پاسخ

  2. با سلام
    من با استفاده از ایجکس اطلاعات مربوط به تصویر رو از دیتابیس دریافت میکنم و برای ویرایش اون ها رو در فرم قرار میدم. اما برای انتخاب عنصری از منوی کشویی که مقدارش برابر با عنصر مورد نظر من هست نمیدونم باید چکار کنم. خاصیت selected رو هم بررسی میکنم اما جواب نمیده

    پاسخ

  3. باسلام
    من یک صفحه ایجاد کردم که میخوام به صورت dialog()نشون بدم اما چطوری میشه با cssخودم کادربندی کنم دکمه بستن ویا رنگ بکگراند عنوان یا همون titleرو عوض کنم
    ممنون میشم راهنمایی کنید

    پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *