Smart Computing

رو انتخاب کردم می تونم اون کلمه رو هم ازش بخونم (کاربرد خاص داره). این بخش توابعی هم برای کنترل عملیاتهای پست سر هم ارائه داده.

o         

o        ایجاد پلاگین: دو تا تابع اساسی برای ایجاد پلاگین برای جی کوئری و توسعه اش.

o         

o        تداخل: معرفی تابعی برای استفاده فریم ورکهای مختلف در صفحه بدون بوجود اومدن مشکل و تداخل به نام noConflict.

 

Selectors: معرفی چگونگی استفاده از Selectorهای قابل استفاده و معتبر برای تابع $.

viewplaincopy to clipboardprint?

1.  // Complex CSS Selectors   

2.  $('#myID > .someClass p + span , a').css('color', '#323232');   

3.    

4.  // Odd TRs   

5.  $('tr:odd').css('color', '#323232');   

6.    

7.  // Inputs which their "name" attribute is NOT equal to "email"   

8.  $("input[name!='email']").css('color', '#323232');  

// Complex CSS Selectors

$('#myID> .someClass p + span , a').css('color', '#323232');

 

// Odd TRs

$('tr:odd').css('color', '#323232');

 

// Inputs which their "name" attribute is NOT equal to "email"

$("input[name!='email']").css('color', '#323232');

Attributes: امکاناتی برای دسترسی به مشخصه ها و اطلاعات Elementها مثل value، href، محتویات داخل تگ و غیره.

viewplaincopy to clipboardprint?

1.  // Changes href of all links to "http://Boplo.ir"   

2.  $('a').attr('href', 'http://Boplo.ir');   

3.    

4.  // Add "someClass" CSS class styles to Odd TRs   

5.  $('tr:odd').addClass('someClass');   

6.    

7.  // Sets 'Hello' as content of #myDiv  

8.  $("#myDiv").html('Hello');   

9.    

10.        // Gets value of input with CSS class "emailInput"   

11.        $("input.emailInput").val();  

// Changes href of all links to "http://Boplo.ir"

$('a').attr('href', 'http://Boplo.ir');

 

// Add "someClass" CSS class styles to Odd TRs

$('tr:odd').addClass('someClass');

 

// Sets 'Hello' as content of #myDiv

$("#myDiv").html('Hello');

 

// Gets value of input with CSS class "emailInput"

$("input.emailInput").val();

 

Traversing: امکانات فوق العاده ای برای کار با نتیجه تابع $ مثل گرفتن Element بالادستی

 

نمونه پیدا شده. عضو بعدی، قبلی، اولی، آخری و غیره. یادگیری این بخش خیلی اهمیت داره.

viewplaincopy to clipboardprint?

1.  // Changes the color of all divs then   

2.  // puts a border around only some of them   

3.  $("div").css("color", "blue").filter(".middle").css("border-color", "red");   

4.    

5.  // Adds a border to divs that are not green or blue.   

6.  $("div").not(".green, #blueone").css("border-color", "red");   

7.    

8.  // Finds all divs and makes a border.   

9.  // Then adds all paragraphs to the   

10.        // jQuery object to set their color yellow.   

11.        $("div").css("border", "2px").add("p").css("color", "yellow");   

12.          

13.        // Finds the very next sibling of each disabled button   

14.        // and changes its text "this button is disabled".   

15.        $("button[disabled]").next().text("this button is disabled");   

16.          

17.          

18.        // Gets Parent of #myP which is a DIV   

19.        // and changes its color to #444   

20.        $("#myP").parent('div').css('color', '#444');   

21.          

22.        // Gets Parent of #myP which is a DIV + #myP itself   

23.        // and changes their color to #444   

24.        $("#myP").parent('div').andSelf().css('color', '#444');  

// Changes the color of all divs then

// puts a border around only some of them

$("div").css("color", "blue").filter(".middle").css("border-color", "red");

 

// Adds a border to divs that are not green or blue.

$("div").not(".green, #blueone").css("border-color", "red");

 

// Finds all divs and makes a border.

// Then adds all paragraphs to the

// jQuery object to set their color yellow.

$("div").css("border", "2px").add("p").css("color", "yellow");

 

// Finds the very next sibling of each disabled button

// and changes its text "this button is disabled".

$("button[disabled]").next().text("this button is disabled");

 

 

// Gets Parent of #myP which is a DIV

// and changes its color to #444

$("#myP").parent('div').css('color', '#444');

 

