آموزش طراحی سایت از مبتدی تا پیشرفته – جلسه ۸

0

آموزش طراحی سایت از مبتدی تا پیشرفته – جلسه ۸

با جلسه ۸ اموزش طراحی سایت از مبتدی تا پیشرفته در خدمت شما عزیزان هستیم،همونطور که در جلسات قبل دیدید با CSS آشنایی پیدا کردیم در این جلسه میریم به سراغ جاوا اسکریپت و جی کوئری

حالا امروز میخوایم به شما یاد بدیم که چطوری راحت تر کد بزنین،همونطور که میدونید جاوا اسکریپت کتابخانه های زیادی داره،برای این کار ما میریم سراغ کتابخانه جی کوئری J-Query

 

JQuery(جی کوئری) کتابخانه ای از جنس جاوا اسکریپت است و در واقع یک فایل با پسوند js. است که باید برای استفاده ، به صفحه وب سایت افزوده شود. این کار را میتوان به دو طریق انجام داد،برای استفاده از کتابخانه جی کوئری لازمه که اول اونو دانلود کنیم، چطوری؟

چندین راه برای شروع استفاد ازجی کوئری (jQuery) در وب سایت شما وجود دارد:

  • کتابخانه jQuery را از وبسایت jQuery دانلود کنید
  • از روش CDN برای افزودن jQuery به وبسایت خود استفاده کنید مانند گوگل

که ما اینجا از روش اول استفاده میکنیم.

کتابخانه ی JQuery(جی کوئری) یک تک فایل جاوا اسکریپت است و شما با استفاده از تگ <script> ارجاعی از این فایل را در صفحات HTML خود قرار میدهید (دقت داشته باشید که تگ <script> باید در داخل قسمت <head> قرار گیرد) :

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

 

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

<!DOCTYPE html>
<html>
  <head>
   <script src="jquery-3.2.1.min.js"></script>
   <script>
      $(document).ready(function(){
         $("button").click(function(){
           $("p").hide();
         });
      });
   </script>
</head>
<body>
   <h2>This is a heading</h2>
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>

   <button>Click me</button>
</body>
</html>

الان تا اینجا شما جی کوئری  رو تو برنامتون وارد کردید

خب حالا میخوایم با استفاده از جی کوئری کدی که جلسه قبل بهتون اموزش دادم رو بنویسم تا متوجه بشید که چقدر کد ما تر و تمیز تر و سریعتر نوشته میشه!

برای اینکه با جی کوئری بتونیم کار بکنیم با استفاده از علامت $ اونو صدا میزنیم  به جای علامت $ میتونیم مستقمینا اسم jQuery رو مینویسیم در زیر ساختار کلی جی کوئری رو براتون توضیح میدم:

$(selector).action()

از علامت $ برای تعریف و یا دسترسی به JQuery(جی کوئری) استفاده میکنیم.

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

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

 

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

$("#btn1").click(function(){
$("#lbl1").html($("#txt1").val() )
});

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

به طور خلاصه گفتیم که وقتی روی دکمه ما کلیک شد در انتها یه سری کارا روش انجام بشه،چه کارهایی؟

در خط دوم گفتیم که وقتی روی دکمه ما با ای دی #btn1 کلیک شد لیبل ما با ای دی #lbl1 مقدار HTML اش به مقدار مقادیر وارد شده تو تکست باکسمون تغییر کنه! به همین سادگی.

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

 

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.