طراحی سایت و تجارت آنلاین آواتم

انتخاب عناصر تک فرزند “only-child”
ممکنه این جمله رو متوجه نشید:
“اگه عنصری ، تنها عنصرِ عنصر والدِ خودش باشه ، انتخاب میشود”
پس بیشتر توضیح میدم:
اگه داخل عنصر والد ، 2 تا عنصر فرزند داشته باشیم:

<ul><li></li><li></li></ul>

یعنی ul پدر ، 2تا فرزند li داره ، ولی اگر فقط یک فرزند داشته باشد:

<ul><li></li></ul>

 سلکتور only-child در جی کوئری ، فقط عناصری را انتخاب میکند که هیچ عنصر مشابهی ، قبل یا بعد آنها وجود نداشته باشد. در کد زیر ، فقط li هایی که تک فرزند باشند ، border آبی میگیرند.

$("ul li:only-child").css("border", "3px solid blue");

انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه first کار میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند و border قرمز به آن میدهد .

$("div p:first-child").css("border":"1px solid red");

انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند  و border قرمز را به آن میدهد .

                                     $("div p:first-child").css("border":"1px solid red");

انتخاب عنصر آخر
“Last” عنصر آخر را از بین تعدادی عنصر انتخاب میکند.کد زیر آخرین پاراگراف را انتخاب میکند و border سبز را به آن میدهد .

$("p:last").css("border":"1px solid green");

انتخاب last-child یا فرزند آخر
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه Last کار میکند.کد زیر آخرین پاراگراف داخل تگ div را انتخاب میکند و border قرمز را به آن میدهد .

$("div p:last-child").css("border":"1px solid green");

انتخاب فرزند n ام
nth-child فرزند n ام را از بین تعدادی عنصر انتخاب میکند. کد زیر سومین پاراگراف داخل تگ div را انتخاب میکند و رنگ متنش را آبی میکند.

$("div p:nth-child(3)").css("color":"blue");

انتخاب عنصر دارای خصوصیت
با این انتخابگر میشود عناصری را انتخاب کرد که Attribute های خاصی دارند.مثلا با کد زیر همه عکس‌هایی که خصوصیت Alt داشته باشند را انتخاب میکند و  border قرمز را به آن میدهد .

$('img[alt]').css("border":"4px solid red");

منفی کردن انتخابگر با not
هنگامی که میخواهیم نتیجه را برعکس کنیم از این انتخابگر استفاده میکنیم ، کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد.

$("input:checked").css({"border":"3px black solid"});

کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد ، که با اضافه کردن :not ، چک باکس های تیک نخورده رو انتخاب میکنیم:

$("input:not(:checked)").css({"border":"3px black solid"});

gt: انتخاب عناصر بزرگتر
اگه چندتا پاراگراف داشته باشیم و بخواهیم پیش زمینه پاراگراف سوم به بعد را عوض کنیم، میتوانیم از انتخابگر gt (Greater than…) استفاده کنیم:

$('p:gt(3)').css("background":"yellow");

کد بالا از بین همه پاراگراف ها، فقط پاراگراف سوم به بعد (4 و 5 و 6 و…) را انتخاب میکند.

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

انتخاب همه عناصر (*)

$(*).hide()

با کد زیر میتوانید همه عناصر صفحه را فراخوانی کنید.در این مثال همه عناصر با کلیک شدن ، hide میشوند.

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

انتخاب عناصر در حال حرکت (animated)

با کد زیر میتوانیم عناصری را که درحال حرکت هستند را انتخاب کنیم:

$("div:animated").hide()

انتخاب عناصر با خصوصیت دلخواه
برای انتخاب عناصر بر اساس خصوصیت ها از کد زیر استفاده میکنیم.
کد زیر لینک هایی که خاصیت href آنها با عبارت http شروع شود را hide میکند.

$('a[href^="http"]').hide()

انتخاب دکمه ها

کد زیر به همه button ها حاشیه 3 پیکسلی میدهد . در این کد نحوه اعمال یک کد CSS به یک عنصر را می ببینید.

