برچسب: آموزش

آموزش 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>

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

آموزش 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>

<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 – فصل دوم : ساختار کلی دستورات

 فصل دوم : شروع آموزش

ساختار کلی دستورات :

در jquery شما تعدادی تگ html را انتخاب کرده (selector ) و بر روی آنها عملیاتی (actions ) انجام میدهید .

$(selector).action();

در کد فوق :

  • $ همان شی jQuery است .
  • Selector نام یک المنت یا مشخصات یک سری المنت برا انتخاب شدن است .
  • action()  هم عملی است که روی المنت های انتخابی انجام میشود .

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

$(this).hide() : عنصر جاری را مخفی میکند

 $(“p”).hide() :عمل پنهان شدن را برای تمام تگ های “p” موجود در صفحه اعمال میکند

$(“p.test”).hide() : تمام تگ های p که کلاسشان “test” تعریف شده را پنهان میکند.

$(“#test”).hide()  : تگی که آیدی آن “test”   است را مخفی میکند.

 

نکته : همان طور که مشاهده فرمودید قسمت selector برای انتخاب مجموعه ای از عناصر از ساختار CSS تبعیت میکند . در این مورد بعدا مفصل تر توضیح داده خواهد شد .

$(document).ready :

در jquery سعی میشود تمام کد ها در رویداد $(document).ready اجرا شود .

$(document).ready(function(){

—  jQuery functions —-});

این رویداد هنگامی اتفاق می افتد که صفحه جاری کاملا لود شده باشد و آماده اجرا باشد . اجرای دستورات در خارج از رویداد document.ready  میتواند مشکلاتی را بوجود آورد مثلا :

·         پنهای کردن ( hide ) عنصری که هنوز لود نشده باعث بروز خطا یا اجرا نشدن کد میشود.

·         تغییر سایز یک عکسی که هنوز به طور کامل لود نشده نیز میتواند باعث ایجاد مشکل در نمایش سایت گردد.

 

Jquery Selectors  :

توسط Selector ها شما میتوانید یک عنصر html یا تعدادی از عناصر html با یک خصوصیت مشترک را انتخاب نمایید .

برای انتخاب تگ ها میتوان از نام آنها ، خصوصیات تعریف شده آنها (مانند id یا class یا href و … ) و یا محتوی داخلی آنها استفاده کرد .

·         برای انتخاب تگهای هم نام ، نام تگ را در قسمت Selecotrs مینویسیم :

(“p”)$ : انتخاب تمام پاراگرافها

(“a”)$ : انتخاب تمام لینک ها

  • برای انتخاب تگی با یک آیدی خاص آیدی را به همراه # مینویسیم :

$(“#test”)

کد بالا تگی با آیدی test را انتخاب میکند .

  • برای انتخاب تگی با یک خصوصیت (Attribute ) آن خصوصیت و مقدارش را بین [] مینویسیم :

$(“[href=’https://blog.monavarian.ir’ ” ) :

کد بالا تمام المنتهایی را که دارای خصوصیت href با مقدار https://blog.monavarian.ir هست را انتخاب میکند.

نکته : میتوان به جای مساوی در کد بالا از != و یا $=  استفاده کرد :

 : $(“[href!=’#’]”) انتخاب تمام المنتها که href آنها مخالف عبارت # باشد

$(“[href$=’.jpg’]”): انتخاب تمام عناصر که عبارت داخل href آنها به .jpg ختم شود . ( تمام لینک هایی که ب تصویر لینک شده اند )

 

·         میتوانید از ترکیب این selector ها استفاده نمایید :

$(“p.test”) : تمام تگ های p که کلاسشان test است .

$(“div#main”) : تگ div که آیدی آن main است .

$(“div#main .note”) : تمام تگ هایی با کلاس note که داخل تگ div با آیدی main هستند . دقت نمایید که در این مثال .note با یک فاصله از div#main درج شده .

نکته : به دو انتخاب زیر دقت نمایید :

$(“p.test”)

$(“p .test”)

ظاهرا این دو کد شبیه هم هستند (در دومی یک فاصله space بین p  و .test وجود دارد ) . اما اولی تگها p با کلاس test را انتخاب میکند . در حالی که دومی تمام تگهای با کلاس test که درون تگهای p قرار دارند انتخاب خواهد کرد .

 

·         برای انتخابهای خاص یک سری نماد اضافه نیز تعریف شده است :

$(“ul li:first”) : اولین li از تگ های ul را انتخاب مینماید .

$(“tr:even”) : تمام سطر های زوج جدول .

$(“tr:odd”) : تمام سطر های فرد جدول .

$(“input:not(:empty)”) : تمام input هایی که خالی نیستند

 

برای دیدن مرجع Selector ها به آدرس http://w3schools.com/jquery/jquery_ref_selectors.asp مراجعه نمایید .

 

 

jQuery Event Functions  :

Events  چیست ؟ Event یا رویداد واقعه هایی است که در یک صفحه وب اتفاق می افتد . مثلا رویداد click هنگامی که کلیکی روی عنصری زده میشود این رویداد از آن عنصر اتفاق می افتد . یا رویداد ready از عنصر document هنگامی که صفحه آماده اجرا میشود اتفاق می افتد .

چند تا از رویداد ها در jquery :

  • mouseover : هنگامی که موس روی شی قرار میگیرد
  • mouseout : هنگامی که موس از روی شی کنار میرود .
  • Dblclick : هنگام دبل کلیک کردن روی شی اتفاق می افتد .
  • Focus : هنگام فوکوس کردن روی یک شی اتفاق می افتد .
  • Blur:  هنگامی که شی از حالت فوکوس خارج میشود اتفاق می افتد .

 

jQuery Event Functions  : توابعی هستند که هنگامی که یک رویداد در کد html اتفاق می افتد بطور اتوماتیک اجرا میشوند .

مثلا میتوان در jquery گفت هنگامی که روی  یک selector کلیک شد تابعی اجرا شود . به عنوان مثال :

$(“button”).click(function(){$(“p”).hide();});           

کد فوق بر روی رویداد کلیک تمام تگ های button  تابعی اجرا میکند . این تابع تمام پاراگراف های موجود در صفحه را hide میکند . در واقع هنگام اجرای صفحه html .اگر روی هر دکمه ای که در صفحه موجود است کلیک شود ، تمام تگ های p  موجود در صفحه پنهای میشود.

 

نکته: رویداد ها را به دو صورت در کد میتوان استفاده کرد :

  • حالت اول وقتی که میخواهیم برای رویدادی تابعی بنویسیم :

$(selector).event(function(){ … some code … })

  • حالت دوم وقتی است که میخواهیم یک رویداد را صدا بزنیم :

$(selector).event()

در این حالت رویداد مربوط به selector را صدا میزنیم .

مرجع event  ها jquery   : http://w3schools.com/jquery/jquery_ref_events.asp

 

jQuery Name Conflicts :

jquery از علامت اختصاری $ به جای jQuery استفاده میکند. بعضی کتابخانه های جاوااسکریپت دیگر نیز از این نام استفاده میکنند . اگر شما در صفحه خود از کتابخانه دیگری نیز استفاده میکنید که آن کتابخانه نیز از نام $ استفاده میکند . شما با کتابخانه jQuery به مشکل بر خواهید خورد .

jQuery برای حل این مشکل تابعی دارد به نام noConflict() که توسط آن میتوانید نام جدید برای صدا زدن توابع jQuery ایجاد نمایید :

var jq=jQuery.noConflict()

دستور فوق باعث میشود تا شما نام jq را جایگزین $ نمایید .

 

برای اینکه jquery به بهترین حالت ممکن کار خود را انجام دهد شما باید :

  • تمام کد های jquery را درون event handler ها قرار دهید .
  • تمام event handler ها (توابع رویداد ها ( را درون رویداد document.ready قرار دهید .
  • کدهای خود را درون یک فایل js جداگانه قرار دهید و آن را درون صفحه خود فراخوانی کنید.
  • اگر تابع هم نام $ دارید توسط تابع noConflict نام تابع jquery را تعویض نمایید.

 

یک مثال ساده :

<html>

<head>

<script type=”text/javascript“ src=”jquery.js“></script>

<script type=”text/javascript“>

$(document).ready(function(){

  $(‘a’).click(function(){

      alert(‘clicked’);

  })

});

</script>

</head>

<body>

      <a href=”https://blog.monavarian.ir“ > Blog.Monavarian.ir </a>

</body>

</html>

در مثال بالا :

  1. ابتدا فایل کتابخانه jquery یعنی فایل jquery.js را صدا زدیم .
  2. در سطر بعدی در یک تگ script گفتیم که هنگامی که رویداد ready از شی document صدا زده شد این کار ها را انجام بده :- تابعی روی رویداد کلیک تگ های a موجود در صفحه بنویس (این تابع فقط عبارت Clicked            را بصورت پاپ آپ نمایش میدهد )
  3. در بدنه صفحه یک تگ a نوشتیم .
  4. با ذخیره فایل بالا به نام test1.html و اجرای آن در browser ، لینکی را میبینیم که با کلیک روی آن عبارت clicked بصورت popup نمایش می یابد .

نکته : در مثال فوق هنگامی که روی لینک کلیک میکنیم . بعد از نمایش پیغام clicked ، لینک اجرا شده و به صفحه blog.monavarian.ir  منتقل خواهیم شد . اگر میخواهید تگ a رویداد پیشفرض خود را نادیده بگیرد میتوانید از تابع preventDefault() استفاده نمایید . در این حالت تکه کد jquery ما به شکل زیر تغییر میکند :

$(document).ready(function(){

 $(‘a’).click(function(event){

     alert(‘clicked’);

      event.preventDefault();

 });

});