نویسنده: محسن منوریان

آموزش jQuery – فصل هفتم : پیمایش عناصر html ( Tree Traversal ( .

فصل هفتم :

پیمایش عناصر html : ( Tree Traversal ) :

همانطور که میدانید هر صفحه html از تعدادی تگهای تو در تو تشکیل شده است . هر تگ فرزند تگ بیرونی و پدر تگ های درونی اش می باشد . همچنین به تگ ها ی کنار هم در یک سطح نیز تگ های همسایه گفته میشود .

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

به عنوان مثال در کد روبرو :

 

<html>

 

<head>

 

<title> test page </title>

 

</head>

 

<body >

 

<div>

 

<ul>

 

<li> one </li>

 

<li> two </li>

 

<li> three </li>

 

</ul>

 

</div>

 

</body>

 

</html>

در مثال بالا :

· همه تگ ها فرزند تگ html هستند

· تگ head پدر تگ title و در نتیجه تگ title فرزند تگ head می باشد .

· تگ ها li همسایه یا هم نژاد (برادر یا خواهر ) یکدیگر هستند و همگی فرزند ul هستند و همچنین در سطح بالاتر فرزند تگ div و body و html .

· تگ ul نیز فرزند div و body و html است .

· تگ body همسایه تگ head و فرزند html است .

 

با توجه به تعاریف فوق . توابعی در jQuery برای پیمایش درختی عناصر html ایجاد شده که در این فصل آنها را شرح خواهیم داد :

 

$(selector).children([selector]) :

$(selector).parent([selector]);

تابع children() فرزندهای عنصر انتخابی را بر میگرداند . به عنوان مثال :

 

$(‘ul’).children().css(‘background’,’Red’);

دستور بالا باعث میشود رنگ پیش زمینه تمام تگهای درون تگ ul (فرزند های ul یا همان تگهای li ) قرمز شود .

همچنین شما میتوانید از آرگومان selector استفاده نمایید تا فرزند های خاصی از تگها را انتخاب نمایید .

 

به مثال زیر توجه نمایید :

<div>

<span>Hello</span>

<p class=”selected”>Hello Again</p>

<div class=”selected”>And Again</div>

 

<p>And One Last Time</p>

</div>

اگر در این مثال کد زیر را اجرا کنیم :

$(“div”).children(“.selected”).css(“color”, “blue“);

در این مثال فرزندهایی از تگهای div انتخاب میکند که دارای کلاس selected باشد بنابر این نتیجه دستور فوق :

Hello
Hello Again

And Again

At One Last Time

 

تابع parent() پدر عناصر انتخابی را بر میگرداند (اولین پدر ) .

$(‘li’).parent().addClass(‘listExpander’);

در این مثال به اولین والد عناصر li در صفحه کلاس listExpander را اعمال میکند .

همانند تابع children() این تابع نیز میتواند مقدار selector را قبول کند :

<div class=”one”>

<div class=”two”>

<span class=”text” > click </span>

</div>

<div>

در مثال فوق :

$(‘span’).parent() :

به div با کلاس two اشاره میکند . در صورتی که

$(‘span’).parent(‘.one’) :

به div با کلاس one اشاره میکند .

 

نکته : دقت نمایید که تابع parent() فقط یک عنصر را به عنوان پدر بر میگرداند . اگر بخواهید همه والدهای یک عنصر را برگردانید میتوانید از تابع parents() استفاده کنید :

$(‘span’).parents() :

در این مثال تمام والد های span (یعنی هم div با کلاس two و هم div با کلاس one ) را بر میگرداند .

 

تابع : parentsUntil() :

$(selector).parentsUntil([parent_selector]);

(کلمه until به معنی “تا اینکه ” می باشد و همانطور که از معنی این عبارت مشخص است تابع فوق تمامی والدهای عنصر selector را تا رسیدن به عنصر parent_selector بر میگرداند .

به عنوان مثال اگر در مثال اول این فصل کد زیر را بنویسیم :

$(‘li’).parentsUntil(‘body’).addClass(‘test’);

به تمام تگ های والد li تا تگ body (تگهای ul و div ) کلاس test را اضافه میکند .

 

تابع next() و pv() :

$(selector).next([selector]);

$(selector).pv([selector]);

این دو تابع هم همانطور که از نامشان پیداست برای بدست آوردن عنصر بعدی ( next ) و عنصر قبلی ( pv ) استفاده میشوند :

<ul>

<li>list item 1</li>

<li>list item 2</li>

<li class=”third-item”>list item 3</li>

<li>list item 4</li>

<li class=”test”>list item 5</li>

</ul>

در مثال فوق با اجرای کد :

$(‘li.third-item’).next().css(‘color’, ‘red’);

کد فوق باعث میشود عبارت list item 4 به رنگ قرمز نمایش داده شود .

 

$(‘li.third-item’).next().css(‘color’, ‘blue’);

این کد عبارت list item 2 را به رنگ آبی نمایش میدهد .

$(‘li.third-item’).next(‘.test’).css(‘background-color’, ‘blue’);

این کد عبارت list item 5 را با پیش زمینه آبی نمایش میدهد .

 

$(‘li.third-item’).next(‘.test’).pv().css(‘background-color’, ‘Red’);

این کد عبارت list item 4را با پیش زمینه قرمز نمایش میدهد .

 

نکته : توابع زیر نیز برای پیمایش بهتر عناصر قبلی و بعدی در jquery ایجاد شده اند :

$(selector).nextAll([nextselector])

$(selector).pvAll([pvselector])

تمام عناصر بعد next و قبل pv از selector را بر میگرداند (مطابق با nextselector یا pvselector )

 

$(selector).nextUntil([nextselector])

$(selector).pvUntil([pvselector])

تمام عناصر بعد next و قبل pv از selector را تا عنصر nextselector و pvselector بر میگرداند .

 

 

تابع siblings() :

$(selector).siblings([sibling_selector])

این تابع هم نژاد های selector را بر میگرداند . و در صورتی که sibling_selector مشخص شده باشد مقادیری که با این عناصر مطابق باشند بر می گرداند .

 

<!DOCTYPE html>

<html>

<head>

<script src=”http://code.jquery.com/jquery-latest.js”></script>

</head>

<body >

<ul>

<li > one </li>

<li class=”test” > two </li>

<li class=”test2″ > three </li>

</ul>

<script>

$(“li.test”).siblings().css(“background”, “yellow”);

</script>

</body>

</html>

در مثال بالا به غیر از خود li با کلاس test ، رنگ پیش زمینه زرد به سایر li ها اضافه میشود .

در صورتیکه کد بالا را به شکل زیر تغییر دهیم فقط li هایی انتخاب میشوند که دارای کلاس test2 باشند :

$(‘li.test’).siblings(‘.test2’).css(‘background’,’yellow’);

 

تابع find() :

$(selector).find(find_selector)

تابه find در فرزندهای selector به دنبال find_selector میگردد و آن عنصر را بر میگرداند .

این تابع شبیه تابع children() عمل میکند و تنها تفاوت آن این است که تابع children فقط یک سطح فرزند را جستجو میکند . همچنین در تابع find(selector) پارامتر selector الزامی است (میتوان برای انتخاب همه از عبارت ‘*’ استفاده کرد ) :

$(selector).find(‘*’)

مثال :

<ul class=”level-1″>

<li class=”item-i”>I</li>

<li class=”item-ii”>II

<ul class=”level-2″>

<li class=”item-a”>A</li>

<li class=”item-b”>B

<ul class=”level-3″>

<li class=”item-1″>1</li>

<li class=”item-2″>2</li>

<li class=”item-3″>3</li>

</ul>

</li>

<li class=”item-c”>C</li>

</ul>

</li>

<li class=”item-iii”>III</li>

</ul>

اگر در مثال فوق کد زیر را بنویسیم :

$(‘li.item-ii’).find(‘li’).css(‘background-color’, ‘red’);

این کد رنگ پیش زمینه عبارت های A , B , 1 ,2,3, C را قرمز میکند . اما همین عمل با تابع children تنها بر روی عبارات A,B,C اعمال میشود .

 

 

تابع closest() :

$(selector).closest(closest_selector)

این تابع هم مانند parents() عمل میکند . اما تفاوت هایی بین این دو تابع وجود دارد :

· تابه closest از خود عنصر انتخابی پیمایش را شروع میکند . در صورتی که تابع parents از اولین والد شروع به پیمایش میکند .

· تابع closest عملیات پیمایش را تا رسیدن به عنصر انتخابی (closest_selector ) انجام میدهد در صورتی که در تابع parents ابتدا عملیات تا انتها (root ) انجام میشود . سپس همه عناصر انتخاب شده در یک متغیر temp ریخته شده و سپس آنهایی که مطابق با شرط (عنصر selector ) می باشد را از بین آنها انتخاب میکند . بنابراین سرعت اجرای تابع closest بیشتر است .

· تابع closest میتواند صفر یا یک عنصر بر گرداند در صورتی که تابع parents صفر یا یک یا چند عنصر بر میگرداند .

 

در مثال بالا :

$(‘li.item-a’).closest(‘ul’).css(‘background-color’,’red’)

باعث میشود رنگ پیش زمینه ul با کلاس level-2 قرمز شود .

 

مرجع فصل : http://api.jquery.com/category/traversing/tree-traversal

 

آموزش jQuery – فصل ششم : Ajax in jQuery (ایجاکس در جی کوئری )

فصل ششم :

jQuery و ایجاکس :

Jquery کتابخانه ای بسیار کارآمد برای کار با تکنولوژی Ajax در خود دارد که در این فصل به معرفی آن خواهیم پرداخت .

قبل از شروع باید بدانیم Ajax چیست ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد . این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.

Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .

هسته اصلی ایجاکس شیی به نام XMLHttpRequest می باشد .

بطور مختصر : ایجاکس ارتباط غیر مستقیم و تبادل اطلاعات با وب سرور است بطوریکه همه چیز در بک گراند اتفاق بیافتد و نتیجه فقط در قسمتی از صفحه نمایش یابد بطوریکه کل صفحه نیاز به بازنگری (رفرش ) نداشته باشد .

ایجاکس در jquery :

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .

و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector ) به نمایش در آورید .

در ادامه به بررسی این توابع خواهیم پرداخت :

تابع load :

$(selector).load(url,data,callback)

این تابع فایل موجود در آدرس url را خوانده و پس از اجرای کامل نتیجه را در عنصر انتخابی (Selector ) نمایش میدهد .

یک مثال ساده :

فرض کنید فایلی با نام loadtxt.txt در پوشه files سرور دارید و میخواهید با کلیک روی دکمه ای آن را در صفحه به نمایش در آورید :


<html>

<head>

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

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(‘#result’).load(‘files/loadtxt.txt’);

});

});