$(":button").css({"border":"3px black solid"});

انتخاب چک‌باکس ها

 کد زیر به همه چک‌باکس ها  حاشیه 3 پیکسلی میدهد .

انتخاب Input های از نوع File
برای انتخاب Input هایی که خصوصیت type آن‌ ها مقدار file دارد و برای انتخاب یک فایل جهت آپلود در سایت استفاده میشوند :

$("input:file").css({border:"3px black solid"});

انتخاب عنصرهای check شده
این سلکتور checkbox ها و radio هایی را  که تیک خورده اند (انتخاب شده اند) را انتخاب میکند.

$("input:checked").css({"border":"3px black solid"});

در کد زیر با انتخاب هر دکمه رادیویی موجود در صفحه ، مقدار value آن ، در یک عنصر جدید که کلاس .log دارد ، نمایش داده میشود :

$("input").click(function(){ $(".log").html( $(":checked").val() + " is checked!" ); });

انتخاب عناصر فرزند

درست مثل CSS میتوانیم در jQuery هم ، عناصر فرزند رو فراخوانی کنیم :

$("ul.class1 > li").css({border:"3px black solid"});

انتخاب بر اساس محتوا
با کد contains میتوانیم عنصری که متن خاصی داخلش وجود دارد را انتخاب کنیم.
کد زیر هر پاراگرافی که کلمه pasargad-graphic.com داخلش باشد را  نارنجی میکند.

$("p:contains('pasargad-graphic.com')").css("color", "orange");

انتخاب عنصرهای غیرفعال (disabled)
کد زیر کلمه “DISABLED” را در همه input هایی که غیرفعال شدند مینویسد:

$("input:disabled").val("DISABLED");

انتخاب عنصرهای فعال (enabled)
کد زیر برای همه input هایی که فعال هستند حاشیه قرمز میگذارد:

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

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

<a></a> <li></li> <td></td>

کد زیر همه تگ‌های خالی که داخل تگ body باشند را انتخاب میکند ، متن Empty Tag را داخلشان مینویسد و رنگ پیش زمینه آنها را قرمز میکند :

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

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

$("li:eq(0)").css("color","blue" );

برای انتخاب عنصر دوم:

$("li:eq(1)").css("color","blue" );

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

کد زیر پاراگراف‌های زوج رو آبی میکند:

$("p:even").css("color","blue");

کد زیر پاراگراف‌های فرد رو قرمز میکند:

$("p:odd").css("color","red");

انتخاب چند عنصر
برای انتخاب یه عنصر، از کدزیر  استفاده میکنیم :

$(".myclass1").css("color":"orange");

با قواعد دستوری جیکوئری شما میتوانید  عناصر HTML را انتخاب کنید و عملیات مورد نظر خود را بر روی آنها انجام  دهید.

ساختار اصلی یک دستور جیکوئری : 

$(selector).action()

 :$  برای دسترسی به جیکوئری  به کار میرود.

   : selector برای جستجوی عناصر HTML  به کار میرود.

   :action()عملی را که که بر روی عنصر بایستی  انجام شود مشخص میکند

برای یک ID خاص دستور فوق استفاده میکنیم :

$("#IDname").hide()

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

$(div).hide().

برای مخفی کردن المنت جاری از دستور فوق استفاده میکنیم : 

$(this).hide()

برای یک کلاس خاص دستور فوق استفاده میکنیم : 

$(".classname").hide()

