PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش jQuery



Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:02
سلام ...

خودم قصد یاد گرفتن جیکوئری رو دارم ..زیاد باهاش کار کردم ولی به دلیل اینکه چند وقتی میگذره بعضی از دستورات رو یادم رفته برا همون شروع کردم از الو به یاد گیری جیکوئری برا همین جالب دونستم قدم به قدم که خودم دارم کار میکنم توی یه پستی با عنوان اموزش جیکوئری تو همین سایت بزارم شاید به درد شما هم خورد

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

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

jquery.com سایت اصلی این زبان هست ..

لینک کتابخونه جیکوئری در گوگل :



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


خب توضیحات دیگه ای نداره فقط اینکه با نرم افزار دریم برای راحتی کارتون استفاده کنید .. و پسوند فایل هاتون هم همون html خوبه و نیازی به سرور و یا سرور ساز ها مثل زمپ و.. ندارید ..

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

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:15
من یادم رفت تو پست قبلی بگم ..اینکه من از رو سایت w3schools سر فصل هارو میگم ...

خب ..برای شروع :

کد های جیکوئری رو باید در بین کد های :



<script>
.
.
.
.
</script>


بنویسید ..

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



$(document).ready(function(){
.
.
.
.
});



فعلا با قسمت ready این تابع کار میکنیم و به قسمت های دیگش کاری نداریم ..

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

همین الان بگم ..عناصری که منظورم هست تک های html هستند ...


خب .. یه مثال که کاری انجام نمیده فقط ساختارشو مد نظر داشته باشید :




$(document).ready(function(){
$("p").click(function(){
.
.
.
.
});
});


همون طور که مشاهده میکنید توی رویداد ذکر شده ..زمانیکه روی عناصر یا همون تک های p کلیک شد این کار هارو انجام بده ..شما میتونید توی قسمت که با رنگ قرمز مشخص کردم p کلاس یا ایدی و یا تگ دیگه ای رو انتخاب کنید ..

برای کلاس حتما باید . رو قبلش بزارید و برای ای دی هم # رو .. حالا بعدا بیشتر توضیح میدم. ..

رویداد داخلی برای این مثال مثلا میتونیم رویداد hide رو تعریف کنیم ..که وقتی روی تگ pکلیک شد اون تگ مخفی بشه اینم مثالش :




$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});


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

اینم مثال کلیش و کامل :




<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:28
خب توی مثال قبلی بخایم یه کم تغییرش بدیم میتونیم سرعت مخفی شدن رو تغییر بدیم ..خیلی راحت میتونیم تو قسمت رویداد hide بگیم به صورت slow باشه یا fast:
به این شکل تغییر بدید و خروجی رو مشاهده کنید :




$(this).hide("slow");

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:31
خب همون طوریک ه قبلا گفتم برای استفاده از کتابخونه جیکوئری میتونید از سایت خود جیکوئری کتابخونرو دانلود و در فایلتون اضاف کنید که میشه این شکلی اگه کنار فایل اصلیتون باشه :



<script src="jquery-1.11.1.min.js"></script>


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

راه دوم استفاده از سایت گوگل هست که خوبیش اینه که همیشه اپدیت هست:



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


و راه سوم هم استفاده از سایت مایکروسافته :



<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:40
خب اینم چنتا مثال برای اینکه بدونید چه جوری برای کلاس و ایدی و تگ ها استفاده کنید :



$("p").hide()


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




$(".test").hide()



این کد هم تمامی کلاس های test رو مخفی میکنه



$("#test").hide()


این دستور هم تمامی ایدی های با نام test رو مخفی میکنه

و اخرینشم :



$(this).hide()


که براش فرقی نداره هر چی دم دست باشه مخفی میکنه هه

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:49
خب بازم چنتا انتخاب دیگه برای انتخاب المنت ها یا عناصر

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



$("*")


اینم تا جایی که میدونم کار همون قبلی رو در سط وسیع تر انجام میده که قبلا هم در موردش گفتم



$(this)


خب بعدی برای انتخاب کلاس intro و تگ های p :



$("p.intro")


برای انتخاب اولین تگ p :


$("p:first")

برای انتخاب اولین li که فرزند ul هست :


$("ul li:first")

برای انتخاب اولین بچه li که فرزند ul هست :


$("ul li:first-child")


برای انتخاب تگ هایی که از خواص hreft استفاده میکنن :


$("[href]")

برای انتخاب تگ a که خواص target آنها برابر _blank میباشد


