آموزش جاوا اسکریپت – جلسه ۱۳

آموزش جاوا اسکریپت از مبتدی تا پیشرفته
جلسه ۱۳

سلام

با جلسه سیزدهم اموزش جاوا اسکریپت در خدمت شما عزیزان هستیم،همونطور که در جلسات قبل دیدید با رویداد On-Click آشنایی پیدا کردیم و طبق مثال زیر با روش کار این رویداد اشنا شدیم و دیدید که به واسطه کدی که نوشتیم متن داخل Text-box رو داخل یه Lable هم به نمایش میزاشتیم

حالا امروز میخوایم به شما یاد بدیم که چطوری راحت تر کد بزنین،همونطور که میدونید جاوا اسکریپت کتابخانه های زیادی داره،برای این کار ما میریم سراغ کتابخانه جی کوئری 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 اش به مقدار مقادیر وارد شده تو تکست باکسمون تغییر کنه! به همین سادگی.

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

jquery جاوا اسکریپت جاوااسکریپت جلسه 13