جی کوئری چیست ؟ یک چارچوب جاوا اسکریپت است که هدف آن آسان ساختن استفاده از  جاوا اسکریپت در صفحات طراحی وب سایت شماست. jQuery یک کتابخانه از جاوا اسکریپت است که پیمایش اسناد اچ تی ام ال ، رسیدگی به رویدادها، متحرک سازی و تعاملات ای جکس (AJAX) را به منظور توسعه سریع وب تسهیل می کند. jQuery به گونه ای طراحی شده است تا روشی را که با آن جاوا اسکریپت را می نویسید تغییر دهد.شما می توانید جی کوئری را به صورت یک لایه انتزاعی توصیف کنید زیرا قابلیت های بسیاری را که می باید در خطوط بیشماری از کد جاوا اسکریپت می نوشتید گرفته و آنها را در توابعی (functions) که می توانید تنها در یک خط کد فراخوانی کنید پنهان می کنند.

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

 تکنولوژی Jquery که از فرزندان Java Script می باشد و طراحی سایت را متحول نموده است. جی کوئری توسط جان رزیگ ساخته شده است و توسط تیم جیکوئری در سایت Jquery.com در حال به روز رسانی می باشد یکی از پایه طراحی وب سایت های امروزی را میتوان  Jquery نامید.

تمامی کدهای جیکوئری را میتوان بوسیله ی جاوااسکریپت بازنویسی کرد.

ولی تفاوت این زبان :: Write less, Do more :: است. شعار جیکوئری خلاصه ی تفاوت جیکوئری و جاوا اسکریپت است. یعنی با کمترین نوشتن، بیشترین کارها را میتوان با Jquery انجام داد.

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

دستور if
if  از دو قسمت شرط)شروط) و دستورات تشکیل شده. دستور if به دو صورت زیر به کار می روند.

در نوع اول شرط داخل پرانتز بررسی می شود و اگر شرط برقرار باشد دستورات داخل کروشه انجام می شود، در غیر این صورت جاوا شرط if رو رها کرده و به سایر دستورات می پردازد.از نوع دوم هنگامی استفاده می شود که بخواهیم در صورت درست نبودن شرط نیز دستوری دیگر انجام شود. یعنی در این دستور شرط بررسی می شود و اگر درست بود دستورات۱ اجرا می گردددر غیر این صورت دستورات۲ اجرا می شوند.

می خواهیم صفحه ای ایجادکنیم که پس از ورود کاربر به آن صفحه، کادری به او نمایش دهیم و از او بپرسیم ” آیا شما مایلید رنگ صفحه را تغییر دهید؟ ” و با انتخاب دکمه ok توسط کاربر، رنگ زمینه صفحه تغییر کند و با انتخاب cancel رنگ زمینه به همان صورت سفید باقی بماند.

توضیحات:

دستور confirm یک کادرپیام با دو دکمه ok و cancel را نمایش می دهد که با انتخاب ok مقدار true و با انتخاب cancel مقدار false برگردانده می شود که این مقدار در متغیر c ریخته می شود. در خط بعد، شرط را به این صورت نوشته ام که اگر مقدار c، true بود رنگ زمینه صفحه تغییر کند، در غیر این صورت یعنی اگر مقدار c ، false شد (انتخاب cancel) رنگ زمینه تغییری نکند

دستور switch

switch یکی دیگر از دستورات شرطی است و با آن می توان شرط های چندگانه را بررسی کرد.

مثال: در این مثال صفحه ای طراحی می کنیم که با یک پیام از کاربر می خواهد که یکی از حروف نام برده شده را وارد کند سپس حرف را تشخیص داده وبا توجه به انتخاب کاربر، رنگ متن را تغییر دهد.

توضیحات:

ابتدا توسط prompt حرف وارد شده را از کاربر می گیریم و آن را در متغیر colors ذخیره می کنیم، سپس با دستور switch بررسی می کنیم که کاربر چه رنگی را انتخاب کرده. مثلا در اولین Case، شرطی نوشتیم که اگر مقدار متغیر colors ، R بود، رنگ متن قرمز شود و…

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

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

اشیا در جاوا اسکریپت:

بعضی از اشیاء از قبل در جاوا تعریف شده اند. به دلیل گستردگی آنها، قصد نداشتم در مورد این اشیاء توضیح بدم ولی از اونجایی که بعضی از این اشیاء حتما به کارتون میاد تصمیم گرفتم در انتهای هر جلسه ای که زیاد سنگین نیست شما رو با یکی از آنها آشنا کنم. که در این جلسه با شیء Date آشنا می شوید.

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