$("a[target='_blank']")


و اینم انتخاب تگ a هایی که خواص target آنها مخالف با _blank میباشد


$("a[target!='_blank']")

جهت انتخاب دکمه های input


$(":button")

جهت انتخاب tr های زوج


$("tr:even")

و جهت انتخاب tr های فرد


$("tr:odd")

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:51
در صورتی که تمایل داشتید توابع و کد های جیکوئریتون در فایل اصلیتون نباشه میتونید یک فایل جدا بسازید برای مثال test.js و اونو در صفحه اصلیتون اضاف کنید به این شکل :


<script src="my_jquery_functions.js"></script>

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 00:57
خب حالا رویداد click رو بی خیال میشیم ..ما نمیخایم وقتی کاربر روی تگمون کلیک کرد تگمون مخفی بشه ولی خب میزاریم روی دابل کلیک مثلا اگه روی تگ p مون کاربر دابل کلیک کرد تگمون مخفی بشه مثال :



$("p").dblclick(function(){
$(this).hide();
});


اینم مثال کاملش:



<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>


<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>


</body>
</html>

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 01:03
اینم یه رویداد دیگه ....دابل کلیک و کلیک رو گفتیم ..میریم سراغ اینکه اگه موس رفت رو تگمون تگمون مخفی بشه کاری به کلیک و دابل کلیکم نداشته باشه همینکه موس روی تگ مورد نظرمون قرار گرفت تگمون مخفی بشه :



$(document).ready(function(){
$("#p1").mouseenter(function(){
$(this).hide();
});
});


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



<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
$(this).hide();
});
});
</script>
</head>
<body>


<p id="p1">Enter this paragraph.</p>


</body>
</html>





خب یه کد جدیدم بهتون بگم ..اگه بخایم پنجره اخطار و یا پنجره نمیدونم اسمشو چی بگم ..یه متنی رو به صورت پاپ و در پنجره کوچیک خودش نشون بده از دستور alert استفاده میکنیم ..این دستور کارش چاپ کردنه ولی یه پنجره باز میشه و توش مقدار چاپ شدس خودتون ببینید بهتر متوجه میشید

همین مثال بالایی رو تغییر میدیم و به جای اینکه وقتی موس روی تگ با ایدی p1 مون رفت به جای اینکه مخفیش کنه میگیم یه پیغامی رو چاپ کنه

مثال :



$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});


اینم مثال کاملش :



<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>


<p id="p1">Enter this paragraph.</p>


</body>
</html>

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 01:07
توی رویداد mouseenter که توی پست قبلی معرفی کردم ..اگه توجه کرده باشید همین که موس میره بالای متن پیغام نمایش داده میشه و یا مخفی میشه ..از اسمشم پیداس به محظ ورود فعالیت خودشو انجام میده .. ولی یه دستور دیگه هست با نام mouseleave که زمانی فعالیت خودشو شروع میکنه که موس محل تگمون رو ترک کنه ..یعنی وقتی موس میره بالای تک هیچ اتفاقی نمیافته ولی همچین که موس رو از روی تگ کنار میبرین فعالیت خودشو انجام میده ..حالا میخاد پیام چاپ کنه و یا اینکه مخفی کنه مثال :



$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});


مثال کامل :




<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>


<p id="p1">This is a paragraph.</p>


</body>
</html>

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 03:07
خب کنار همین رویداد ها چنتا رویداد دیگه در مورد موس میگم ولی بدون مثال اگه مشکلی داشتین بگین تا توضیح بدم :

رویداد mousedown زمانی که کلیک موس فشار داده میشه فعال میشه

مثال کوچک :


$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});


رویداد mouseup زمانی که کلیک موس رها میشه اجرا میشه

مثال کوچک :



$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 03:12
خب رویدادی که با رفتن موس بالای کد فعال میشد همون رویداد mouseenter یه نموه مشابه این هم هست که میشه از رویداد hover نام برد در css اگه مار کرده باشین وقتی موس میرفت بالای مثلا div و ما بهش خواص hover رو میدادیم فعال میشد و تغییراتی رو در div ما اجاد میکرد مثلا گوشه های باکس رو گرد میکردیم ..حالا تو جیکوئری هم همین کارو انجام میده .. ولی توفاوتی که با mouseenter داره اینه که ما میتونید با استفاده از اون هم mouseenter و هم mouseleave رو فعال کنیم ..مثلا وقتی موس میره بالای کد یه پیغام رو بده و وقتی از رو کد میره کنار یه پیغام ... مثال :