// Gets Parent of #myP which is a DIV + #myP itself

// and changes their color to #444

$("#myP").parent('div').andSelf().css('color', '#444');

 

Manipulation: توابعی برای تغییر محتویات Elementها. این توابع امکان قرار دادن HTML یا Element رو در Elementهای دیگه میدن. مثلا بخوایم یک پاراگراف رو داخل یک کادر ببریم و غیره.

viewplaincopy to clipboardprint?

1.  // Changes contents of #myP  

2.  $("#myP").html("My Name is Amir Hossein");   

3.    

4.  // Inserts #myP to bottom of #myDiv  

5.  $("#myP").appendTo("#myDiv");   

6.    

7.  // Inserts #myP after #myDiv  

8.  $("#myP").after("#myDiv");   

9.    

10.        // Removes .myClass elements from #myDiv  

11.        $("#myDiv").remove(".myClass");  

// Changes contents of #myP

$("#myP").html("My Name isAmir Hossein");

 

// Inserts #myP to bottom of #myDiv

$("#myP").appendTo("#myDiv");

 

// Inserts #myP after #myDiv

$("#myP").after("#myDiv");

 

// Removes .myClass elements from #myDiv

$("#myDiv").remove(".myClass");

 

CSS: توابعی برای دسترسی و تغییر در مقادیر CSS.

viewplaincopy to clipboardprint?

1.  // Changes font-family of #myP  

2.  $("#myP").css('font-family', 'Tahoma, Arial');   

3.    

4.  // Alerts font-family of #myP  

5.  alert( $("#myP").css('font-family') );   

6.    

7.  // Alerts width of #myP  

8.  alert( $("#myP").width() );  

// Changes font-family of #myP

$("#myP").css('font-family', 'Tahoma, Arial');

 

// Alerts font-family of #myP

alert( $("#myP").css('font-family') );

 

// Alerts width of #myP

alert( $("#myP").width() );

Events: بخش بسیار مهمی برای تنظیم رویدادها برای Elementها مثل click و change و mouseover و غیره.

viewplaincopy to clipboardprint?

1.  // Alerts when #myP is clicked   

2.  $("#myP").click(function() {   

3.      alert('Clicked!');   

4.  });   

5.    

6.  // Alerts when #myForm is submited  

7.  $("#myForm").submit(function() {   

8.      alert('Submited!');   

9.  });   

10.          

11.        // Submits #myForm  

12.        $("#myForm").submit();   

13.          

14.        // Alerts when mouse enters and leaves #myDiv  

15.        $("#myDiv").hover(   

16.            function() {   

17.                alert('Mouse entered!');   

18.            },   

19.            function() {   

20.                alert('Mouse left!');   

21.            }   

22.        );  

// Alerts when #myP is clicked

$("#myP").click(function() {

alert('Clicked!');

});

 

// Alerts when #myForm is submited

$("#myForm").submit(function() {

alert('Submited!');

});

 

// Submits #myForm

$("#myForm").submit();

 

// Alerts when mouse enters and leaves #myDiv

$("#myDiv").hover(

function() {

  alert('Mouse entered!');

},

function() {

  alert('Mouse left!');

}

);

 

Effects: انیمیشن سازی در jQuery شامل توابع محوسازی، اسلاید و تغییر تدریجی مشخصه های CSS.

viewplaincopy to clipboardprint?

1.  // Fades #myP out   

2.  $("#myP").fadeOut();   

3.    

4.  // Fades #myP out slowly and Alerts when fading is finished.   

5.  $("#myP").fadeOut("slow", function(){   

6.      alert('myP is hidden now!');   

7.  });   

8.    

9.  // Slides #myDiv up in 800 miliseconds  

10.        // and after finishing it, Slides it down   

11.        $("#myDiv").slideUp(800, function() {   

12.            $("#myDiv").slideDown();   

13.        });   

14.          

15.        // Changes background-color of #myDiv to pink,    

16.        // width of it to 500px   

17.        // and adds 100px to its height slowly   

18.        $("#myDiv").animate({   

19.            'background-color' : 'pink',   

20.            width: '500px',   

21.            height: '+=100px'  

22.        }, 'slow');  

// Fades #myP out

$("#myP").fadeOut();

 

// Fades #myP out slowly and Alerts when fading is finished.

$("#myP").fadeOut("slow", function(){

alert('myP is hidden now!');

});

 

// Slides #myDiv up in 800 miliseconds

// and after finishing it, Slides it down

