فصل پنجم :
تغییر استایل در جی کوئری :
توسط 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>
<script src=”jquery.js” type=”text/javascript” ></script>
<script type=”text/javascript”>
$(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;