# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن > jQuery > آموزش: نکات و ترفند های jQuery.

## ricky22

سلام.
این تاپیک محلی برای به اشتراک گذاری نکته ها و ترفند های jQuery می باشد.

از پرسیدن سوال خودداری شود.اگر پستی می گزارید و نکته یا تکه کدی را مطرح می کنید حتما توضیح فارسی درباره عملکرد بدهید.لطفا کدهای خود را Highlight کنید .(Syntax Highlighting )برای Index گزاری بهتر لطفا هر نکته/تکه کد خود را در یک پست قرار دهید.اگر در این تاپیک پلاگین خاصی را معرفی می کنید حتما یک تکه کد از عملکرد اون پلاگین قرار دهید.از گزاشتن لینک به سایت های دیگر خودداری بفرمایید.
به مرور زمان سعی می کنم همه ی پست ها را Index گذاری کنم.
همکاری شما در این تاپیک باعث مسرت هست.
با تشکر.

----------


## ricky22

* کسی برای گروه بندی Index ها پیشنهادی دارد؟ (لطفا به من پیام خصوصی بزنید.)*



> شناسایی نوع مرورگرغیر فعال کردن راست کلیک
> Preloading ImagesFont Resizingبرگشت به بالای صحفه با Animationدریافت محل ماوسچک کردن برای خالی بودن یک عنصرجایگزاری یک عنصربررسی وجود یک عنصرقرار دادن یک عنصر در وسط صحفهشمارش تعداد یک عنصر در صحفهجلوگیری از اجرای رفتار پیشفرض یک کنترل (مثلا کلیک در یک دکمه)استفاده از Cheat Sheetخلاصه نویسی Document Readyاستفاده از متد Data برای نگهداری وضعیت به صورت Key/valueمتدهای Chainable (زنجیری)جستجو در یک Html و تغییر در آن                             لود عکس از فایل xml و نمایش آن بصورت داینامیک با استفاده از jQuery AJAX                             اضافه و حذف کردن آیتم به یک لیست                             تغییر اندازه متن توسط end user                             ساختنAccordion Menu                             نحوه نوشتن پلاگین برای jQuery با یک مثال ساده                               نوشتن Enum  برای JavaScript و jQuery                              يك دست سازي ي و ك دريافتي در صفحات وب با jQuery                             یک ابزار Offline و یک ابزار Online برای امتحان کدهای jQueryبایند کردن یک Function به یک Eventمجبور کردن لینک ها به باز شدن در یک Pop up مجبور کردن لینک ها به باز شدن در Tab جدید چک کردن وضعیت فعال یا غیر فعال بودن Cookie جایگزاری همه  URL ها در صحفه با لینک قابل کلیکگرفتن URL صفحه جاریاجرای تابع به تعداد دفعات مشخص در بازه زمانی مشخص 							افزودن یک سطر به یک جدول گرفتن IP کاربر3 رقم 3 رقم جدا کردن یک عدد(مقادیر پولی)

----------


## ricky22

غیر فعال کردن راست کلیک :
$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

----------


## ricky22

شناسایی نوع مرورگر کاربر :
$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
    // do something
}

// Target Safari
if( $.browser.safari ){
    // do something
}

// Target Chrome
if( $.browser.chrome){
    // do something
}

// Target Camino
if( $.browser.camino){
    // do something
}

// Target Opera
if( $.browser.opera){
    // do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
    // do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
    // do something
}
});

----------


## ricky22

*Preloading images*


این تکه کد کمک می کند همه ی عکس ها با هم بارگزاری نشوند مناسب برای زمانی که سایت شما عکس های زیادی دارد.

$(document).ready(function() {
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);
  }
}
// how to use
$.preloadImages("image1.jpg");
});
</arguments.length;>

----------


## ricky22

*Font resizing*

آیا قصد دارید به کاربر اجازه دهید اندازه ی فونت ها را تغییر دهد؟
$(document).ready(function() {
  // Reset the font size(back to default)
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease the font size(smaller font)
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

----------


## ricky22

برگشت به بالای صحفه با Animation.
$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    return false;
   }
  }
  });
// how to use
// place this where you want to scroll to
<a name="top"></a>
// the link
<a href="#top">go to top</a>
});

----------


## ricky22