<script type="text/javascript">
       document.write("<h1>This is a header</h1>");
       document.write("<p>This is a paragraph</p>");
       document.write("<p>This is another paragraph</p>");
 </script>

تعریف متغییر:

- انواع متغیر در جاواسکریپت:

دو نوع متغیر داریم :

1) ابتدایی

 2) اشیا

متغیرهای ابتدایی:

به دسته های زیر تقسیم میشوند:

 String و Number و Boolean و null و undefined

از null زمانی استفاده کنید که بخواهید عامدانه بگویید که تا به حال مقداری برای متغیر مورد نظر تعریف نشده است. مثل var varNovalueYet = null و از undefined زمانی استفاده

-سایر متغیر هایی که می شناسیم همگی object یا شی هستند که عبارتند از Object و Array و Function

تعریف شی:

-         به روش زیر یک ی ایجاد میکنیم

var person1 = new Object;

person1.firstName = "John";

person1.lastName = "Doe";

alert( person1.firstName + " " + person1.lastName );

syntax:

var person2 = {

firstName: "Jane",

lastName: "Doe"

};

یک دستور جاوا اسکریپت JavaScript یک فرمان به مرورگر است . هدف این دستورات این است که به مرورگر بگویید که چه کاری باید انجام دهد.
این دستور جاوا اسکریپت JavaScript به مرورگر می گوید که "Hello " را بر روی صفحه وب نشان دهد:

document.write("Hello");

جاوا اسکرپت چیست؟

جاوا اسکرپت یک زبان اسکرپت نویسی تحت وب است که برای افزایش پویایی صفحات HTML استفاده می شود. از این زبان می توان برای ارزیابی اعتبار فرمهای HTML قبل از ارسال به سرور، ایجاد انواع منو ها، شناسایی مرورگر کاربران و بسیاری کارهای دیگر استفاده کرد.

زبان های برنامه نویسی تحت وب  به دو دسته تحت کاربر  و تحت سرور  تقسیم بندی می شوند.
زبان های تحت کاربر زبان هایی هستند که بوسیله مرورگر و فقط بر روی کامپیوترهای مشتری اجرا می شوند. در واقع برای اجرای این گونه زبان ها به سرورها نیازی نیست. زبان هایی همچون
JAVASCRIPT و CSS ،HTMLاز این دست هستند.در مقابل این زبان ها ، زبان های تحت سرور وجود دارند که برای اجرا نیاز به سرور ها داشته ، اینگونه زبان ها امکان برقراری ارتباط با پایگاه داده  را دارند. زبان هایی همچونASP،PHPو   JSPاز این دست هستند.

زبانJavaScriptیکی از زبان های مهم برنامه نویسی وب و تحت کاربرمی باشد.

تفاوت دستورات اچ تی ام ال و جاوا

 • بعد از نوشتن اولین دستور برنامه نویسی، بهتر است با مفهوم این دستورات آشنا شویم. همانطور که ملاحظه کردید، میان یک دستور جاوا با اچ‌تی‌ام‌‌ال، تفاوت است. اچ‌تی‌ام‌ال، یک صفحه ساده و ثابت را به ما می‌دهد؛ و جاوا، یک صفحه متحرک و هوشمند. با اچ‌تی‌ام‌ال، بدنه و اسکلت یک صفحه (متن، عکس، جدول و فرم) را می‌سازیم و با جاوا به این بدن و اسکلت، روح می‌دمیم و آنرا زنده می‌کنیم؛ تا آن حد که نسبت به هر عملی، واکنش و عکس العمل مناسبی را نشان می‌دهد.

مثال: یک فرم ارسال نامه را تصور کنید. اگر مثلا نام خود یا آدرس گیرنده را اشتباهاً ننویسید، برنامه، با پیامی این موضوع را به شما یادآوری می‌کند. یعنی اینکه متوجه عمل شما شده و یک واکنش مناسب، نشان می‌دهد. در این جلسه با این مقوله، یعنی هوشمند بودن جاوا، آشنا می‌شویم.