</script>

</head>

<body>

<button>Click to Load Data</button>

<div id=”result”></div>

</body>

</html>

پس از اجرای این برنامه با کلیک روی دکمه محتوی موجود در فایل تکست در تگ div نمایش می یابد .

تابع load دو آرگومان دیگر دارد . آرگومان data : زمانی که شما میخواهید یک اسکریپ زبان سرور را (فایلهای php یا asp یا aspx و … ) از سرور بخوانید و باید دیتایی را برای پردازش به آن اسکریپت بفرستید توسط این آرگومان این کار را انجام میدهید .

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

مثال :

فرض کنید شما در پوشه files در سرور فایلی به نام loadname.php دارید که محتوای آن بصورت زیر است :

<?php

$name = $_REQUEST[‘name’];

echo ‘Welcome ‘.$name;

 ?>

کار این برنامه این است که نامی را به عنوان داده دریافت میکند و پیام خوش آمد را نمایش میدهد .

حال میخواهید برنامه ای بنویسید که کاربری در جعبه Text یک نام وارد نماید و پس از کلیک روی دکمه . نام به فایل فوق فرستاده شود و نتیجه نمایش داده شود و پس از اتمام کار پیغامی نمایش دهد :


<html>

<head>

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

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

var inputname = $(‘input#name’).val();

$(‘#result’).load(‘files/loadname.php’,{name:inputname},finish_load);

});

});

function finish_load()

{

alert(‘load finish’);

}

</script>

</head>

<body>

Please Enter Your Name :

<input type=”text” id=”name” />

<button>Click to Load Data</button>

<dir id=”result”></dir>

</body>

</html>

همان طور که در کد فوق میبینید پس از کلیک روی دکمه button ابتدا توسط تابع val مقدار موجود در textbox را خوانده و در متغیر inputnum قرار میدهیم . سپس با استفاده از دستور load این مقدار را به فایل loadname.php می فرستیم و در پایان هنگامیکه پاسخ از سرور داده شد و پیام خوش آمد نمایش یافت تابع finish_load اجرا میشود و عبارت “load finish” بر روی صفحه نمایش داده خواهد شد .

نکته 1 : تابع val() : این تابع مقدار یک عنصر فرم را برمیگرداند و در صورتی که مقدار داشته باشد آن مقدار را به خصوصیت value عنصر انتخابی selector نصبت میدهد.

$(selector).val(content);

