ورود به حساب ثبت نام جدید فراموشی کلمه عبور
برای ورود به حساب کاربری خود، نام کاربری و کلمه عبورتان را در زیر وارد کرده و روی “ ورود به حساب” کلیک کنید.





اگر فرم ثبت نام برای شما نمایش داده نمیشود، اینجا را کلیک کنید.









اگر فرم بازیابی کلمه عبور برای شما نمایش داده نمیشود، اینجا را کلیک کنید.





نمایش نتایج: از 1 به 1 از 1
  1. #1
    adminmsp
    مدیر کل و موسس سایت
    تاریخ عضویت
    1970 Jan
    محل سکونت
    M.S.P Soft
    نوشته ها
    1,588
    759
    419

    اموزش سلکتورهای jQuery بخش دوم

    در بخش اول آموزش jQuery درمورد خوبی ها و بدی های جی کوئری گفتیم و یادگرفتیم که چطور از این کتابخونه جاوا اسکریپت استفاده کنیم. + با Syntax جی کوئری آشنا شدیم و چند تا selector رو آزمایش کردیم.

    امروز در بخش دوم آموزش ، با سلکتورهای jQuery آشنا میشیم.

    سلکتور همونطور که از اسمش پیداست برای انتخاب کردن المنت ها (جهت اعمال کد روی اون*ها) استفاده میشه. برای انتخاب یه عنصر HTML هم میتونیم به صورت مستقیم اونو فراخوانی کنیم

    (صدا زدن با کلاس ، ID ، نام تگ و یا “this”) که در بخش اول آموزش jQuery چند نمونه دیدیم ؛ هم میتونیم از روش های

    خاص*تری مثل روش*های زیر استفاده کنیم:
    انتخاب همه عناصر (*)

    $(*).hide() با کد زیر میتونید همه عناصر صفحه رو فراخوانی کنید.([برای نمایش لینک باید عضو شوید. ])
    مثلا در کد زیر تعریف شده که همه عناصر با کلیک شدن ، hide بشن

    $(document).ready(function(){ $("*").click(function(){ $(this).hide(); }); });
    انتخاب عناصر در حال حرکت (animated)
    نمیخوام در این بخش وارد بحث انیمیشن بشم ، در بخش های بعدی کار با انیمیشن رو یاد میگیریم؛ فقط در همین حد بگم که با این کد میتونیم عناصری رو که درحال حرکت هستن رو سلکت کنیم: ([برای نمایش لینک باید عضو شوید. ])

    $("div:animated").hide()
    انتخاب عناصر با خصوصیت دلخواه
    برای انتخاب عناصر بر اساس خصوصیت ها
    کد زیر لینک هایی که خاصیت href شون با عبارت http شروع بشه رو hide میکنه

    $('a[href^="http"]').hide()
    کد زیر لینک هایی که خاصیت hreflang شون en باشه یا با -en شروع بشه رو hide میکنه
    تفاوتش با کد قبلی اینه که اگه در اینجا hreflang مقادیری مثل en یا en-UK داشته باشه سلکت میشه ولی مقادیری مثل english سلکت نمیشه. اما اگه مثل کد قبلی از علامت ^ استفاده کنیم ، مقدار english هم سلکت میشه. ([برای نمایش لینک باید عضو شوید. ])

    $('a[hreflang|="en"]').hide()
    کد زیر عکس*هایی رو که در هر جای خاصیت Alt شون اسم من باشه (!) رو مخفی میکنه

    $('img[alt*="pouya"]').hide()
    این کد هم مثل کد بالا کار میکنه ولی تفاوتش اینه که کلمه*ی مورد نظر باید با Space از کلمه های دیگه جدا شده باشه. یعنی اگه خصوصیت Alt تصویر، عبارت “this is pouya saadeghi” باشه ، عکس رو سلکت میکنه ولی اگه در Alt تصویر ، عبارت “ThisIsPouyaSaadeghi” باشه ، عکس رو سلکت
    نمیکنه

    $('img[alt~="pouya"]').hide()
    کد زیر همه لینک*هایی که خصوصیت hrefشون با کلمه”html” تموم میشه رو سلکت میکنه

    $('a[href$="html"]').hide()
    کد زیر فقط div هایی رو که خصوصیت کلاسشون فقط و فقط کلمه myclass باشه رو سلکت میکنه

    $('div[class="myclass"]').hide()
    کد زیر div هایی رو که خصوصیت کلاسشون هرچیزی به جز کلمه “myclass” باشه رو سلکت میکنه

    $('div[class!="myclass"]').hide()
    انتخاب دکمه ها
    این سلکتور فقط دکمه ها رو سلکت میکنه؛ دکمه میتونه با تگ <button> درست شده باشه یا با تگ <input> با مقدار button
    کد زیر به همه button ها حاشیه 3 پیکسلی میده. در این کد نحوه اعمال یک کد CSS به یک عنصر رو هم میتونید ببینید.


    $(":button").css({"border":"3px black solid"});
    انتخاب چک*باکس ها
    مثل کد قبلی کار میکنه، کد زیر چک*باکس ها رو انتخاب میکنه

    $(":checkbox").css({"border":"3px black solid"});
    اگه بخوایم این نوع کدها فقط در محدوده یک عنصر کار کنن، به راحتی میتونیم از اسم کلاس*ها ، IDها یا تگ ها استفاده کنیم:

    $("#container .leftColumn input:checkbox").css({border:"3px black solid"});

    انتخاب Input های از نوع File

    برای انتخاب Input هایی که خصوصیت type اون*ها مقدار file داره و برای انتخاب یک فایل جهت آپلود در سایت استفاده میشن ([برای نمایش لینک باید عضو شوید. ])

    $("input:file").css({border:"3px black solid"});
    انتخاب عنصرهای check شده
    این سلکتور checkbox ها و radio هایی که تیک خوردن (انتخاب شدن) رو سلکت میکنه ([برای نمایش لینک باید عضو شوید. ])

    $("input:checked").css({"border":"3px black solid"});
    در کد زیر با انتخاب هر دکمه رادیویی موجود در صفحه ، مقدار value اون ، در یک عنصر جدید که کلاس .log داره ، نمایش داده میشه:

    $("input").click(function(){ $(".log").html( $(":checked").val() + " is checked!" ); });
    انتخاب عناصر فرزند
    درست مثل CSS میتونیم در jQuery هم عناصر فرزند رو فراخوانی کنیم

    $("ul.class1 > li").css({border:"3px black solid"});
    انتخاب بر اساس محتوا
    با کد contains میتونیم عنصری که متن خاصی داخلش وجود داره رو سلکت کنیم.
    کد زیر هر پاراگرافی که کلمه forum.mspsoft.comداخلش باشه رو نارنجی میکنه


    $("p:contains('forum.mspsoft.com')").css("color", "orange");
    انتخاب عنصرهای غیرفعال (disabled)
    کد زیر کلمه “DISABLED” رو در همه input هایی که غیرفعال شدن مینویسه:

    $("input:disabled").val("DISABLED");
    انتخاب عنصرهای فعال (enabled)
    کد زیر برای همه input هایی که فعال هستن بوردر قرمز میذاره:

    $("input:enabled").css("border":"1px solid red");

    انتخاب عناصر خالی

    برای عناصری که هیچ متن یا تگی داخلشون نباشه. مثل تگ های زیر:

    <a></a> <li></li> <td></td> کد زیر همه تگ*های خالی که داخل تگ body باشن رو انتخاب میکنه، متن Empty Tag رو داخلشون مینویسه و رنگ بکگراندشون رو قرمز میکنه

    $("body :empty").text("Empty Tag").css('background','red');

    انتخاب بر اساس اندیس

    با استفاده از eq میتونیم از بین تعدادی عنصر یکسان ، عنصری با شماره خاص رو سلکت کنیم.
    اگه یه لیست با 3 تا li داشته باشیم ، شماره اندیس این سه تا li از 0 تا 2 هست (شمارش اندیس*ها از 0 شروع میشه)
    برای انتخاب عنصر اول:

    $("li:eq(0)").css("color","blue" );
    برای انتخاب عنصر دوم:

    $("li:eq(1)").css("color","blue" );
    البته احتیاجی نیست که حتما عناصر متوالی باشن، مثلا برای td جدول هم میتونید استفاده کنید ([برای نمایش لینک باید عضو شوید. ])

    انتخاب زوج و فرد

    قبلا در آموزش سطرهای گورخری در CSS از این روش برای انتخاب عناصر با وسیله CSS3 استفاده کرده بودیم.
    در jQuery هم چنین کاری میتونیم انجام بدیم
    کد زیر پاراگراف*های زوج رو آبی میکنه:


    $("p:even").css("color","blue");
    کد زیر پاراگراف*های فرد رو قرمز میکنه:

    $("p:odd").css("color","red");
    با M.S.P Soft به دنياي برنامه نويسي وارد شويد[برای نمایش لینک باید عضو شوید. ]
  2. 1
نمایش نتایج: از 1 به 1 از 1

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. آموزش jQuery سلکتورها بخش اول
    توسط MspSoft در انجمن jQuery
    پاسخ: 1
    آخرين نوشته: 2016-08-31, 10:46 PM
  2. آموزش:تعریف توابع در سی شارپ
    توسط Prof.MohammadGh در انجمن #C
    پاسخ: 0
    آخرين نوشته: 2012-09-27, 08:17 PM
  3. سری اموزش های jquery قسمت اول
    توسط mirhendi در انجمن طراحی وب (Web Design)
    پاسخ: 0
    آخرين نوشته: 2012-09-17, 12:10 AM
  4. توابع api همراه با سورس و توضیح
    توسط vahid4251 در انجمن برنامه نویسی در 6 VB
    پاسخ: 6
    آخرين نوشته: 2011-12-15, 08:15 PM
  5. ساختار و پوشش jQuery
    توسط MspSoft در انجمن jQuery
    پاسخ: 0
    آخرين نوشته: 2011-11-25, 06:29 PM

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Content Relevant URLs by vBSEO 3.6.0 RC 2