جی کوئری ، ادیتور مناسب برای jquery

فصل پنجم :

تغییر استایل در جی کوئری :

توسط jquery میتوانید مستقیما استایل یک شی را در صفحه تغییر دهید . برای تغییر استایل چند تابع مهم وجود دارد :

$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)
$(selector).height(value)
$(selector).width(value)

توسط تابع css به سه روش فوق میتوان مقدار استایل عناصر را تغییر داد .

$(selector).css(name,value)

در این دستور مقدار value را برای خصوصیت name در تمام عناصر html مطابق با selector تنظیم میکند.

$(“p”).css(“background-color”,”yellow”);

عبارت بالا رنگ پیش زمینه همه پاراگراف های موجود در صفحه را به زرد تبدیل میکند.

$(selector).css({properties}) :

این دستور برای تنظیم چندین خصوصیت css برای عناصر انتخابی می باشد . به عنوان مثال :

$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});

عبارت فوق رنگ پیش زمینه پاراگرافها را زرد و اندازه نوشته آنها را دوبرابر میکند. همانطور که میبینید هر خوصوصیت با یک کاما “,” از خصوصیت بعدی جدا میشود و همه خصوصیت ها بین { و } قرار گرفته اند.

$(selector).css(name) :

این دستور مقدار خصوصیت name از عنصر selector را برمیگرداند . مثلا :

$(this).css(“color”);

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

$(selector).height(value)

$(selector).width(value)

دو تابع width و height به ترتیب برای تغییر اندازه عرض و ارتفاع selector ها استفاده میشود :

$(“#boxinfo”).height(“200px”);

عبارت فوق مقدار ارتفاق عنصری با آیدی boxinfo در صفحه را 200 پیکسل میکند.

$(this).width(“200px”).height(“200px”);

عبارت فوق اندازه عرض و ارتفاع عنصر جاری را برابر 200پیکسل میکند.

نکته : دو تابع width و height در صورتی که بدون پارامتر استفاده شوند به ترتیب مقدار عرض و ارتفاع عنصر انتخابی را بر میگردانند.

افزودن و حذف کلاس :

$(selector).addClass(classname);

$(selector).removeClass(classname);

توسط دو دستور فوق میتوان یک کلاس css را به عناصر انتخابی اضافه نمود و یا اگر عناصری دارای کلاسی هستند آن کلاس را حذف کرد .

مثال :

<html>

<head>

$(document).ready(function(){

$(‘button’).mouseover(function(){

$(‘p’).addClass(‘info’);

})

$(‘button’).mouseout(function(){

$(‘p’).removeClass(‘info’);

})

</script>

<title>Example 1</title>

<style>

.info {

background:#000;

color:#FFF;

}

</style>

</head>

<body>

<button>move mouse to add or remove </button>

<p>paragraph 1</p>

<p class=”info”> paragraph 2 whit class info</p>

</body></html>

در کد فوق پس از اجرا با بردن موس روی دکمه کلاس info به پاراگراف ها اعمال میشود و با برن موس به خارج از دکمه کلاس info حذف میشود.

نکته : توسط دستور (selector).toggleClass(content)$ میتوان به عنصری کلاسی را اضافه کرد و در صورتی که عنصر از این کلاس استفاده میکند آن را حذف کرد . (تغییر وضعیت بین اضافه و حذف کلاس content برای عنصر selector ) .

hasClass(classname):

مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر .

if ( $(‘#mydiv’).hasClass(‘info’) )
alert(‘mydiv has class info’);

position() :

$(selector).position()

این تابع فاصله selector را از بالا و چپ صفحه مشخص میکند . برای دسترسی به فاصله بالا از .top و برای دسترسی به فاصله چپ از .left استفاده میشود :

var pos = $(‘#mydiv’).position();
var left = pos.left;
var top = pos.top;

فصل چهارم :

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>

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

$(document).ready(function(){

$(“input:button”).click(function () {

var text = $(this).val();

$(“input:text”).val(text);

});

})

</script>

</head>

<body>

<div>

</div>

</body>

</html>

پس از اجرا با کلیک روی هر دکمه مقدار value آن دکمه ها در تکست باکس نمایش می یابد .

برچسب: جی کوئری ، ادیتور مناسب برای jquery

آموزش jQuery – فصل پنجم : تغییر استایل در جی کوئری

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