$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});


مثال کامل :



<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>


<p id="p1">This is a paragraph.</p>


</body>
</html>

Abdollahpor
۰۹ ۰۴ -۱۳۹۳, 03:18
رویداد focus و blur ...این دو رویداد روی فرم ها ازشون استفاده میشه ..برای مثال یه فرم ساختیم که نام کاربر رو میگیره ..تگ input توی html ...رویداد focus وقتی روی باکس کلیک میکنیم و میخایم متنی رو وارد کنیم اجرا میشه یعنی زمانی که ون باکس انتخاب شده .. و رویداد blur دقسقا بر عکس همین زمانی که از حالت انتخاب درش میاریم فعال میشه یه مثال :



$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc") (http://kpnu-csc.ir/forum/usertag.php?do=list&action=hash&hash=cccccc%22%29)
});
$("input").blur(function(){
$(this).css("background-color","#ffffff") (http://kpnu-csc.ir/forum/usertag.php?do=list&action=hash&hash=ffffff%22%29)
});
});




وقتی موس میره بالای باکس رنگ #cccccc میگیره و وقتی برداشته میشه رنگ سفید #ffffff میشه .... این قسمت :


$(this).css("background-color","#cccccc") (http://kpnu-csc.ir/forum/usertag.php?do=list&action=hash&hash=cccccc%22%29)


واسه ایجاد کد css استفاده میشه

ali.m
۲۳ ۱۱ -۱۳۹۳, 13:51
سلام دوستان
اگه تعداد زیادی تگ(مثلا a) در داخل یه دیو یا جدول ... داشته باشیم و بخوایم اونا رو یکی درمیون انتخاب کنیم از کد زیر استفاده میکنیم:

$('#div a:even');
و اگه بخواین به اون تگای a استایل بدیم از کد زیر:


$('#div a:even') .addClass('highlight');
highlight یه کلاس هست که در css اضافه میکنیم.
حالا کسی میدونه اگه بخوایم به این تگای a هر کدوم یک استایل خاص بدیم باید چکار کنیم؟
ممکن کسی بگه به زوجا یه استایل میدیم و به فردها یه استایل دیگه.


$('#div a:even') .addClass('highlight1');

$('#div a:odd') .addClass('highlight2');



http://kpnu-csc.ir/forum/attachment.php?attachmentid=2020&stc=1

آیا میشه مثلا به 10 تا تگی که داریم به هر کدوم یه استایل جدا بدیم؟

Man_Utd_4Ever
۲۸ ۱۲ -۱۳۹۳, 13:35
سلام دوستان
اگه تعداد زیادی تگ(مثلا a) در داخل یه دیو یا جدول ... داشته باشیم و بخوایم اونا رو یکی درمیون انتخاب کنیم از کد زیر استفاده میکنیم:

$('#div a:even');
و اگه بخواین به اون تگای a استایل بدیم از کد زیر:


$('#div a:even') .addClass('highlight');
highlight یه کلاس هست که در css اضافه میکنیم.
حالا کسی میدونه اگه بخوایم به این تگای a هر کدوم یک استایل خاص بدیم باید چکار کنیم؟
ممکن کسی بگه به زوجا یه استایل میدیم و به فردها یه استایل دیگه.


$('#div a:even') .addClass('highlight1');

$('#div a:odd') .addClass('highlight2');



http://kpnu-csc.ir/forum/attachment.php?attachmentid=2020&stc=1

آیا میشه مثلا به 10 تا تگی که داریم به هر کدوم یه استایل جدا بدیم؟

اینجوری:

:nth-child(1) { };
:nth-child(2) { };

marjanparsa
۰۹ ۰۴ -۱۳۹۵, 13:11
ممنونم از شما
خون در مدفوع (http://www.darmancolorectal.com/hemorrhoid/%D9%BE%D8%B1%D8%B3%D8%B4-%D8%A7%D8%B2-%D9%85%D8%A7/news/951/%D8%AE%D9%88%D9%86-%D8%AF%D8%B1-%D9%85%D8%AF%D9%81%D9%88%D8%B9)
درمان بواسیر (http://www.darmancolorectal.com/hemorrhoid/hemorrhoid-treatment/news/1547/%D8%AF%D8%B1%D9%85%D8%A7%D9%86-%D8%A8%D9%88%D8%A7%D8%B3%DB%8C%D8%B1-%D8%A8%D8%AF%D9%88%D9%86-%D8%B9%D9%85%D9%84)