$("#myDiv").slideUp(800, function() {

$("#myDiv").slideDown();

});

 

// Changes background-color of #myDiv to pink,

// width of it to 500px

// and adds 100px to its height slowly

$("#myDiv").animate({

'background-color' : 'pink',

width: '500px',

height: '+=100px'

}, 'slow');

 

Ajax: توابع آماده کار با AJAX. برخی از این توابع به Elementها متصل نمی شوند و مستقیما باید به خود شیء jQuery متصل گردند.

viewplaincopy to clipboardprint?

1.  // Sends "name=AHHP&location=Boplo.ir" to some.php  

2.  // as a POST request and Alerts response    

3.  // after successful request   

4.  $.ajax({   

5.      type: "POST",   

6.      url: "some.php",   

7.      data: "name=AHHP&location=Boplo.ir",   

8.      success: function(msg){   

9.          alert("Server Response: " + msg);   

10.            }   

11.        });   

12.          

13.        // Sends HTTP request to some.php  

14.        // Gets #myP from its response and    

15.        // Puts it in #myDiv  

16.        $("#myDiv").load("some.php #myP");  

// Sends "name=AHHP&location=Boplo.ir" to some.php

// as a POST request and Alerts response

// after successful request

$.ajax({

type: "POST",

url: "some.php",

data: "name=AHHP&location=Boplo.ir",

success: function(msg){

  alert("Server Response: " + msg);

}

});

 

// Sends HTTP request to some.php

// Gets #myP from its response and

// Putsit in #myDiv

$("#myDiv").load("some.php #myP");

 

Utilities: توابعی برای سهولت کار در جی کوئری مثل توابع شمارش آرایه و شیء، چک کردن نوع متغیرها، تبدیل شیء به کوئری و غیره.

viewplaincopy to clipboardprint?

1.  // Alerts "name=AHHP&location=Boplo.ir"   

2.  alert( $.param({name:'AHHP', location:'Boplo.ir'}) );   

3.    

4.  // Alerts 'Hello'   

5.  // (Removes unwanted starting and ending spaces)   

6.  alert( $.trim('      Hello           ') );   

7.    

8.  // Alerts: 1, 9, 4, 7, 3, 8, 6, 9, 1   

9.  var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];   

10.        var result = $.grep(arr, function(n, i){   

11.            return (n != 5 && i > 4);   

12.        });   

13.        alert( result.join(", ") );  

// Alerts "name=AHHP&location=Boplo.ir"

alert( $.param({name:'AHHP', location:'Boplo.ir'}) );

 

// Alerts 'Hello'

// (Removes unwanted starting and ending spaces)

alert( $.trim('      Hello           ') );

 

// Alerts: 1, 9, 4, 7, 3, 8, 6, 9, 1

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

var result = $.grep(arr, function(n, i){

return (n != 5&&i> 4);

});

alert( result.join(", ") );

 

Internals: شامل توابعی که کاربرد خیلی خاص دارند مثل تابع data.

viewplaincopy to clipboardprint?

1.  // Stores someName=someValue to #myP    

2.  // then retrieves it by alert   

3.  var myP = $('#myP');   

4.  $.data(myP , 'someName', 'someValue');   

5.  // ....   

6.  alert( $.data(myP , 'someName') );  

// Stores someName=someValue to #myP

// then retrieves it by alert

var myP = $('#myP');

$.data(myP , 'someName', 'someValue');

// ....

alert( $.data(myP , 'someName') );

 

مهمترین خصوصیت jQuery سادگی استفاده اشه. به این ترتیب که ما بدون بلد بودن جاوااسکریپت

 

و فقط با یادگیری سینتکس جی کوئری می تونیم کارهای خیلی زیادی انجام بدیم و نگران چیزی

 

نباشیم. این خصوصیت متمایز jQuery باعث شده تا تعداد کاربرانش خیلی بالا بره یعنی یه جورایی

 

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

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

 

رو آژاکسی کنه و این پلاگین رو به تو بدم و تو فقط استفاده اش کنی. تعداد بالای کاربران تعداد

 

خیلی بالای این پلاگینها رو موجب شده. یعنی اگر به بخش PluginRepository سر بزنی، انقدر

 

پلاگین میبینی که نمی دونی کدوم رو انتخاب کنی. خیلی پلاگینها توی سایت ثبت نشده اند و با

 

سرچ باید پیداشون کرد. این حرف یعنی دامنه توابع و امکانات jQuery خیلی خیلی بیشتر از

 