دریافت محل ماوس 
$(document).ready(function() {
   $().mousemove(function(e){
     //display the x and y axis values inside the div with the id XY
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
// how to use
<div id="XY"></div>

});

----------


## ricky22

چک کردن برای خالی بودن یک عنصر.
$(document).ready(function() {
  if ($('#id').html()) {
   // do something
   }
});

----------


## ricky22

جایگزاری یک عنصر.
$(document).ready(function() {
   $('#id').replaceWith('
<div>I have been replaced</div>

');
});

----------


## ricky22

بررسی وجود یک عنصر :
$(document).ready(function() {
   if ($('#id').length) {
  // do something
  }
});

----------


## ricky22

قرار دادن یک عنصر در وسط صحفه.
$(document).ready(function() {
  jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
      return this;
  }
  $("#id").center();
});

----------


## ricky22

شمارش تعداد یک عنصر در صحفه.
$(document).ready(function() {
   $("p").size();
});

----------


## ricky22

جلوگیری از اجرای رفتار پیشفرض یک کنترل (مثلا کلیک در یک دکمه)
$('#close').click(function(e){  
     e.preventDefault();
}); 
 
/* OR */
 
$('#close').click(function(){  
    return false;
}); 

<a href="#" id="close"></a>

----------


## ricky22

در این تاپیک قرار بر این بوده که علاوه بر تکه کد و ترفند با نمونه کد اگر نکته ی خاصی هم به نظر رسید اینجا قرار بدیم :
استفاده از برگه های تقلب
این یک نکته ی خاصی برای jQuery نیست . در اکثر زبان های برنامه نویسی برگه هایی وجود دارد به نام Cheat sheet یا همان برگ تقلب که نمونه های زیادی برای jQuery
یافت می شود.
این یک Cheat Sheet برای jQuery ورژن 1.5 هست.

----------


## ricky22

یک نکته ی کوچک در jQuery که می تواند سرعت کد نویسی را افزایش دهد :
استفاده از 
$(function (){
    // your code
});

به جای 
$(document).ready(function (){
    // your code
});

می باشد.

----------


## ricky22

استفاده از متد داخلی Data برای ذخیره وضعیت.
این متد برای ذخیره یک اطلاعات به صورت Key/Value برای هر عنصر DOM استفاده می شود. 
ذخیره کردن یک تکه داده به همین سادگی هست :
$('#myDiv').data('currentState', 'off');
به حالت Key/Value توجه کنید.
-----
مثالی برای این متد :
$('.button').click(function() {

    var menuItem = $(this).parent();
    var panel = menuItem.find('.panel');

    if (menuItem.data('collapsed')) {
        menuItem.data('collapsed', false);
        panel.slideDown();  
    }
    else {
        menuItem.data('collapsed', true);
        panel.slideUp();
    }
});

ما از یک HTML استفاده کرده ایم و برای نشان دادن وضعیت از متد Data استفاده کرده ایم.
جالبه ! بقیه Internal های jQuery را اینجا ببینید

----------


## ricky22

یکی از ویژگیهای بسیار جالب jQuery متدهای Chainable هست . یعنی شما می توانید متدها رو دنبال هم بنویسید :
فرض کنید می خواهید یک Class را از یک عنصر بنویسید و کلاس دیگری به آن عنصر بدهید اینگونه عمل می کنیم :
$('myDiv').removeClass('off').addClass('on');
شما در jQuery می توانید کد شکسته بنویسید(چون jQuery = Javascript) :
$('#mypanel')
    .find('TABLE .firstCol')
    .removeClass('.firstCol')
    .css('background' : 'red')
    .append('<span>This cell is now red</span>');

اگر عادت کنید کد زنجیری بنویسید باعث از دفعات استفاده از Selector کاسته بشه 
So Write Less Do More

----------


## ricky22

*جستجوی عبارت انتخاب شده و تغییر در آن.
*اگر بخواهید در یک متن عبارت 'شاهین' را جستجو کنید و هر جا که پیدا شد در آن تغییری دهید(highlight کنید یا Replcae کنید)؟
jQuery این کار را برای ما آسان کرده با html():
مثال :
$(function(){
    //First define your search string, replacement and context:
    var phrase = "your search string";
    var replacement = "new string";
    var context = $(body);
 
    //
    context.html(
        context.html().replace('/'+phrase+'/gi', replacement);
    );
 
});

----------


## Amir Oveisi

لود عکس از فایل xml و نمایش آن بصورت داینامیک با استفاده از Ajax و JQuery

فرض کنید فرمت فایل xml به شکل زیر است:
<?xml version="1.0" encoding="utf-8"?>
<images>
  <image>
    <src>"Images/1.jpg"</src>
    <description>"some text"</description>
    
    <title>"title"</title>
  </image> 
</images>

کد JQuery برای لود اطلاعات از فایل و اضافه کردن تگ img به ازای هر عکس لود شده:

 $(document).ready(function () {
            $.ajax({ type: "GET",
                url: "xmlfile.xml",
                dataType: "xml",
                success: parseXml
            });
            function parseXml(xml) {
                $(xml).find("image").each(function (index) {
                    $('<li><img src=' + $(this).find("src").text() + ' title=' + $(this).find("title").text() + ' alt=' + $(this).find("description").text() + ' /></li>').appendTo('#images');

                });

            }
        });

فرض بر آن است که یک تگ ul با  id = images داریم که عکس های لود شده داخل آن لیست خواهند شد.

----------


## ricky22

شما می توانید عناصر درون عنصرهای دیگر در DOM را انتخاب کنید با پاس دادن پارامتر دوم به jQuery initializer :
<div id="outer">
  <div id="inner"> </div>
</div>
DIV درونی به این صورت انتخاب می شود :
 $('#outer').find('#inner')
//or shorter:
$('#inner', $('#outer'))
//or even shorter:
$('#inner', '#outer')

----------


## mohsen_zelzela00

*اضافه و حذف کردن آیتم به یک لیست*


 <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <a href="#" id="add">add List Item</a><br />
        <a href="#" id="remove">remove List Item</a>

و کد jQ

$(function () {

            var i = $("li").size() + 1;
            $('a#add').click(function () {

                $('<li>' + i + '</li>').appendTo('ul');
                i++;
            });
            $('a#remove').click(function () {

                $('li:last').remove();
                i--;
            });
        });

----------


## mohsen_zelzela00

تغییر اندازه متن توسط end user

<a href="#" id="larger">Larger</a><br />
    <a href="#" id="smaller">Smaller</a>
    <p>
    Event handling in jQuery begins by connectingan event
    </p>



کد jQ

 $(function () {
            $('a').click(function () {

                var os = $('p').css('font-size');
                var num = parseFloat(os, 10);
                var uom = os.slice(-2);
                if (this.id == 'larger') {
                    $('p').css('font-size', num * 1.4 + uom);
                }
                else if (this.id == "smaller") {

                    $('p').css('font-size', num / 1.4 + uom);
                }

            });

        });

----------


## mohsen_zelzela00

*ساختنAccordion Menu

کدهای html
*
 <ul id="accordion">
        <li>
            <div>
                Sports</div>
            <ul>
                <li><a href="#">Golf</a></li>
                <li><a href="#">Cricket</a></li>
                <li><a href="#">Football</a></li>
            </ul>
        </li>
        <li>
            <div>
                Technology</div>
            <ul>
                <li><a href="#">iPhone</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li>
        <li>
            <div>
                Latest</div>
            <ul>
                <li><a href="#">Obama</a></li>
                <li><a href="#">Iran Election</a></li>
                <li><a href="#">Health Care</a></li>
            </ul>
        </li>
    </ul>


کد های css

 #accordion
        {
            list-style: none;
            padding: 0 0 0 0;
            width: 170px;
        }
        #accordion div
        {
            display: block;
            background-color: #FF9927;
            font-weight: bold;
            margin: 1px;
            cursor: pointer;
            padding: 5 5 5 7px;
            list-style: circle;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
        #accordion ul
        {
            list-style: none;
            padding: 0 0 0 0;
        }
        #accordion ul
        {
            display: none;
        }
        #accordion ul li
        {
            font-weight: normal;
            cursor: auto;
            background-color: #fff;
            padding: 0 0 0 7px;
        }
        #accordion a
        {
            text-decoration: none;
        }
        #accordion a:hover
        {
            text-decoration: underline;
        }

و کد jQ

 $(function () {

            $("#accordion > li > div").click(function () {

                if (false == $(this).next().is(':visible')) {
                    $('#accordion ul').slideUp(300);
                }
                $(this).next().slideToggle(300);
            });

            $('#accordion ul:eq(0)').show();

        });

----------


## majidmjh

نحوه نوشتن پلاگین برای jQuery با یک مثال ساده : 

$fn.makeRed = function(){
return $(this).css({"color":"red"})
}

$('div').makeRed()

----------


## majidmjh

نوشتن Enum  برای JavaScript و jQuery:


var MessageType = {         _OK_Cancel: "1",         _OK: "2", _Yes_No: "3"     }

نحوه استفاده : 

var mess =  MessageType._OK

در نتیجه مقدار mess مساوی با عدد 2 می شود .

----------


## ricky22

* يك دست سازي ي و ك دريافتي در صفحات وب* 

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



> دريافت اين اسكريپت: (+)
> 
> نسخه‌ي فشرده شده آن: (+)
> 
> يك پروژه‌ي ساده ASP.NET نمونه در مورد استفاده از آن: (+)
> اين  اسكريپت با IE، فايرفاكس، اپرا ، كروم گوگل و Safari شركت اپل سازگار است و  تفاوتي هم نمي‌كند كه در يك html ساده استفاده شود يا در صفحات ASP  ، PHP  ، ASP.NET ، JSP يا هر چي!

----------


## ricky22

یک ابزار Offline و یک ابزار Online برای امتحان کدهای jQuery
jQueryPadبرنامه‌اي است قابل حمل و كم حجم براي تمرين و همچنين آزمايش سريع  اسكريپت‌هاي مبتني بر jQuery . مي‌توان در قسمت سمت چپ آن قطعه‌ كد HTML  ‌ايي را نوشت و در TextBox سمت راست آن، قطعه‌ كد جاوا اسكريپتي مبتني بر  jQuery . سپس با فشردن دكمه F5 بلافاصله نتيجه‌ي تركيب اين دو در پايين  صفحه نمايش داده مي‌شود. 
-----------
jsfiddle یک ابزار Onlineو یک زمین بازی برای توسعه دهنده گان وب هست . که می توان از ان به برای ویرایش و ایجاد Css , HTML , Javascript استفاده کرد. از این ابزار می توان برای اشتراک گزاری کدهای Javascript نیز استفاده نمود.این ابزار از Framework های مختلف Javascript از جمله jQuery پشتیبانی می کند. توضیحات بیشتر.

----------


## ricky22

بایند کردن یک Function به یک Event :
$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
لیست Event ها را اینجا مشاهده بفرمایید.

----------


## ricky22

مجبور کردن لینک ها به باز شدن در یک Pop up .
jQuery('a.popup').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','hei  ght=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
});

----------


## ricky22

مجبور کردن لینک ها به باز شدن در Tab جدید :
jQuery('a.newTab').live('click', function(){
    newwindow=window.open($(this).href);
    jQuery(this).target = "_blank";
    return false;
});

----------


## ricky22

چک کردن وضعیت فعال یا غیر فعال بودن Cookie :
  var dt = new Date();
    dt.setSeconds(dt.getSeconds() + 60);
    document.cookie = "cookietest=1; expires=" + dt.toGMTString();
    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
    if(!cookiesEnabled)
    {
        //cookies have not been enabled
    }

----------


## ricky22

جایگزاری همه  URL ها در صحفه با لینک قابل کلیک :
$.fn.replaceUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'<a href="$1">$1</a>‘)
            );
        });
        return $(this);
    }
    //usage
    $('p').replaceUrl();

