jQuery

|

(آموزش جی کوئری(قسمت مقدماتی

برای این که شما با jquery کار بکنید شما نیاز دارید با زبان طراحی html و css و همچنین تا حدودی با زبان java script آشنا باشید.ما این آموزش هایی رو که خدمتتون گفتیم هم html هم css و هم java script رو در آموزش های قبلی به صورت مجزا داخل سایت قرار دادیم تهیه کردیم اگر آشنایی ندارید با این مباحثی که عرض کردم خدمتتون حتما پیشنهاد میکنیم که این آموزش هارو ملاحظه بفرمایید و بعدا به یادگیری آموزش جاری بفرمایید.

خب برای این که ما بخواهیم با jquery آشنا بشیم طبق روال نیاز هستش که توی برنامه و به صورت عملی ما کار بکنیم.ما نرم افزار visual studio رو برای این آموزش نیاز داریم.یک وبسایت جدید ایجاد میکنیم نامش مهم نیست به صورت تستی میخواییم پکیج jquery رو روی وبسایتمون نصب کنیم و یک مثال کوچک بزنیم از آموزش بعدی من کل document رو که من به این منظور تهیه کردم به مرور خدمتتون تا آخر این دوره آموزشی ارایه میدم.

(آموزش جی کوئری (قسمت مقدماتی

خب ما الان یک وبسایت جدید ایجاد کردیم همینطور که میبینید هیچ چیز خالی رو هم اینجا نداره ما اینجا حال empty website رو انتخاب کردیم و به صورت پیش فرض فقط یک فایل web.confige داخلش هست.برای این که ما بخواییم پکیج jquery رو نصب بکنیم از منوی tools میایم nuget package manager رو انتخاب میکنیم package manager console رو انتخاب میکنیم تا این محیط powershell پکیج منیجر برامون اینجا اینشیالایز بشه و حالا تو قسمت pm اینجا تایپ میکنییم install-package و jquery رو تایپ میکنیم و اینتر میزنیم تا این پکیج برامون دانلود بشه تو status for هم وضعیتی که برای دانلود این پکیج نیاز هستش برای شما نمایش داده میشه ممکنه که بسته به سرعت اینترنتتون یک مقدار زمان ببره این پکیج ولی در کل پکیج پر حجمی نیست.

(آموزش جی کوئری (قسمت مقدماتی

پکیج jquery و بسیار سریع روی وبسایت شما نصب میشه خب همانطور که میبینید یک فولدر script برای ما اینجا ایجاد میشه و آخرین ورژن jquery از سایت مربوطه دانلود میشه و اینجا برامون قرار داده میشه که حالا نسخه های زیادی رو شما میبینید نسخه ایی که intellisense داره و نسخه ایی که به صورت minimize شده هست و map هست و نسخه ایی که به صورت معمولی هست نسخه ای هست که اینجا شما شاهد هستید که همشون در اصل برای شما یک کارو انجام میدن مخصوصا این 2تا نسخه که حالا ما موقعی که داریم خودمون کار میکنیم و بیایم که یک item رو confige بکنیم داخل jquery که همانطور که میبینید چیزی نیست جزکد های java script به خاطر همین عرض کردم که شما نیازی تا حدودی با زبان java script هم آشنا باشید ما وقتی وبسایت رو داریم خودمون کار میکنیم و میخوایم confige بکنیم معمولا این نسخه رو لینکش رو بالای وبسایت و توی تگ هد قرار میدیم و در نهایت موقعی که وبسایت رو میخواییم publish بکنیم این حالت رو نمیذاریم به خاطر این که یک مقدار ممکنه که حجم فایل زیاد باشه و توی صفحات وقتی میخواد بارگذاریبشه برامون دردسر ساز بشه به خاطر همین وقتی ما وبسایت رو publish میکنیم این نسخه رو بالای تگ هد قرار میدیم همانطور که میبینید این نسخه minimize شده به این صورت هستش که دیگه فاصله های اضافی که بین این نسخه هستش گرفته شده.

(آموزش جی کوئری(قسمت مقدماتی

خب حالا به خاطر این که ما بتونیم از این jquery توی برنامه هامون استفاده بکنیم ببینیم باید چیکار بکنیم که این رو داشته باشیم.من یک webform معمولی ایجاد میکنم شما میتونید صفحه html ایجاد بکنید هیچ فرقی نمیکنه و یا اگه با mvc هم کار میکنید میتونید یک view مربوطه ایجاد بکنید هیچ تفاوتی نمیکنه در هر حال میتونید این کارو انجام بدید با php هم که کار میکنید باز این آموزش مورد استفادتون میشتونه واقع بشه.من چون وب سایت رو انتخاب کردم همون وب فرم رو انتخاب میکنم یک وب فرم ایجاد میکنم با نام default.aspx و حالا میخام این jquery رو اینجا داشته باشم خب شما استایل شید هارو میومدید خیلی راحت میکشیدید و پایین تگ تایتل توی تگ هد قرار میدادید این هم به همین ترتیب هست یعنی شما لین را میکشد و در اینجا قرار میدید و براتون اینجا قرار میگیره وحالا این صفحه شما از این jquery تغذیه میشه حالا برای این که این رو فراخونی بکنیم توی کد html که مینویسیم باید حتما توی تگ script این کار رو انجام بدیم که همون تگ script جاوا اسکریپت خودمون هست این تگ رو باز میکنیم و تایپ رو باربر با java script قرار میدیم و تگ رو میبندیم در این قسمت میاییم کد های java script رو که میخواییم به او صفحه اعمال بشه رو مینویسیم و بعدا وقتی شما صفحه رو run میکنید و میبینید میتونید شاهد باشید اون کاری رو که انجام دادید به چه صورت براتون پیاده سازی میشه.(آموزش جیکوئری(قسمت مقدماتیخب ما برای شروع میخواهیم با نحوه signture خود jquery آشنا بشیم یک مثال ساده رو خدمتتون بگیم و از آموزش های بعدی بیایم کار رو حرفه ایی تر بکنیم وادامه بدیم.برای این که ما بتونیم jquery را فراخونی بکنیم رو صفحه مون هم میتونیم از کامه jquery استفاده بکنیم و هم از $ که دیگه عرف شده به خاطر این که حجم کمتری داره از $ به جای کلمه jquery استفاده میشه دقیقا معادل هستش هیچ تفاوتی نمیکنه و شما وقتی این رو میزنید داخل پرانتز باید مشخص بکنید document تون رو که قرار حالا اون تغییراتی که میخوایید به شکل jquery رو اون صفحه اعمال بشه کدوم document هست که کلمه ی documrnt کلمه رزرو شده هست و همین کلمه رو داخل پرانتز انتخاب میکنیم و برای شروع کدمون هست و وقتی که شما function ready رو فراخونی میکنید به این معنی هستش که اون صفحه جاری شما آماده هستش که حالا هر کاری که دلتون میخواد روش انجام بدید که کد مربوط به این دقیقا کد java script هست شما میتونید خودتون این کد رو بنویسید داخل ready ما میخواهیم function هایی رو مورد بررسی قرار بدیم تمام اون آیتم هایی که شما اینجا دیدید که توی jquery هستند به صورت یک سری کد java script و function براتون اینجا داره کار میکنه وفقط نیاز هستش تا شما حدودی با این کد ها و function ها آشنا باشید دیگه نیازی نیست بدونید پشت این کد ها چه اتفاقی میفته چون کد java script را توسعه دهندگان jquery خودشون براتون اینجا زحمت کشیدن نوشتن شما فقط باید با اون توابع و کد ها آنا باشید تا فراخونی کنید و استفاده بکنید(آموزش جی کوئری(قسمت مقدماتی به عنوان مثال ما اینجا میخواییم تابعی رو فراخونی بکنیم و استفاده بکنیم تابع هم که علامت پرانتز باز و بسته رو روبه روش خواهد داشت خب تا اینجا این کدی هست که تو کلیه ی کدهای jquery تون باید استفاد بکنید بعد از این شما باید یک { باز بکنید توی visual studio 2013 به صورت خودکار ماوس شما وسط این } قرار میگیره حالا شما اگه بیاید enter بزنید خوش میاید یک استایلی هم به اون کدتون میده تا شما راحت تر بتونید کد نویسیتون رو انجام بدید.به عنوان مثال ما میخوایم یک alert خیلی معمولی داشته باشیم توی این صفحه وقتی که صفحمون load میشه و event page load اتفاق میفته و یا حالا اگر به صورت html هست صفحه مون اجرا میشه میخواییم یک alert به کاربر نمایش داده بشه به خاطر همین از تابع alert استفاده میکنیم داخل alert ما string مون رو به این صورت تایپ میکنیم.چون زبان java scrpt هست و به صورت پیش فرض زبان java script هم از signature های cbase تبعیت میکنه ما باید ; رو باید آخرکارمون قرار بدیم به این منظور که کار ما به انتها رسیده.(آموزش جی کوئری(قسمت مقدماتی

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید