Event رخداد یا رویداد : رفتار‌ها و عمل‌های متفاوتی که المان‌های ما در داخل صفحه باید بیان و بگیرند رو می‌گویند

تمام رخداد‌ها در داخل برنامه امون باید در داخل یک تابع باشه زمانی که ما در یک تابع میایم و از کلمه ی this استفاده میکنیم اشاره میکند به اون عنصری که یک رخدادی رو داره اجرا میکند در تابع زیر چون به خود عنصر قراره بیایم و کلیک کنیم می‌تونیم از this استفاده بکنیم 

$(document).ready(function(){
 $(".click").click(function(){
 //$(".click").hide();  برای مثال این خط کد با پایین هیچ فرقی ندارد
 $(this).hide();
   })
})

هر رخداد یا رویدادی یک پاسخ ای دارد که این پاسخ در داخل یک تابع به اون بر می‌گردونیم ساختار on که میاد و یک متدی رو قبل از اون رخداد هامون در نظر میگیرد مثلا زمانی که کلید میشه نه وقتی کلیک میشه  (  زمانی که داری دقیقا اون کارو انجام می‌دهی )

$(document).ready(function(){
   $(".click").on('click',function(){
   $("p").hide();
   })
})

همچنین ما می‌توانیم به صورت یک آبجکت بیایم و یک سری رخداد رو به طور کامل باهم  انجام دهیم 

$(document).ready(function(){$(".click").on({
    click : function (){     $("p").css("color","red")    },
    mouseleave : function(){  $("p").css("color","blue")   },
    dbclick : function(){  $("p").css("color","yellow")   },
   })
})

افکت‌ها در جی کوری :  

.show(); == > داخل این‌ها میتونیم از fast , slow این‌ها استفاده کنیم 
.hide();
.toggle();  مکمل دو تای قبلی هستش که با هر بار کلیک عوض میکند

fade(); یک مکث برای شروع و پایانش داره 
دو مدل فید کردن ما داریم 
fadeIn(); برای ظاهر شدن 
 مقادیری که میگیرن از رشته‌های کم و زیاد و عددی هستش 
fadeOut(); برای مخفی شدن 
و برای رفت برگشتی هم از 
fadeToggle(); می‌توانیم بیایم و استفاده بکنیم 
fadeTo('speead',میزان شفافیت رو در این نقطه نگه دار opacity);
fadeTo('slow',0.2);
slideUp(); برای قرار گیری به صورت یک استایل هستش که میره 

slideDown(); اسلاید ما وارد میشع
slideToggle();  حرکت رفت برگشتی در داخل اسلاید ما 