----------


## ricky22

گرفتن URL صفحه جاری :
$(document).ready(function() {
    var pathname = window.location.pathname;
});

----------


## ricky22

اجرای 5 باره ی یک تابع با یک بازه زمانی 20 ثانیه ای
var count = 0; function myFunction() {     count++;     if(count > 5) clearInterval(timeout);     //do something } var timeout = setInterval(myFunction, 20000);

----------


## ricky22

افزودن یک سطر به یک جدول :
$('#myTable tr:last').after('<tr>...</tr>');

----------


## ricky22

گرفتن IP کاربر :
$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
    alert( "Your ip: " + data.ip);
});
اگر امتحان کردید و جواب نداد :
_You are accessing this page from a forbidden country.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 _

----------


## ricky22

3 رقم 3 رقم جدا کردن یک عدد :
<div id="result">12343778</div>
var delimiter = '.';
$('#result').html()
            .toString()
            .replace(new RegExp("(^\\d{"+($this.html().toString().length%3|  |-1)+"})(?=\\d{3})"),"$1" + delimiter)
            .replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

----------


## Saber Mogaddas

> مجبور کردن لینک ها به باز شدن در یک Pop up .
> jQuery('a.popup').live('click', function(){
>     newwindow=window.open($(this).attr('href'),'','hei  ght=200,width=150');
>     if (window.focus) {newwindow.focus()}
>     return false;
> });


سلام 
سوال :این تابع همه لینک های صفحه رو تو popup باز میکنه..؟؟

----------