نکته 2 : در صورتی که چند داده را میخواهید به عنوان data به سرور ارسال نمایید آنها را داخل } و { قرار داده و هر داده را با کاما “,” از داده بعدی جدا نمایید :

{var1:value1,var2:value2,var3:value3}

تابع $.ajax(option) :

سطح پایین ترین تابع کار با ایجاکس در جی کوئری تابع ajax می باشد . برای استفاده از این تابع باید تمام پارامتر های ارسال را توسط آرگومان option به سرور ارسال نماییم .

مثال ساده :

$.ajax({

url: ‘ajax/test.html’,

success: function(data) {

$(‘.result’).html(data);

alert(‘Load was performed.’);

}

});

در این مثال تابع ajax فایل test.html را از سرور فراخوانی کرده و نتیجه را در عنصری با کلاس result نمایش میدهد .

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

تابع : $.get و $.post :

$.post(url,data,callback,type);

$.get(url,data,callback,type);

این دو تابع همان طور که از نامشان پیداست با دو متد مختلف post و get اسکریپت url را از سرور فراخوانی نموده و نتیجه را توسط تایع callback برمیگردانند.

  • url : آدرس اسکریپتی که سمت سرور باید اجرا شود
  • Data : داده هایی که به سرور فرستاده میشود : {name:value,name:value,…}
  • Callback : تابعی است که هنگامی که داده ها از سرور به طور کامل بارگزاری شد صدا زده میشود .
  • Type : نوع داده های خروجی از سرور را مشخص میکند و میتواند مقادیر (html,xml,json,jasonp,script,text) باشد

تنها تفاوت این دو تابع در نوع ارسال داده به سرور است که اولی از متد post استفاده مینماید و دومی از متد get . بنابراین در صورتی که میخواهید فقط فایلی را از سرور بازخوانی نمایید و قصد ارسال داده به سرور را ندارید، بهتر است از تابع get استفاده نمایید . (و یا تابع load ) .

(اگر در مورد این دو متد آشنایی ندارید به آموزش زبانهای برنامه نویسی تحت سرور مانند php یا asp مراجعه نمایید ).

مثال :

مثالی که در بالا برای تابع ajax نوشته شد را با تابع get بصورت زیر میتوان نوشت :

$.get(‘ajax/test.html’, function(data) {

$(‘.result’).html(data);

alert(‘Load was performed.’);

});

و یا مثالی دیگر : در این مثال میخواهیم همان مثالی را که در ابتدای فصل برای تابع load نوشتیم با تابع post بنویسیم . در این صورت قسمت کد ما به شکل زیر تغییر خواهد کرد :

$(document).ready(function(){

$(“button”).click(function(){

var inputname = $(‘input#name’).val();

$.post(‘files/loadname.php’,{name:inputname},function(Data){

$(‘#result’).html(Data);

finish_load();

});

});

});

همان طور که در مثال میبینید . تابع callback با مقدار data پس از فراخوانی کامل loadname.php صدا زده میشود و در این تابع مقدار data که همان نتیجه اجرای اسکریپت loadname.php است توسط دستور html(data) در عنصر با آیدی result نمایش می یابد .

تابع getScript :

$.getScript(url,callback)

تابع getScript ، برای فراخوانی و اجرای یک فایل جاوااسکریپت ( js ) به کار برده میشود .

این تابع ساده شده تابع ajax با فرمت زیر می باشد :

$.ajax({

url: url,

dataType: ‘script’,

success: success

});

مثال :

$.getScript("test.js");

این مثال باعث فراخوانی و اجرای فایل test.js میشود .

$.getScript("https://blog.monavarian.ir/test.js", function(){

alert("Script loaded and executed.");

});

در مثال فوق فایل test.js در آدرس blog.monavarian.ir فراخوانی میشود و در صورتی که فراخوانی با موفقیت انجام شود پیغام مناسب نمایش می یابد .

نکته : میتوانید از این تابع هنگامی استفاده نمایید که میخواهید متغیر های سراسری را در یک فایل جداگانه قرار دهید و بعد در برنامه ها از آن استفاده نمایید .

تابع getJSON :

$.getJSON(url,data,callback);

این تابع برای فراخوانی فایل با فرمت Jason از سرور می باشد .

توی پرانتز ( مختصری درباره Jason ) :

فایلهای Jason ، فایلهای داده ای هستند که داده ها را با فرمت خاصی ذخیره میکنند . مانند فایلهای xml فایلهای Jason نیز دارای یک فرمت خاص برای ذخیره اطلاعات می باشند .

ساختار هر شی jason به صورت روبرو می باشد :

{string : value , string:value , … }

Value ها میتوانند شامل مقادیر string , object , number , array , true , false , null باشند .

ساختار Array در jason نیز به فرم زیر می باشد :

[item1,item2,item3,…]

هر item نیز خود میتواند شامل مقادیر معرفی شده در بالا باشد .

برای کسب اطلاعات بیشتر به سایت مرجع Jason به آدرس http://www.json.org مراجعه نمایید .

یک مثال کلی با post : در این مثال قصد داریم فرمی را توسط توابع jquery بررسی کرده و سپس توسط تابع post به سرور فرستاده و نتیجه را نمایش دهیم :

برای مثال میخواهیم یک فرم ساده ورود ایجاد نماییم . فایل اسکریپت forms.php بررسی میکند که نام کاربری و کلمه عبور داده شده در لیست کاربران موجود است . در صورتی که موجود باشد مقدار 1 و در صورتی که موجود نباشد مقدار صفر را بر میگرداند . محتوی این فایل به صورت زیر است :

<?php

//user defind :

$users = array (

‘admin’ => ‘demo’,

‘test’ => ‘test’,

‘user’ => ‘pass’,

);

$username = trim($_POST[‘username’]);

$pass = trim($_POST[‘password’]);

if ( array_search($pass,$users) == $username )

echo ‘1’;

else

echo ‘0’;

?>

این فایل را در پوشه files ذخیره میکنیم .

در فایل اصلی html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

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

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<script type=”text/javascript”>

$(document).ready(function(){

$(‘input’).focus(function(){

$(‘input’).removeClass(‘select’);

$(this).addClass(‘select’);

});

$(‘form’).submit(function(event){

event.preventDefault();

var user = $(‘input#username’).val();

var pass = $(‘input#pass’).val();

if (!user)

{

$(‘.result’).html(‘please Enter username’);

$(‘input#username’).focus();

}

else if(!pass)

{

$(‘.result’).html(‘please Enter password’);

$(‘input#pass’).focus();

}

else

{

$.post(‘files/forms.php’,{username:user,password:pass},function(data){

if (data == ‘1’)

{

$(‘.result’).html(‘Login Success <br/> welcome ‘+user);

$(‘form’).hide();

}

else if (data == ‘0’)

$(‘.result’).html(‘username or password is not correct’)

else

$(‘.result’).html(‘can not connect to server’)

})

}

return false;

})

})

</script>

<title>Form Validation</title>

<style>

.result {

color:#FF0000;

}

.select {

background:#fff;

border:2px solid #0000ff;

}

</style>

</head>

<body>

<div class=”result” > </div>

<form action=”#” >

<input type=”text” name=”username” id=”username” />

<input type=”password” name=”pass” id=”pass” />

<input type=”submit” value=”Login”/>

</form>

</body>
</html>

همان طور که در کد بالا مشاهده می کنید . در ابتدا هنگام submit فرم بررسی میکند و در صورت خالی بودن فیلدهای username و یا pass پیغام مناسب درج میکند و سپس نشانگر را به فیلد خالی هدایت می کند (focus ) .

در صورتی که username و pass وارد شده باشد . این مقادیر را به فایل forms.php میفرستد و در نتیجه بررسی میکند : در صورتی که نتیجه فرستاده شده از سرور 1 باشد پیغام خوش آمد نمایش میدهد و فرم را مخفی (hide ) می نماید در غیر این صورت پیغام مناسب را درج می نماید.

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

فصل سوم :

jQuery Effects :

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

افکت های موجود : Hide, Show, Toggle, Slide, Fade , Animate

Hide & Show :

توسط دو تابع hide() و show() میتوانید عناصر صفحه را پنهان یا آشکار نمایید :

$(“#btnhide”).click(function(){
$(“p”).hide();
});
$(“#btnshow”).click(function(){
$(“p”).show();
});

در کد فوق هنگامی که روی عنصری در صفحه با آیدی btnhide کلیک شود پاراگرافهای درون صفحه (تگهای p ) پنهای میشوند و با کلیک روی عنصر با آیدی btnshow کلیک شود پاراگرافها نمایش میبابند .

این دو تابع دو پارامتر speed و callback نیز می پذیرند :

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

پارامتر speed میتوانید مقدارهای ‘slow’ , ‘fast’ , ‘normal’ و همچنین مقداری به میلی ثانیه بپذیرد .

پارامتر callback تابعی است که هنگامی که عمل show یا hide به طور کامل انجام شد صدا زده میشود .

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

در مثال فوق با کلیک روی button پاراگراف p ظرف مدت 1000 میلی ثانیه پنهان میشود .

$(“button”).click(function(){
$(“p”).hide(‘slow’,function(){ alert(‘hide is finished’); } );
});

در مثال فوق با کلیک روی button پاراگرافهای p بصورت آهسته پنهان میشوند و پس از پنهان شدن پیغام ‘hide is finished’ بر روی صفحه نمایش می یابد .

 

Toggle :

این افکت وضعیت عنصر مربوطه را از hide به show و بلعکس تبدیل میکند . یعنی اگر عنصر پنهان باشد با اجرای این افکت عنصر پیدا میشود و اگر پیدا باشد پنهان میشود .

$(“#line”).click(function(){
$(“#lineinfo”).toggle();
});

در کد فوق با کلیک روی عنصری با آیدی line مشخصات آن عنصر که در عنصر دیگری با آیدی lineinfo قرار دارد نمایش می یابد و با کلیک مجدد پنهان میشود .

این افکت هم همانند دو افکت قبلی دارای دو پارامتر speed و Callback می باشد .

 

Slide :

$(selector).slideDown(speed,callback)

این دستور selector را با سرعت speed به سمت پایین باز میکند .

$(selector).slideUp(speed,callback)

این دستور selector را با سرعت speed به سمت بالا جمع میکند (hide )

$(selector).slideToggle(speed,callback)

این دستور نیز selector را بین دو وضعیت باز و بسته تعویض مینماید .

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

 

Fade :

این افکت ها نیز برای نمایش و پنهان کردن عنصر استفاده میشود با این تفاوت که نوع پنهان کردن و نمایش دادن عناصر در این دستوران متفاوت است و با تغییر شفافیت )opacity ) انجام میشود.

$(selector).fadeIn(speed,callback)

این تابع عنصر selector را در صفحه نمایان میکند .

$(selector).fadeOut(speed,callback)

این تابع عنصر selector را در صفحه مخفی میکند .

$(selector).fadeTo(speed,opacity,callback)

این تابع پارامتری به عنوان opacity میپذیرد که میزان شفافیت را بین دو عدد 0 و 1 تعیین میکند که عدد 1 یعنی کاملا آشکار و عدد 0 یعنی پنهان و عنصر را بع اندازه عدد شفافیت ، شفاف میکند .

مثلا :

$(“button”).click(function(){

$(“div”).fadeTo(“slow”,0.25);

});

در کد فوق با کلیک روی button عنصر div درون صفحه به آرامی شفاف میشود تا به 25 درصد شفافیت برسد .

 

Custom Animation :

$(selector).animate({params},[duration],[easing],[callback])

پارامتر params پارامترهایی را میپذیرد که قرار است همزمان با هم بر روی selector اعمال شوند .

مثلا :

animate({width:”70%”,opacity:0.4,marginLeft:”0.6in”,fontSize:”3em”});

تمام پارامتر ها درون {} نوشته میشوند و با کاما ‘,’ از هم جدا میشوند . هر پارامتر با عنوان و سپس “:” و بعد مقدار آن مشخص میشود .

پارامتر duration مانند پارامتر speed در افکت های قبلی عملی میکند که میتواند مقادیر ‘slow’ , ‘fast’ , normal و یا عددی به میلی ثانیه را در بر بگیرد .

<script type=”text/javascript”>
$(document).ready(function(){
$(“#start”).click(function(){
$(“#box”).animate({left:”100px”},”slow”);
$(“#box”).animate({fontSize:”3em”},”slow”);
});
});
</script>

در قطعه کد فوق وقتی روی عنصر با آیدی start کلیک میشود عنصر #box در صفحه اول 100 پیکسل به سمت چپ رفته و سپس نوشته های داخلش به اندازه 3em خواهد شد .

میتوان خطهای 4 و 5 را در یک خط نوشت :

$(“#box”).animate({left:”100px”, fontSize:”3em”},”slow”);

که البته در این حالت هر دو مقدار همزمان با هم به #box اعمال خواهد شد.

نکته : تابع stop() هم برای متوقف کردن افکت در حال اجرا استفاده میشود :

$(selector).stop();

 

 

نکته مهم : میتوان توابع را بجای نوشتن در خطهای جداگانه ، پشت سر هم به یک عنصر اعمال کرد مثلا :

$(‘#box’).fadeIn(1000);

$(‘#box’).animate({left:”100px”},’slow’);

$(‘#box’).fadeOut(1000);

بجای کدهای فوق که همه بر روی یک عنصر اعمال میشوند میتوان نوشت :

$(‘#box’).fadeIn(1000).animate({left:”100px”},’slow’).fadeOut(1000);

 

سوال : چرا تابع Callback باید استفاده شود ؟

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

به مثال زیر توجه نمایید :

$(“button”).click(function(){
$(“p”).hide(1000);
alert(“The paragraph is now hidden”);
});

در این مثال ما میخواهید هنگامی که پاراگراف به طور کامل پنهان شد عبارت “the paragraph is now hidden ” نمایش یابد . اما در عمل این اتفاق نمی افتد زیرا در حین انجام عمل hide خط بعدی فرمان صدا زده خواهد شد و این امر باعث تداخل خواهد شد .

اما به این مثال دقت نمایید :

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

function my_alert()
{
alert(“The paragraph is now hidden”);
}

در این مثال از تابع my_alert به عنوان تابع Callback استفاده شده . در این حالت دقیقا بعد از اتمام افکت hide تابع my_alert صدا زده میشود .

مثال : در مثال زیر قصد داریم تعدادی لینک در صفحه قرار دهیم که با رفتن موس روی آنها توضیح مختصر با افکت مناسب نمایش یابد :

<html>

<head>

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

<script type=”text/javascript“>

$(document).ready(function(){

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

$(this).next(‘div.info’).slideDown(‘slow’);

})

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

$(this).next(‘div.info’).slideUp(‘slow’);

});

});

</script>

<style>

ul {

list-style:none;

margin:0;

padding:0;

}

ul li {

padding:3px;

background:#EEE;

border:1px solid #000000;

width:200px;

margin:2px;

}

.info {

padding:5px;

background:#FFF;

color:#000;

display:none;

}

</style>

</head>

<body>

<ul>

<li>

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

<div class=”info“>mohsen monavarian Weblog</div>

</li>

<li>

<a href=”http://share.wanted.ir“ >wanted.ir </a>

<div class=”info“>The First shared TextBoxes in Iran</div>

</li>

<li>

<a href=”http://www.res2ran.com“ >Res2Ran.com </a>

<div class=”info“>Shiraz restuarants And FastFoods Guide , Food instructions</div>

</li>

</ul>

</body>

</html>

همانطور که در کد بالا مشاهده میکنید در قسمت کد jquery دو تابع برای رویدادهای mouseover و mouseout تگهای a (لینکهای صفحه ) نوشته شده که تابع اولی باعث نمایش تگ div.info با افکت slideDown میشود و تابع دومی نیز با افکت slideUp تگ را مخفی می کند .

شما میتوانید به جای slideDown و slideUp از افکت های دیگری که در این فصل بیان شد استفاده نمایید .

نکته : تابع next :

$(selector1).next(selector2);

این تابع به دنبال عناصر انتخابی مطابق با selecotr2 میگردد که پس از عنصر selector1 در صفحه موجود باشد . مثلا در کد بالا دنبال اولین عنصر div با کلاس info بعد از عنصر جاری (که همان تگ a انتخاب شده است ) می گردد .

فیلمنامه کوتاه “آنچه فرشته گفت…” نوشته محمدرضا احمدزاده

متن زیر فیلمنامه کوتاهی است تحت عنوان “آنچه فرشته گفت ” که آقای محمد رضا احمد زاده برامون ارسال کرده اند .

فيلمنامه «آنچه فرشته گفت…»

نويسنده: محمدرضا احمدزاده

خانه- جلوي در ورودي- روز

 تصوير قسمت زيرين درِ خانه ديده مي شود. پس از چند لحظه در باز مي شود و پاي مردي كه وارد خانه شده در كادر قرار مي گيرد.

 

                                                                        برش به:

دستشويي- چند دقيقه بعد

 تصوير قدم هاي همان مرد ديده مي شود كه وارد دستشويي مي شود. دوربين گام هاي آهسته مرد را دنبال مي كند تا اينكه به سينك صورتشويي مي رسد. دوربين بالا مي رود و تصوير مرد را در آينه نشان مي دهد كه به خود مي نگرد. صداي مرد از بيرون قاب تصوير شنيده مي شود.

 

             مرد(بيرون قاب)    از آخرين نوشته اي كه روانه دنياي زيباي كاغذهاي

                            كاهي كرده بودم ماه ها مي گذشت.

 

مرد شير آب را باز كرده و شروع به شستن صورتش مي كند.

 

           مرد (بيرون قاب)     جمعه بود و مثل همه جمعه ها … دلگير… خسته

                                     كننده و كسالت آور…

مرد شير آب را مي بندد و با صورت خيس به تصوير خود در آينه مي نگرد.

 

                                                            برش به:

اتاق- شب – داخلي

 

مرد در كنار پنجره اتاقش ايستاده و به چراغ هاي روشني كه در تاريكي شهر نمايانند نگاه مي كند، اما هيچ حسي در چشمانش نيست.

 

            مرد (بيرون قاب)    مدت ها بود كه ديگه مثل سالهاي نوجواني كه

                             دست از قلم و كاغذ برنمي داشتم عاشق نبودم…

                             فكرم خشك و خشن شده بود…

                             من هيچوقت براي شعر گفتن فكر نميكردم… شعر خودش

                            قلم رو  در دستم ميگذاشت ؛ انگشتهام رو به قلم مي فشرد

                        و كلمات رو بر كاغذ جاري مي كرد… اما اون شب اولين باري

                         بود كه آگاهانه انتظار شعري رو ميكشيدم ؛ اما شعري نيومد!

                        ميخواستم به كسي زنگ بزنم تا كمي باهاش حرف بزنم… اما

                        نميدونستم … نميدونستم دقيقا با چه كسي چه كاري دارم…

                        كسي هم به من زنگ نمي زد.

مرد از پنجره فاصله مي گيرد و با گامهاي آهسته از كادر خارج مي شود.

دوربين به سمت پنجره كه نمايي نسبتا زيبا از شهر را به ما مي نماياند نزديك ميشود.

 

                    مرد (بيرون قاب)     انگار همان شب تمام شلوغي هاي دنيا

                                               خاموش شده بود.

 

                                                                        برش به:

سمتي ديگر از اتاق- چند دقيقه بعد

 

تمام چراغ هاي اتاق روشن است. مرد برروي تخت خواب دراز كشيده و چشم هايش را بسته است.

 

                 مرد (بيرون قاب)    ميخواستم گريه كنم اما اشكهام بيرون نمي آمدند

                                      و در عوض از درون  ذره ذره منو ميخوردند.

                                      از قبل همه برقهاي اتاقم رو روشن گداشتم تا وقتي

                                      چشمهام رو مي بندم فقط سياهي نبينم…

                                       تا شايد كمي نور تو اونهمه سياهي از ديواره پلكهام

                                      به مردمك تيره چشمام نفوذ كنه … اما اون شب نور

                                      تو هيچ معبري نمي گنجيد.

 

مرد از جايش بر مي خيزد و به سمت كليد برق مي رود و آن را مي زند. تعدادي از چراغها خاموش مي شوند. او به سمتي ديگر رفته و كليد ديگري را مي زند.

اتاق كاملا تاريك است. از نمايي بسته تصوير صورت مرد در تاريكي ديده ميشود.

به كمك نورضعيفي كه از بيرون وارد اتاق مي شود ميز تحرير او در حاليكه يك چراغ مطالعه روي آن وجود دارد ديده ميشود. ناگهان چراغ مطالعه روشن ميگردد. مرد باسرعت و به گونه اي كه وحشت در چشمهايش موج مي زند به سمت ميز و چراغ برميگردد. به سمت ميز ميرود و به آن مي رسد. از ديد مرد تصوير چراغ روشن و چند برگ كاغذ و خودكاري برروي آنها ديده ميشود. مرد به سيم برق چراغ نگاه ميكند. آن را مي گيرد و تا انتهاي آن دنبال مي كند. تا اينكه به دوشاخه آزاد چراغ مي رسد كه بر روي زمين افتاده است. او با ترس از ميز دور مي شود. نگاهي دوباره به چراغ مي كند و سپس از هوش مي رود و برروي تخت مي افتد.

 

                                                                                  برش به:

اتاق- چندي بعد

 

براي چند لحظه تنها سياهي ديده مي شود.

 

                  مرد (بيرون قاب)    شبيه فرشته هايي بود كه مادربزرگها

                                        نشاني اونا رو به بچه ها ميدن… اما من هرگز

                                        مادربزرگم رو نديده بودم كه برام تعريف كرده باشه

                                        تا بفهمم كه اون فرشته بود… يا نه…

 

از ديد مرد: پلكهاي او به آرامي باز ميشود و تصوير روشن مي گردد. اتاق بسيار روشن است. اولين چيزي كه ديده مي شود دختري است با صورتي نوراني و لباس سراسر سفيد كه در مقابل او ايستاده است.

 

             دختر       بلند شو…

 

دختر دست مرد را گرفته و به او كمك مي كند تا برخيزد. سپس او را به سمت ميز تحريرش مي آورد. مرد روي ميز تحرير مي نشيند.

 

            مرد(بيرون قاب)       چيزي تو گوشم گفت كه بعد از اون شب هرچه

                                    سعي كردم نتونستم به ياد بيارم…

 

دختر چيزي درگوش مرد مي گويد. سپس قلم را بر ميدارد و در دستان او ميگذارد

و دستهايش را بر قلم مي فشارد.

 

          دختر        (باصدايي طنين انداز)    بنويس… هرچه بايد بنويسي بنويس!

 

مرد هنوز چشم از صورت او برنداشته است.

 

          دختر         بنويس…

 

مرد از او روي برميگرداند و شروع به نوشتن مي كند.

تصوير دست مرد و نوشته هايش ديده مي شود. درحاليكه صداي مرد شنيده ميشود كه آنچه مينويسد در ذهن تكرار ميكند.

             مرد(بيرون قاب)      به صداي قدم هاي منتظرانه كوچه گوش مي كنم.

                                    او هم عزم خوابيدن نكرده…

                                    او هم در انتظار است. گويي كسي قرار است در

                                    واپسين ساعات تاريكي بغض صدا را  بشكند…

                                    كوچه به فكر گريه ايست كه كسي برايش صدا ميشود

                                    كسي برايش اشك مي شود. ميگويند او هرشب به

                                    كوچه سر ميزند… من كه هنوز نخوابيدم… ولي چرا

                                    وقتي صداي پاهايش را مي شنوم ديگر بيدار نيستم…

                                    ديگر بيدار نيستم.

 

                                                                 ديزالو به:

همانجا- چند ثانيه بعد

 

مرد درحاليكه قلم در دست دارد به خوابي عميق فرو رفته است.

 دوربين از بالاي سر او ارتفاع ميگيرد و محيط اتاق را نشان مي دهد. درحاليكه مرد خوابيده و هيچ جزئي حركت نمي كند و اثري هم از فرشته نيست.

 ارسال شده در 16 اسفند 1388

 

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

 });

});

آموزش jQuery – فصل اول

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

گفتم خودم شروع کنم به نوشتن آموزش جی کوئری (jquery ) .

البته فعلا فصل فصل میذارم و وقتی آموزش تمام شد همه رو بصورت یک فایل pdf برای دانلود خواهم گذاشت .

لطفا برای تکمیل این کتاب الکترونیکی مشکلاتتون رو با این آموزش  بیان کنید .

آموزش jquery

فصل اول : کلیات jquery

Jquery چیست ؟

Jquery  یک کتابخانه بسیار مفید برای جاوااسکریپت است .

Jquery بسیار ساده و کارآمد است و مشکل جاوااسکریپت را برای تطابق با بروزرهای مختلف برطرف نموده .

یادگیری jquery بسیار آسان است .

در Jquery  کد جاوااسکریپت از فایل html جدا شده و بنابراین کنترل کد ها و بهینه سازی آنها بسیار ساده تر خواهد شد .

Jquery  توابعی برای کار با ایجاکس فراهم نموده و در این زمینه نیز کار را بسیار ساده کرده است .

 

پیش نیازها :

برای دانستن jquery  باید با زبانهای html  ، CSS  و جاوااسکریپت آشنایی داشته باشید .

 

چگونه از زبان jquery استفاده کنیم ؟

شما تنها نیاز دارید که آخرین نسخه jquery  را از سایت http://jquery.com بصورت رایگان دانلود کنید . این فایل یک فایل جاوااسکریپت با پسوند js است که باید آن را در فایل html خود  در قسمت  <head> فراخوانی نمایید .

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

بعد میتوانید کد های جیکوئری مورد نظر خود را در یک تگ جاوااسکریپت جداگانه بنویسید .به عنوان مثال :

<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>

به عنوان مثال قطعه کد زیر هنگامی که روی عبارت “Click Me ” کلیک شود این تگ پنهان (hide ) میشود .

<html>

<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
</head>

<body>
<p> Click Me <p>
</body>

</html>

همان طور که در کد بالا میبینید تمام کدهای jquery   درون یک تابع به نام $ نوشته شده و قابل استفاده هستند .

 به جای حرف $ میتوان از نام کامل آن  jQuery  استفاده کرد .

در خط اول کد (خط پنجم قطعه کد بالا ) تابعی را هنگامی که برنامه ما آماده اجراشدن است صدا میزنیم ( هنگامی که رویداد ready  از شی document صدا زده شده است ) .

در این تابع میگوییم (خط دوم کد ) : هنگامی که روی همه تگهای “p” کلیک شد تابعی صدا زده شود که کارش این است که این تگ  (تگی که رویش کلیک شده ) را پنهان (hide  ) نماید .

به همین سادگی . حال اگر صد تا تگ p هم در قسمت body فایل خود بنویسیم . هنگامی که روی هرکدام کلیک میشود این تابع اجرا میشود .

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

نکته : شما همچنین میتوانید کدهای خود را در یک فایل  js جداگانه بنویسید و سپس آن را  پس از فراخوانی کتابخانه jquery.js ، فراخوانی نمایید :

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

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

 برنامه ide مناسب برای jquery :

شما میتوانید کدهای jquery را در تمام برنامه های طراحی وب مانند Dreamweaver Zend Studion , Eclips, بنویسید اما معروفترین محیط برای برنامه نویسی jquery در حال حاضر نرم افزار open source به نام AptanaStudio است که برای کد نویسی جاوااسکریپت نوشته شده اما کتابخانه jquery هم به آن اضافه شده که البته در این زمان که بنده مشغول نوشتن این آموزش هستم باید نرم افزار را جداگانه دانلودنمایید و کتابخانه راهنمای jquery را جداگانه تهیه و بر روی آن نصب کنید :

نرم افزار Aptana  را از سایت http://www.aptana.com دانلود نمایید .

کتابخانه jquery را که برای Aptana تهیه شده از سایت  http://www.bitstorm.org/edwin/jquery       دریافت نمایید .

( دریافت مستقیم از همین وبلاگ : لینک دریافت : https://blog.monavarian.ir/wp-content/aptana_jquery-111_sdoc.zip)

وارد نر افزار Aptana  شوید :

به قسمت Windows -> Show view -> Other همانند شکل زیر وارد شوید :

jquery تصویر اول

پنجره زیر نمایش میابد . مانند شکل در قسمت Aptana views  روی Prefrences کلیک کنید :

محیط AptanaStudio

در پنجره preferences روی دکمه Add  کلیک کنید . به مسیر فایل کتابخانه jqury (شامل دو فایل js و sdoc ) بروید و آن را به پنجره اضافه کنید :

افزودن کتابخانه jquery شامل js و sdoc

همان طور که در تصویر فوق میبینید . این کتابخانه به Aptana اضافه شده است . حال در صورتی که یک فایل html یا js باز کنید . میتوانید درون آن هنگام نوشتن کدهای jquery از پنجره راهنما استفاده نمایید :

ادیتور ide برای jquery . جی کوئری

در صورتی که این پنجره باز نشد برای باز کردن آن میتوانید از کلید های ترکیبی Ctrl+Space  استفاده نمایید .

متن فیلمنامه کوتاه نوشته ستاره حداد

( خانم ستاره حداد این فیلمنامه رو برای این وبلاگ فرستادن که البته نام فیلمنامه رو نمیدونم . و امیدوارم خودشون بیان و نامش رو هم برامون بذارن . دوستان بازدید کننده هم لطف میکنن و پس از خوندن، نقد و نظراتشون رو با ارسال پیام به گوش ایشون میرسونن )

بین دوسیاهی
روز- خارجی- خیابان (پیاده رو)(فید این)
p.o.v -۱ دختری که در حال راه رفتن است و صدای نفسهایش به گوش می رسد که با صدای گریه همراه است. بینی اش را بالا می کشد.
روز- خارجی- خیابان (پیاده رو)
۲- p.o.v همان دختر که به پاهایش نگاه می کند که در حین راه رفتن است و از روی جوبی می گذرد و صدای همهمه ی مردم که در پیاده رو هستن و با هم حرف می زنند صداهای اطراف کم شده و تصویر در تصویر بعد حل می شود.
شب- داخلی- اتاق خواب
۳- p.o.v دستهای دختر که در حال تایپ کردن است .

شب- داخلی- اتاق خواب
۴- INSERT از مانیتور و نشان دادن یاهو مسنجر که دختر در حال چت کردن است . متن درون صفحه
Armin:web midi
Asal:
Armin:alo alo …!
روز- خارجی- خیابان (پیاده رو)
p.o.v -۵ همان دختر به راهش ادامه می دهد قدمهای سریعش کم کم آرام می شود صدای گریه اش کم می شود صدای نفسش بیشتر به گوش می‏رسد.به کوچه ای می رسد کوچه دست راستش است به داخل کوچه می پیچد.
روز- خارجی- کوچه
۶- نمایی از ساختمانی ۱۸ طبقه نمای low angle
روز- خارجی- کوچه
p.o.v -۷ دختر قدمهای آرامش را به طرف همان خانه بر می دارد و خیلی آرام ادامه می دهد صدای نفسهایش به گوش می رسد صدای خش خش کفشهایش روی زمین …. به خانه نزدیک می شود.
روز- خارجی- کوچه
۸- p.o.v نشان دادن دستهای دختر که کیلد در در می اندازد و وارد ساختمان می شود .
روز- داخلی- ساختمان
۹- p.o.v دختر به طرف آسانسور می رود نشان دادن دستش با همان نما که دکمه ی آسانسور را می زند آسانسور باز شده وارد آسانسور شده .صدای نفسهایش دوباره با گریه اش همراه می شود. طبقه ی ۹ را فشار می دهد. همین طور که آسانسور بالا می رود تصویر با تصویر دیگری قاطی می شود .
شب- داخلی- خانه
۱۰- تصویر دوم که با تصویر پلان نه قاطی شده: ( دم در داخلی خانه ) نمایی دو نفره(two shot- m.s) از دختر و پسری است که دختر در حال در آوردن کفشهایش است. دختر :آرمین من زود باید برما. آرمین: بیا حالا تازه سر شب… . تصویر کم رنگ شده و به پلان بعد ملحق می شود.

روز- داخلی- ساختمان
۱۱- insert از ال سی دی ای که نشان می دهد به طبقه ی ۹ رسیده صدای دینگ دینگ آسانسور :طبقه ی نهم .
روز- داخلی- ساختمان
۱۲- در آسانسور باز شده و p.o.v دختر که به سمت یکی از چهار واحد می رود و سرش را روی در می گذارد. صداهایی از واحدها به گوش می رسد( صدای آهنگ از واحد ۲۵ … اینجا تهران یعنی شهری که….)،( صدای گریه ی بچه از واحد ۲۶… صدای زنی که از همان واحد است:سارا شیشه ی نگارو بیار…)،دوربین از واحد۲۷ می گذرد صداها کم شده و به حالت p.o.v همان دختر می رسد که سرش را روی در گذاشته و فقط صدا از همان واحد می آید…(… صدای پر تنش زنی است که در حال حرف زدن است: سه روز خونه نیومده ..آره همه جا سپردیم … دیگه نمی دونم به … از طرفی دیگر صدای مردی به گوش می رسه… :گورباباش…. مگه اولین بارشونه که معلوم نیست کدوم قبرستونی می زارن می رن همیشه می گفتن اینسری نگفته رفته… صدای زن با مرد قاطی می شه . زن با گریه ادامه می ده: عسل تا سر کوچه می خواست بره خبر می داد چی می گی تو؟!!… _ صدای کوبیده شدن در_)
روز- داخلی- ساختمان
۱۳-p.o.v دختر که با قدمهای نسبتا سریع به طرف آسانسور رفته سوار آسانسور شده و دکمه ی طبقه ی ۱۸ را فشار داده.
روز- داخلی- راهرویی که به آخرین طبقه _بالا پشت بام_ ختم می شه.
۱۴- p.o.v همان دختر که پله ها را بالا می رود صدای هق هق گریه اش به گوش می رسه … . وقتی به بالا پشت بام نزدیک می شه و متوجه باز شدن در بالا پشت بام می شود جلوی گریه اش را می گیرد …. و سکوت بر همه جا حاکم می شود.
روز- خارجی- بالا پشت بام
۱۵- p.o.v دختر صدای نفسهایش به گوش می رسد در بالا پشت بام باز وارد پشت بام می شود صدای پیرزنی از پشت کولر به گوش می رسد:نغمه تویی… نغمه … بیار مامان بقیه ی ملافه هارو… . وقتی صدایی نمی شنود از پشت کولر بیرون می آید و نگاهی به دختر می کند، پس چرا حرف نمی زنی..؟ دختر دو سه قدم وارد بالا پشت بام شده و کمی جلو می رود … . صدای پیرزن هم چنان به گوش می رسد: عسل کجا بودی ؟ مادرت در به در دنبالت می گشت … بنده خدا خودشو هلاک کرد…. . صدای زن کمرنگ می شود … دختر به لبه ی پشت بام نزدیک می شود به آسمان نگاه می کند صدایی در گوشش می پیچد… : ( آرمین چی کار کنم الان خیلی دیره … من که نمی تونم برم خونه…. . صدای یه دختر دیگه:…عسل چقدر نق می زنی بابا حالا دو ساعت دیر تر می ری … چیه؟ ننه بابات رات نمی دن خونه…؟) دختر چشم از آسمان بر می دارد و از بالای ساختمان به پایین نگاه می کند صدای تپش قلبش به گوش می رسد بعد از هر صدای تپش به اندازه ی یک فریم تصویری را در ذهنش به یاد می آورد… تپش اول… یک میزپراز مشروب،ورق،جاسیگاری، صدای خنده … صدای آهنگ… . دوباره نمایی p.o.v از دختر که به کف خیابان نگاه می کند و به همین ترتیب صدای ضربان قلبش تپش دوم … نشان دادن محیطی شلوغ پولوغ (پارتی) در خانه … تصویر در اتاق خوابی را نشان می دهد که یک پسر(آرمین) در را باز کرده … . دوباره نمایی p.o.v از دختر که به کف خیابان نگاه می کند … تپش سوم… ادامه ی تصویر قبل پسر به دختری که مدام از او نمای پی او وی را داشتیم و در همان تصویر باز هم به صورت پی او وی است اشاره می کند … بیا تو دیگه … و همچنان صدای شلوغی اطراف …خنده…آهنگ…حرف و… .دختر به حالت خود بر می گردد همچنان به زمین خیره است و تصویری را در خیابان می بیند از جمله راه رفتن مادری با دخترش… رد شدن موتوری از کوچه به طرف خیابان و… .صدای نفسهایش هنوز به گوش می رسد صدای مادرش در گوشش می پیچد…. _سه روزه خونه نیومد…_ گور باباش… گورباباش…_ عسل هیچوقت بدون اجازه نمی رفت…_ صداها در هم تلفیق می شوند و خیلی تن کمی به خود می گیرند… . دختر که همان عسل است بیشتر دلا شده… صدای پیرزن به گوشش می رسد…: عسل بیا کنار دخترم نیوفتی ، خونه رفتی؟…. برو پیش مامانت … بنده خدا خیلی نگرانت بود…من دارم می رم پایین …صدای خش خش دنپایی پیر زن به گوش می رسد… . عسل بالای لبه ی پشت بام رفته صدای تپش قلبش به گوش می رسد ….تمام دیالوگها از اول فیلم تا آخری که پیرزن گفت نیوفتی دخترم در ذهنش مرور می شود… .
روز- خارجی- بالا پشت بام
۱۶- p.o.v دختری که از بالا پشت بام خودش را به پایین پرت کرده… تمام صداها در ذهنش همچنان مرور می شود همراه با صدای قلبش که تند می زند ، نیم متر مانده به اینکه به زمین برسد فید اوت می شود… تیتراژ پایانی روی صفحه آمده است و با صداهای مردم که ظاهرا دور دختر جمع شده اند و صدای همهمه و شلوغی فیلم به اتمام می رسد… .

 پایان

نویسنده : ستاره حداد

آذر ماه 88

دانلود متن کامل چند نمایشنامه طنز نوشته وودی آلن (pdf )

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

وودی آلن متولد یک دسامبر ۱۹۳۵ بروکلین، نیویورک آمریکا میباشد. او که در یک خانواده یهودی متولد شد، هشت سال از دوران کودکی اش را در مدرسه یهودیان سپری کرد. پس از آن در دبیرستانی به نام میدوود به تحصیلاتش ادامه داد. در آن زمان موهای قرمز رنگ او باعث شده بود تا در بین دوستان و هم کلاسی‌هایش به «قرمز» معروف شود. آلن با هدف کسب درآمد، به نوشتن قطعات طنز و فروش آنها همت گمارد، این فطعات در ستون‌های طنز روزنامه‌ها به چاپ می‌رسید. پس از آن در سال ۱۹۵۳ در دانشگاه سینمایی نیویورک ثبت نام نمود و بلافاصله در دوره‌ای به نام «تولیدات سینمایی» مردود و مجبور به ترک دانشگاه شد. از آن پس به مدت دو سال با دستمزدی معادل هفته‌ای ۲۰ دلار، به نویسندگی برای کمدینی به نام دیوید آلبر مشغول بود. سپس وارد تلویزیون شد و به نوشتن متون برنامه‌های تلویزیونی پرداخت. آلن از نوجوانی نواختن کلارینت را آغاز کرد، با ورود به برنامه‌های تلویزیونی، او اسم کوچک Woody Herman، نوازنده مشهور کلارینت را بر خود نهاد. آلن به مدت پنج سال در تلویزیون به فعالیت پرداخت و در نهایت تصمیم گرفت استعدادش را در زمینه بازیگری نیز امتحان کند. اولین حضور او در مقام بازیگر در سال ۱۹۶۰ در کلوپی در شهر منهتن بود. شخصیت کمدی متفاوت و خلاق او به سرعت نگاهها را به سوی خود معطوف کرد. در سال ۱۹۶۳ او به عنوان مهمان در اغلب برنامه‌های گفتگوی تلویزیونی ظاهر می‌شد. از میان آلبوم‌هایش می‌توان به Nightclub Years  و Stand-Up Comic اشاره کرد. در آلبوم Stand-Up Comic وودی آلن یکی از بهترین کارهایش را ارائه کرده‌است، او تجربه پنج سال کار در تلویزیون را با فعالیت هاش در برنامه‌های طنز به هم آمیخت و در یک محصول گرد آورد. توازن و اعتماد موجود در صدایش به زیبایی با شنونده ارتباط برقرار می‌کند. این آلبوم چکیده فعالیت‌های او بین سالهای ۱۹۶۴ تا ۱۹۶۹ است. نخسیتین فیلمنامه او «تازه چه خبر، پیشی» بود. نخستین فیلمی که کارگردانی کرد «چه خبرها، سوسن پلنگی» بود، که در اصل فیلمی ژاپنی بود که فقط آن را با گفتار خنده‌آوری دوبله کرد. نخستین فیلمی که به معنای رایج کارگردانی کرد «پولو بردار و در رو» بود. بعد در فیلم «دوباره بزنش سام» بازی کرد. در ۱۹۷۷ تولید و بازی در «آنی هال» برای او ۳ جایزه اسکار (برای بهترین کارگردان، بهترین فیلمنامه و بهترین فیلم ) به ارمغان آورد که سر آغاز دوران تازه و مهمی در کار او شد.

 

لیست فیلم های وودی آلن بعنوان بازیگر:

What’s New Pussycat (1965) …. Victor

Casino Royale (1967) …. Jimmy Bond – Dr. Noah

Take the Money and Run (1969) …. Virgil Starkwell

Hot Dog (1970) TV series …. Regular (1970-71)

Men of Crisis: The Harvey Wallinger Story (1971) (TV) …. Harvey Wallinger

Bananas (1971) …. Fielding Mellish

Play It Again, Sam (1972) …. Allan

Everything You Always Wanted to Know About Sex * But Were Afraid to Ask (1972) …. The Fool / Fabrizio / Victor Shakapopulis / Sperm #1

Sleeper (1973) …. Miles Monroe

Love and Death (1975) …. Boris Grushenko

The Front (1976) …. Howard Prince

Annie Hall (1977) …. Alvy Singer

Manhattan (1979) …. Isaac Davis

Stardust Memories (1980) …. Sandy Bates

A Midsummer Night’s Sex Comedy (1982) …. Andrew

Zelig (1983) …. Leonard Zelig

Broadway Danny Rose (1984) …. Danny Rose

Hannah and Her Sisters (1986) …. Mickey

Radio Days (1987) (voice) (uncredited) …. The Narrator

King Lear (1987) (uncredited) …. Mr. Alien

New York Stories (1989) …. Sheldon

Crimes and Misdemeanors (1989) …. Cliff Stern

Scenes from a Mall (1991) …. Nick Fifer

Shadows and Fog (1991) …. Kleinman

Husbands and Wives (1992) …. Prof. Gabriel ‘Gabe’ Roth

Manhattan Murder Mystery (1993) …. Larry Lipton

Don’t Drink the Water (1994) (TV) …. Walter Hollander

The Sunshine Boys (1995) (TV) …. Al Lewis

Mighty Aphrodite (1995) …. Lenny

Everyone Says I Love You (1996) …. Joe Berlin

Deconstructing Harry (1997) …. Harry Block

The Impostors (1998) (uncredited) …. Audition Director

Antz (1998) (voice) …. Z

Company Man (2000) (uncredited) …. Lowther

Small Time Crooks (2000) …. Ray

Picking Up the Pieces (2000) …. Tex Cowley

The Curse of the Jade Scorpion (2001) …. CW Briggs

Hollywood Ending (2002) …. Val

Anything Else (2003) …. David Dobel

Scoop (2006) …. Sid Waterman

 

لیست فیلم های وودی آلن بعنوان کارگردان:

What’s Up, Tiger Lily? (1966)

Take the Money and Run (1969)

Men of Crisis: The Harvey Wallinger Story (1971) (TV)

Bananas (1971)

Everything You Always Wanted to Know About Sex * But Were Afraid to Ask (1972)

Sleeper (1973)

Love and Death (1975)

Annie Hall (1977)

Interiors (1978)

Manhattan (1979)

Stardust Memories (1980)

A Midsummer Night’s Sex Comedy (1982)

Zelig (1983)

Broadway Danny Rose (1984)

The Purple Rose of Cairo (1985)

Hannah and Her Sisters (1986)

Radio Days (1987)

September (1987)

Another Woman (1988)

New York Stories (1989) (segment “Oedipus Wrecks”)

Crimes and Misdemeanors (1989)

Alice (1990)

Shadows and Fog (1991)

Husbands and Wives (1992)

Manhattan Murder Mystery (1993)

Bullets Over Broadway (1994)

Don’t Drink the Water (1994) (TV)

Mighty Aphrodite (1995)

Everyone Says I Love You (1996)

Deconstructing Harry (1997)

Celebrity (1998)

Sweet and Lowdown (1999)

Small Time Crooks (2000)

The Curse of the Jade Scorpion (2001)

The Concert for New York City (2001) (TV) (segment “Sounds from the Town I Love”)

Sounds from a Town I Love (2001) (TV)

Hollywood Ending (2002)

Anything Else (2003)

Melinda and Melinda (2004)

Match Point (2005)

Scoop (2006)

Cassandra’s Dream (2007)

Vicky Cristina Barcelona (2008)

Whatever Works (2009)

You Will Meet a Tall Dark Stranger (2010)

و امادر جشنواره ها :

  • اسکار بهترین کارگردانی برای فیلم آنی هال، ۱۹۷۷
  • اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم آنی هال (همراه مارشال بریکمن)، ۱۹۷۷
  • نامزد اسکار بهترین بازیگر نقش اول برای فیلم آنی هال
  • نامزد اسکار بهترین کارگردانی برای فیلم صحنه‌های داخلی
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم ‌صحنه‌های داخلی
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم منهتن (همراه مارشال بریکمن)
  • نامزد اسکار بهترین کارگردانی برای فیلم دنی رز برادوی
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم دنی رز برادوی
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم رز ارغوانی قاهره
  • اسکار بهترین فیلم‌نامه اقتباسی برای فیلم هانا و خواهرهاش، ۱۹۸۶
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم هانا و خواهرانش،
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم روزگار رادیو،
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم جرم‌ها و بزهکاری‌ها،
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم آلیس،
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم شوهران و زنان،
  • نامزد اسکار بهترین کارگردانی برای فیلم گلوله‌ها بر فراز برادوی، ۱۹۹۴
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم گلوله‌ها بر فراز برادوی، ۱۹۹۴(همراه داگلاس مک گرث)
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم آفرودیت توانمند، ۱۹۹۵
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم شالوده‌شکنی هری، ۱۹۹۷
  • نامزد اسکار بهترین فیلم‌نامه غیر اقتباسی برای فیلم امتیاز نهایی، ۲۰۰۵

——————————————————————

لینک های زیر