استفاده از انیمشن‌ها در ساختار جی کوری 

 $(".c4").click(function () {
    $(".test1").animate({
     height: "toggle",
  برای دادن عمل رفت برگشتی در ارتفاع
     // height: "+=150px",
 با این شکل به ارتفاع قبلی استایلش اضافه میکند
     right: "10px",
     opacity: "0.3",
     borderRaduis: "10px",
  در دادن استایل هامون که - دارند به شیوه رو به رو عمل میکنیم
    });

متغیر :      ظرفی در یک حافظه که می‌توانیم مقدار هایی در آن ذخیره کنیم  و باید یک نامی رو به اون اضافه کنیم 

  $(".c4").click(function () {
   var x = $(".test1");  تعریف متغیر در جی کوری
    x.animate({width:'200px'},1000); ترتیب اجرا شدن اول 
      x.animate({height:'200px'},1000); دوم 
        x.animate({width:'200px'},1000); سوم
    });

ساختار‌های مربوط به get  :

 برای گرفتن متن المان هامون باید از تابع ( ) text استفاده بکنیم و تابع ( ) html میاد و کل اون محتوا یا تگ رو بهمون می‌دهد حال اگر خواستیم بیایم و مقادیر ورودی فرم هامون رو بگیریم از متدی استفاده میکنیم به نام ( ) val همچنین ما می‌توانیم با استفاده از تابع ( ) attr بیایم و اون صفت‌ها یا attribute هارو بیایم و بگیریم

alert("my text is : " + $('.test1').text())
alert("my text is : " + $('.test1').html())
console.log("value is :" + $(".input").val())
console.log("attr is :" +  $(".input").attr('type'))

ساختار‌های مربوط به set :

تفاوت این ساختار نسبت به بالایی دقیقا در این هستش که فقط کافی در داخل () خالی بیایم و مقدار قرار دهیم و اگر مقادیر ما زیاد بود از آبجکت استفاده بکنیم 

alert("my text is : " + $('.test1').text('goodbye'))
alert("my text is : " + $('.test1').html('<i>goodbye</i>test'))
console.log("value is :" + $(".input").val('sara'))
console.log("attr is :" +  $(".input").attr({ 'type':'password','class','input' }))

متد‌های Add و remove :

append  به معنی جلوش هستش و prepend  به معنی قبلش برای اضافه کردن فایل‌ها و تگ هامون هستش که نسبت به محتوای درون اون عنصر بعدش و قبلش میاد و این دستورات رو اجرا میکند برای مثال اگر ما یک تگ لیست داشته باشیم طبق محتوای زیر

<ul>
   <li> متن آزمایشی </li>
<ul>

$(document).ready(function(){
 $(".c1").click(function(){
  $('ul').append('<li> متن آزمایشی </li>')
    });
  $(".c2").click(function(){
  $('ul').prepend('<p> منو </p>')
    });
})

حال ما به غیر از دو ساختار بالا  دو تابع after و before رو هم داریم که به جای دو تابع بالا می‌توانیم بیایم و استفاده بکنیم  حال تفاوت این دو در این هستش که دو تابع بالا   after و before میاد و دقیقا بعد و قبل از عنصر یا تگ پدر این کار رو انجام میدهد و تابع‌های append   و prepend   برای عناصر یا المان‌های داخل تگ والد انجام می‌شوند و معنی بعد و قبل رو اعمال میکنند 

برای حذف کردن المان هامون می‌تونیم بیایم و از تابع‌های remove و empty استفاده کنیم تفاوت‌های این دو تابع در این هستش که تابع remove  میاد و تگ مورد نظرمون رو به طور کلی حذف میکنه هم خودش و هم محتوای درونش رو ولی تابع empty  فقط میاد و اون عنصر رو از محتوای داخلش خالی میکند ما در داخل این توابع می‌توانیم نام کلاس هامون رو هم قرار بدهیم  و  اگر چند تا کلاس داشتیم می‌تونیم با استفاده از ,  آن‌ها رو از هم جدا کنیم 

استفاده و اضافه کردن کلاس‌های Css : ما برای اضافه کردن یک کلاس css به یک المان یا تگ امون در سند می‌تونیم در جی کوری از کلاس ( ) addClass که در داخل آن نام کلاس مورد نظرمون می‌نویسیم همچنین برای حذف یک کلاس هم از تابع ( ) removeClass استفاده میکنیم همچنین برای پشت سر هم کردنش از تابع‌های toggle استفاده میکنیم

$('div').addClass('add-class');
$('div').removeClass('add-class');
$('div').toggleClass('add-class');

همچنین با استفاده از تابع css می‌تونیم بیایم و به صورت اینلاین هم به عناصرمون استایل بدهیم که اگر یک دونه استایل داشتیم در داخل پرانتز می‌نویسیم اما اگر استایل هامون زیاد بود به صورت آبجکت میایم و قرارشون می‌دهیم 

$('div').css({
   'color':'red',
   'font-size:'24px'
})

نکته : مفاهیم زیر برای استفاده از عرض‌ها  همین متد‌ها برای ارتفاع هم هستش

Width  ( ) ==>  Width  
innerWidth ( ) ==>  width + padding
outerWidth ( ) ==>  width + padding + border
outerWidth ( ture )  ==>  width + padding + border + margin
height ( ) ==>  height 
innerheight ( ) ==>  height + padding
outerheight ( ) ==>  height + padding + border
outerheight ( ture ) ==>  height + padding + border + margin

پیمایش عناصر  traversing  in j query  :  در این قسمت یک مفهوم مهم هم داریم به نام  up to tree Dom که در ابتدا میایم و این رو بررسی میکنیم  که دسترسی فرزندان به والدین هستش 

ancestors : اجداد یا  نسل           /                  sibling : خواهر یا برادر 
parent پدر یا مادر                  /                  descendant پدر پدر بزرگ

1 -  تابع  parent ما با استفاده از این تابع می‌توانیم بیایم و به پدر و مادر عنصرمون دسترسی داشته باشیم 

$(document).ready(function(){
 $(".parent").parent().css({
   backgroundColor:"blue",
   color:"#fff"
  })
})

2-  استفاده از تابع  parents که با استفاده از این تابع اگر بیایم و هیچ مقداری درون اون قرار ندهیم تمام والد هارو میاد و انتخاب میکند ولی اگر بیایم و در داخل اون نام یک والد رو قرار دهیم تا اون والد شروع میکند و پیمایش رو انجام میدهد

$(document).ready(function(){
 $(".parent").parents().css({ 
   backgroundColor:"blue",
   color:"#fff"
  })
})
///////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
 $(".parent").parents('li').css({
   backgroundColor:"blue",
   color:"#fff"
  })
}

3 - استفاده از تابع parentsUntil  با مشخص کردن والد در آن میاد و تا والد انتخابی ما عمل پیمایش رو انجام میدهد ولی خود اون والد رو انتخاب نمیکند 

$(document).ready(function(){
 $(".parent").parentsUntil('ul').css({
   backgroundColor:"blue",
   color:"#fff"
  })
}

حال میایم و مفهوم down to tree Dom رو بررسی میکنیم که والدین چطوری دسترسی داشته باشند به فرزندان اشون 

1-  تابع children که میاد و فرزند اشون رو به طور مستقیم انتخاب میکند و هر چند تا فرزنداشون رو انتخاب میکند ولی اگر داخل اون نام فرزند شو قرار دهیم فقط اون فرزند رو انتخاب میکند

$(document).ready(function(){
  $(".parent").children().css({
   'color':"#fff"
  })
}
////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
  $(".parent").children('.child-1').css({
   'color':"#fff"
  })
}

2-  تابع  find پیدا کردن که مشابه یکی بالایی هستش  تفاوت این دو تابع در این هستش که تابع children دقیقا زمانی استفاده می‌شود که هدف یک خانواده خاص هستش ولی  find کلی هستش استفاده از * میاد و میگوید به ما که کل المان‌ها یا فرزندان رو برای ما میاد و انتخاب میکند 

$(document).ready(function(){
  $(".parent").find('*').css({
   'color':"#fff"
  })
}

مباحث مربوط به sibling خواهر یا برادر : 

1- استفاده از تابع siblings : ما در استفاده از این تابع مثل موارد بالا دو تا راه حل داریم اولی این که بدون مقدار قرارش بدهیم که میاد و تمام خواهر و برادر هارو برای ما در نظر میگیرد و دومی هم این هستش که بیایم و نام اون خواهر و برادرشو براش قرار بدهیم که اون خواهر یا برادر رو برای ما انتخاب میکند 

$(document).ready(function(){
  $("p").siblings().css({
   'color':"#fff"
  })
}
////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
  $("p").siblings('div').css({
   'color':"#fff"
  })
}

2 - استفاده از تابع next که میاد و بعدیش رو انتخاب میکند که اگر به صورت خالی ازش استفاده کنیم یکی بعدیش رو بلافاصله انتخاب میکند حال اگر داخل اون بیایم و از نام‌ها استفاده کنیم بلافاصله اون خواهر یا برادر که اون نام را دارد برای ما انتخاب میکند  

$(document).ready(function(){
  $("p").next().css({
   'color':"#fff"
  })
}
////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
  $("p").next('div').css({
   'color':"#fff"
  })
}

3 - استفاده از تابع prev که میاد و خواهر یا برادر قبلی شو برامون انتخاب میکند و دقیقا متضاد یکی قبلی هستش 

نکته : ما یکسری توابع nextAll و preAll هم داریم که میاد و تمام خواهر و برادر‌های بعد و قبل اش رو برای ما انتخاب میکند که  nextUntil  بعد از من تا یک عنصری رو بیا  در نظر بگیر و preUntil قبل از من تا یک عنصری در نظر بگیر و برامون انتخابشون بکن که اگر به یک عنصر مشابه هم برسند اولین عنصر رو برای ما انتخاب میکنند 

$('div').frist().fadeOut();   اولین تگی که نوع  دیو رو دارد برای ما میاد و انتخاب میکند
$('div').last().fadeOut();   آخرین تگی که نوع دیو رو دارد برای ما میاد وانتخاب میکند 
$('div').eq(1)... بعیک جور پیمایش رو برای ما بین دیو‌ها انجام می‌دهد  

معرفی تابع filter که در داخل آن میتونیم نام عنصر مورد نظرمون رو بیایم و قرار دهیم 

 $('div').filter('.0').find(p.x); 

نکته : به این حالت که ما بیایم و چند تا متد رو پشت سر هم بیاریم می‌گویند  method chaining

تابع not بیا هر چیزی به غیر از این تابع رو براش تغیرات رو اعمال کن ی جور نقیض هستش 

 $('div').not('.0').find(p.x).css({
   color: 'red'
 })

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

$.noConflict();

و در هر جای کد هامون که خواستیم از $ استفاده کنیم به جای آن‌ها از jQuery قرار دهیم تا به هیچ مشکلی نخوریم 

3 - استفاده از تابع prev که میاد و خواهر یا برادر قبلی شو برامون انتخاب میکند و دقیقا متضاد یکی قبلی هستش 

نکته : ما یکسری توابع nextAll و preAll هم داریم که میاد و تمام خواهر و برادر‌های بعد و قبل اش رو برای ما انتخاب میکند که  nextUntil  بعد از من تا یک عنصری رو بیا  در نظر بگیر و preUntil قبل از من تا یک عنصری در نظر بگیر و برامون انتخابشون بکن که اگر به یک عنصر مشابه هم برسند اولین عنصر رو برای ما انتخاب میکنند

سلکتور‌های دیگه جی کوری مثل 

:disable                :enable                  :check                     :visible

کد‌های مربوط به اولین پروژه درست کردن یک آکاردو منو 

$.noConflict();
jQuery(document).ready(function () {
  jQuery(".accordion > li > div").click(function () {
    if (jQuery(this).next().is(":visible") == false) {
      jQuery(".accordion ul").slideUp();
    }
    jQuery(this).next().slideToggle();
  });
jQuery(".accordion ul:eq(0)").show();
});

jQuery(document).ready(function () {
  jQuery(".accordion > li > div").click(function () {
    if (jQuery(this).next().is(":hidden")) {
      jQuery(".accordion ul").slideUp();
    }
    jQuery(this).next().slideToggle();
  });
  jQuery(".accordion ul:eq(0)").show();
});

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

function(e){  e.preventDefault();        }

کد‌های مربوط به پروژه  scroll  to top

$(window).scroll(function () {
  if ($(this).scrollTop() >= 50) {
    // $("#top").fadeIn();
    $("#top").css({
      'bottom': "20px",
    });
  } else {
    // $("#top").fadeOut();
    $("#top").css({ 
      'bottom': "-60px"
   });
  }
});

$("#top").click(function (e) {
  e.preventDefault();
  $("body,html").animate(
    {
      scrollTop: 0,
    },
    1000
  );
});

کدهای مربوط به پروژه مودال

$(document).ready(function () {
  $(".modal-link").click(function (e) {
    e.preventDefault();
    $(".bg-modal").fadeIn(function () {
      $(".modal").fadeIn();
    });
  });
  $(".close,.bg-modal").click(function (e) {
    e.preventDefault();
    $(".modal").fadeOut(function () {
      $(".bg-modal").fadeOut();
    });
  });
})

کد‌های مربوط به پروژه  اینپوت 

$(document).ready(function(){
  $('#add').click(function(e){
      e.preventDefault();
      $('#add').before("<div class='input-group'><label for='input'>سابقه</label><input type='text' id='input' placeholder='سابقه خود را وارد نمایید...' /></div>");
  });
})

معرفی پلاگین سوییت آلرت https://sweetalert2.github.io که برای نصب اش ما میتونیم بیایم و از دو حالت npm و CDN‌ها استفاده بکنیم  همچنین اگر از حالت CDN استفاده می‌کردیم  برای لوود شدن بهتر اون بهتر هستش که بیایم و در قسمت هدر وب سایت امون اون رو قرار دهیم این پلاگین یا کتابخانه یکسری پراپرتی هم دارد که بهتر هستش بیایم و اون هارو مطالعه کنیم 

معرفی پلاگین   rtl owl slide برای استفاده از ان بهتر هستش که بیایم و اون رو دانلود کنیم 

پلاگین سوم هم یک کتابخانه شبیه به اسلایدر هستش  https://kenwheeler.github.io/slick/   کلن ما به این اسلایدر‌ها Carousel  کارسول هم میگوییم 

معرفی پلاگین aos به آدرس https://michalsnik.github.io/aos/  که برای استفاده از اون هم هر دو راه حل پکجی منیجر‌ها و  CDN  هستش  فقط نکته ای که این پلاگین داره این هستش که اگر بیایم  کد زیر را در اسکریپت امون قرار دهیم برای تمام المان هامون میاد و اعمال میکند 

<script>
  AOS.init();
</script>

معرفی پلاگین zoomy slider برای زوم کردن روی تصاویرمون که بیشتر در وب سایت‌های فروشگاهی از آن استفاده می‌شود https://www.jqueryscript.net/gallery/gallery-zoom-zoomy.html 

معرفی پلاگین count down timer که برای وب سایت‌های فروشگاهی که کمپینی چیزی دارن می‌تونیم بیایم و استفاده بکنیم  که برای نصب اش به وب سایت https://harshen.github.io/jQuery-countdownTimer/ مراجعه میکنیم برای فارسی کردن عدد‌ها میتونیم سرچ کنیم How to latin number to arabic persian که یک اسکریپت ساده جی اس که از رگلار اکسپرشن استفاده میکند  

برای استفاده از گوگل مپ باید در ابتدا ببنیم ایا این آدرس ما ثبت شده هست یا نه اگه ثبت شده باشه که میریم اون ادرس رو با استفاده از embeded و کد‌های iframe انتخابش میکنیم و اگر ثبت نشده باشه که باید اون رو بیایم و ثبت کنیم و باید توسط خود تنظیمات سایت بیایم و ادرس خودمون رو ثبت کنیم  که بهتر هستش که بیایم و آدرس هامون رو به صورت انگلیسی وارد کنیم اگر اطلاعات ما به صورت انگلیسی باشه خیلی بهتر هستش 

معرفی کتاب خونه‌های تاریخی شمسی  http://babakhani.github.io/PersianWebToolkit/doc/datepicker/ ccc

معرفی پلاگین برای فایل‌های ویدیو امون با نام video js  =  https://videojs.com/city که برای دادن تم‌های مختلف به اون بهتر هستش بیایم با عبارت زیر سرچ کنیم و بعد از وب سایت  https://github.com/videojs/themes که می‌توانیم طبق مستنداتی که گفته بیایم و از تم‌های اون استفاده بکنیم 

پلاگین ck editor که برای دسترسی بهتر به کاربر برای نوشتن متن هستش  https://ckeditor.com و با اکثر فریم ورک‌ها سازگاری دارد که خود سایت سون لرن هم فک کنم برای ادیت متون از این داره استفاده میکند 

وب سایت  https://www.jqueryscript.net   که پلاگین‌های جی کوری برای ما معرفی میکند و مرجع خوبی هستش