فهرست بالاست (فهرست بالا شامل همه توابع نیست و فقط یه معرفی از امکاناته). چون امکانی

 

که در توابع خود جی کوئری وجود نداره، احتمالا پلاگینش وجود داره و یا بخاطر سادگی جی کوئری نوشتنش راحته.

مهمترین مشکلش که میتونه حسنش هم به حساب بیاد، اینه که جی کوئری کاملا برای DOM

 

تعریف شده یعنی همه امکاناتش مخصوص اجزای صفحه است و اگر ما بخوایم یکم دسترسی

 

بیشتری داشته باشیم، باید بریم سراغ کدهای عادی جاوااسکریپت. مثلا بخوایم Drag&Drop در

 

صفحه داشته باشیم. باید یا از jQuery UI استفاده کنیم یا با کدهای خام جاوااسکریپت این

 

بخش رو بنویسیم و اونجا تقریبا از جی کوئری هیچ خبری نیست.

این موضوع از این جهت بده که ما رو مجبور می کنه برای کارهای اضافی، کد خام بنویسیم یا

 

فریم ورکهای دیگه ای به صفحه اضافه کنیم و از این جهت خوبه که جی کوئری رو یک فریم ورک

 

مخصوص DOM معرفی می کنه. به این ترتیب که میگه من با خارج از DOM کاری ندارم ولی

 

وقتی با خود DOM کار داری، من به بهترین شکل برات کار انجام میدم و نیازت رو برآورده می کنم.

تمام بخشهایی که در بالا دیدی، خلاصه و معرفی بود. سعی می کنم در بخش جی کوئری همه

 

اش رو مفصل آموزش بدم. اینها همه نظرات و دیدگاه شخص من از jQuery بود. میتونه کامل و

 

عالی، ناقص و پیش پا افتاده یا غلط باشه. برای اطلاعات صحیح و بروز به سایت خود جی کوئری مراجعه کنید.
jQuery در حال توسعه است و در آدرس http://jQuery.com قابل دسترسی و دریافت است. بخش دریافت نسخه های مختلف و دریافت پلاگین ها صفحات مفیدی هستند.

 

و اما آینده:

جی کوئری یک چیز ویژه است. تا موقعی که چیزی بهتر ازش نیاد، همیشه خوبه، همیشه

انتخاب اول کاربرهای غیربرنامه نویسه، همیشه انتخاب اول سایتهای کوچیکه و همیشه کلی طرفدار و فدائی داره.

امکانات اون هر روز داره بهتر و کاملتر میشه، پلاگینهاش هر روز دارند بیشتر و بهتر میشوند اینا

یعنی امروز جی کوئری از دیروزش پربار تره همه اینا به اضافه اینکه بنیاد Mozilla روش سرمایه

گذاری کرده و این یعنی توسعه همیشگی. چون دیگه دست خود تیمش نیست که امسال روش

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

برگ برنده جی کوئری در سادگی، می تونه تابع شکل بودن امکاناتش که همیشه به اجزای DOM متصل میشن باشه یعنی کاربر لازم نیست بدونه که تابع داره چیکار می کنه، کافیه همه

رو پشت هم ردیف کنه و لذت ببره ولی این برای خود جی کوئری زیاد جالب از آب در نیومده! و

توسعه اش رو سخت کرده. چون اگر امکانات بخواد بیشتر بشه باید توابع جدید معرفی بشه یا

شکل توابع قدیم تغییر کنه هر دو اینها سادگی که همیشه مهمترین ویژگی جی کوئری بوده رو

به خطر می اندازه. یعنی دیگه یادگیری جی کوئری در سه چهار ساعت انجام نمیشه و دیگه

بهش نمیشه گفت خیلی ساده. این به نظر من بزرگترین مشکل آینده این فریم ورک خواهد بود.

جی کوئری امکانات جدید رو با اضافه کردن تابع فراهم می کنه که این، تعداد توابع رو زیاد می

کنه و بعضی مواقع با اضافه کردن پارامتر به توابع انجام میشه که خیلی وحشتناکه. به نظرم جی

کوئری داره تبدیل به کوهی از توابع تکراری میشه که فقط حجم رو بالا میبرند و اغلب می تونند

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

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

از این لحاظ من آینده خوبی (مثل چیزی که امروز هست) برای جی کوئری پیش بینی نمی کنم!

و اگر راه حل منطقی برای این مشکلش پیدا نشه در آینده یک سیستم بزرگ و پیچیده خواهد

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

 

منبع :

www.gigapars.com