رفتن به نوشته‌ها
مقایسه ی جی کوئری و جاوا اسکریپت

مقایسه ی جی کوئری و جاوا اسکریپت؟

jQuery یا JavaScript

جی کوئری در سال 2009 و توسط آقای John Resig معرفی/ساخته شد. هدف آقای John Resig از ارائه ی جی کوئری برطرف کردن ناسازگاری های مرورگرها در ورژن های مختلف و ساده کردن عملیات های مختلف مانند دستکاری HTML DOM و مدیریت رویداد ها و انیمیشن ها و AJAX و … بود.

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

پس از نسخه ی 5 جاوا اسکریپت که در سال 2009 معرفی شد، می توان بسیاری از کارهایی که جی کوئری می کرد را با چند خط جاوا اسکریپت ساده انجام داد.

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

پیدا کردن عناصر بر اساس id

فرض کنید عنصری داشته باشیم که id آن برابر "id="id01 باشد. برای پیدا کردن آن در جی کوئری می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h2>Finding HTML Elements by Id</h2>

<p id="id01">سلام بر دنیا</p>
<p id="id02">سلام بر ایران</p>
<p id="id03">سلام بر تهران</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("#id01");
  $("#demo").text("The text from the id01 paragraph is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Id</h2>

<p id="id01">سلام بر دنیا</p>
<p id="id02">سلام بر ایران</p>
<p id="id03">سلام بر تهران</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("id01");
document.getElementById("demo").innerHTML = "The text from the id01 paragraph is: " + myElement.innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

پیدا کردن عناصر بر اساس نام تگ

فرض کنید می خواهیم تمام تگ های <p> را پیدا کنیم. در جی کوئری می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>

<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>سلام بر دنیا</p>
<p>سلام بر ایران</p>
<p>سلام بر تهران</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("p");
  $("#demo").text("The text in the first paragraph is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما در جاوا اسکریپت ساده می گوییم:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>سلام بر دنیا</p>
<p>سلام بر ایران</p>
<p>سلام بر تهران</p>

<p id="demo"></p>

<script>
var myElements = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "The text in the first paragraph is: " + myElements[0].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

پیدا کردن عناصر بر اساس کلاس

فرض کنید بخواهیم عناصری را پیدا کنیم که کلاسشان "class="intro باشد. در جی کوئری می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h2>Finding HTML Elements by Class Name</h2>

<p class="intro">سلام بر دنیا</p>
<p class="intro">سلام بر ایران</p>
<p class="intro">سلام بر تهران</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $(".intro");
  $("#demo").text("The first paragraph with class='intro' is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما در جاوا اسکریپت ساده می گوییم:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Class Name</h2>

<p class="intro">سلام بر دنیا</p>
<p class="intro">سلام بر ایران</p>
<p class="intro">سلام بر تهران</p>

<p id="demo"></p>

<script>
var myElements = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = "The first paragraph with class='intro' is: " + myElements[0].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: پیدا کردن عناصر بر اساس نام کلاسشان در IE8 و نسخه های قبل تر آن کار نمی کند.

پیدا کردن عناصر بر اساس سلکتور CSS

فرض کنید می خواهیم تمام عناصر <p> را برگردانیم که کلاس "class="intro را داشته باشند. در جی کوئری می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h2>Finding HTML Elements by Query Selector</h2>

<p class="intro">سلام بر دنیا</p>
<p class="intro">سلام بر ایران</p>
<p class="intro">سلام بر تهران</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("p.intro");
  $("#demo").text("The first paragraph with class='intro' is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما در جاوا اسکریپت ساده می گوییم:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Query Selector</h2>

<p class="intro">سلام بر دنیا</p>
<p class="intro">سلام بر ایران</p>
<p class="intro">سلام بر تهران</p>

<p id="demo"></p>

<script>
var myElements = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
"The first paragraph with class='intro' is: " + myElements[0].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: دستور querySelectorAll در IE8 و نسخه های قبل تر آن کار نمی کند.

تعیین محتوای متنی

فرض کنید می خواهیم inner text (محتوای متنی که کاربر می بیند) یک عنصر HTML را تغییر داده یا تعیین کنیم. در جی کوئری می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h1>Setting Text Content</h1>

<h2 id="01">سلام بر دنیا</h2>
<h2 id="02">سلام بر ایران</h2>

<script>
$(document).ready(function() {
  var myElement = $("#01");
  myElement.text("سلام بر تهران");
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما در جاوا اسکریپت ساده می نویسیم:

<!DOCTYPE html>
<html>
<body>

<h1>Setting Text Content</h1>

<h2 id="01">سلام بر دنیا</h2>
<h2 id="02">سلام بر ایران</h2>

<script>
var myElement = document.getElementById("01");
myElement.textContent = "سلام بر تهران";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

دریافت محتوای متنی

ما می دانیم که چطور محتوای متنی را تعیین کنیم اما چطور می توانیم آن را دریافت کنیم؟ برای دریافت inner text در جی کوئری می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h1>Getting Text Content</h1>

<h2 id="01">سلام بر دنیا</h2>
<h2 id="02">سلام بر ایران</h2>
<h2 id="03">سلام بر تهران</h2>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElement = $("#02");
  var myText = myElement.text();
  $("#demo").text(myText); 
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما در جاوا اسکریپت ساده می توانیم بنویسیم:

<!DOCTYPE html>
<html>
<body>

<h1>Getting Text Content</h1>

<h2 id="01">سلام بر دنیا</h2>
<h2 id="02">سلام بر ایران</h2>
<h2 id="03">سلام بر تهران</h2>

<p id="demo"></p>

<script>
var myElement = document.getElementById("02");
var myText = myElement.textContent || myElement.innerText;
document.getElementById("demo").innerHTML = myText; 
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

ساخت محتوای HTML

اگر بخواهیم کدهای HTML یک عنصر را در جی کوئری بسازیم می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h1>Setting HTML</h1>

<div id="01">
  <h2 >سلام بر دنیا</h2>
</div>
<div id="02">
  <h2 >سلام بر ایران</h2>
</div>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElement = $("#02");
  myElement.html("<p>سلام بر تهران</p>");
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما در جاوا اسکریپت ساده می نویسیم:

<!DOCTYPE html>
<html>
<body>

<h1>Setting HTML</h1>

<div id="01">
  <h2 >سلام بر دنیا</h2>
</div>
<div id="02">
  <h2 >سلام بر ایران</h2>
</div>

<p id="demo"></p>

<script>
var myElement = document.getElementById("02");
myElement.innerHTML = "<p>سلام بر تهران</p>";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

دریافت محتوای HTML

برای دریافت کدهای HTML یک عنصر از طریق جی کوئری می گوییم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h1>Setting HTML</h1>

<div id="01">
  <h2 >سلام بر دنیا</h2>
</div>
<div id="02">
  <h2 >سلام بر ایران</h2>
</div>

<script>
$(document).ready(function() {
  var content = $("#02").html();
  $("#01").html(content);
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما در جاوا اسکریپت ساده می نویسیم:

<!DOCTYPE html>
<html>
<body>

<h1>Setting HTML</h1>

<div id="01">
  <h2 >سلام بر دنیا</h2>
</div>
<div id="02">
  <h2 >سلام بر ایران</h2>
</div>

<script>
var content = document.getElementById("02").innerHTML;
document.getElementById("01").innerHTML = content;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

جاوا اسکریپت و جر کوئری در استایل دهی و DOM

در این قسمت می خواهیم به بررسی استایل دهی (کد های CSS) با استفاده از کد های جاوا اسکریپت و جی کوئری بپردازیم. لازم به ذکر است که این قسمت، آخرین قسمت از سری آموزشی جاوا اسکریپت پیشرفته می باشد.

مخفی کردن عناصر

در کد زیر می خواهیم یک عنصر را مخفی کنیم. در جی کوئری آن را به این صورت می نویسیم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h1>Getting Text Content</h1>

<h2 id="01">سلام بر دنیا!</h2>
<h2 id="02">سلام بر ایران!</h2>
<h2 id="03">سلام بر تهران!</h2>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElement = $("#02");
  myElement.hide();
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر بخواهیم همین کار را در جاوا اسکریپت خالی انجام دهیم می گوییم:

<!DOCTYPE html>
<html>
<body>

<h1>Hiding HTML Elements</h1>

<h2 id="01">سلام بر دنیا!</h2>
<h2 id="02">سلام بر ایران!</h2>
<h2 id="03">سلام بر تهران!</h2>

<script>
document.getElementById("02").style.display = "none";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نمایش عناصر مخفی شده

پس از مخفی کردن یک عنصر می توانیم آن را به صورت زیر در جی کوئری بازگردانیم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h1>Showing HTML Elements</h1>

<h2 id="01" style="display:none">سلام بر دنیا</h2>
<h2 id="02" style="display:none">سلام بر ایران</h2>
<h2 id="03" style="display:none">سلام بر تهران</h2>

<script>
$(document).ready(function() {
  var myElement = $("#02");
  myElement.show();
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر بخواهیم همین کار را در جاوا اسکریپت ساده انجام دهیم می گوییم:

<!DOCTYPE html>
<html>
<body>

<h1>Showing HTML Elements</h1>

<h2 id="01" style="display:none">سلام بر دنیا</h2>
<h2 id="02" style="display:none">سلام بر ایران</h2>
<h2 id="03" style="display:none">سلام بر تهران</h2>

<script>
var myElement = document.getElementById("02");
myElement.style.display = "";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اضافه کردن استایل به عناصر

ما می توانیم در جاوا اسکریپت استایل های CSS را به صورت inline به عناصر HTML اضافه کنیم. این کار در جی کوئری به صورت زیر انجام می شود:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
$(document).ready(function() {
  var myElement = $("#demo");
  myElement.css("font-size","35px");
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اما اگر بخواهیم آن را در جاوا اسکریپت ساده بنویسیم می گوییم:

<!DOCTYPE html>
<html>
<body>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
var myElement = document.getElementById("demo");
myElement.style.fontSize = "35px";
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

حذف عناصر از HTML

برای حذف عناصر HTML می توانیم کد زیر را با جی کوئری بنویسیم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h2>Remove an HTML Element</h2>

<h2 id="id01">سلام بر دنیا</h2>
<h2 id="id02">سلام بر ایران</h2>

<script>
$(document).ready(function() {
  $("#id02").remove();
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html>
<body>

<h2>Remove an HTML Element</h2>

<h2 id="id01">سلام بر دنیا</h2>
<h2 id="id02">سلام بر ایران</h2>

<script>
var element = document.getElementById("id01");
element.parentNode.removeChild(element);
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

دریافت عنصر پدر

برای دریافت عنصر پدر (مثلا قرار دادن آن در یک متغیر) در جی کوئری می نویسیم:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>

<h1>Getting Parent HTML Element</h1>

<h2 id="01">سلام بر دنیا!</h2>
<h2 id="02">سلام بر ایران!</h2>
<h2 id="03">سلام بر تهران!</h2>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myParent = $("#02").parent();
  $("#demo").text(myParent.prop("nodeName")); 
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

همین کار به صورت زیر در جاوا اسکریپت ساده انجام می شود:

<!DOCTYPE html>
<html>
<body>

<h1>Getting Parent HTML Element</h1>

<h2 id="01">سلام بر دنیا</h2>
<h2 id="02">سلام بر ایران</h2>
<h2 id="03">سلام بر تهران</h2>

<p id="demo"></p>

<script>
var myParent = document.getElementById("02").parentNode;
document.getElementById("demo").innerHTML = myParent.nodeName;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

جاوا اسکریپت و جر کوئری در دستورات AJAX

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

یک درخواست AJAX به زبان جی کوئری به این شکل است:

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});

البته می تواند بر اساس نیاز و شرایط کمی تغییر کند.

این درخواست در جاوا اسکریپت ساده به این شکل است:

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

نکته: این کد فقط در Internet Explorer 9 به بعد کار می کند. البته در حقیقت نباید در سایت خود برای IE8 و قبل تر نیز پشتیبانی ایجاد کنید. این تفکر پشتیبانی از IE8 و IE7 بسیار تفکر اشتباهی است بلکه مکررا از سوی توسعه دهندگان گوگل و متخصصان این زمینه توصیه شده است که سعی نکنید برای تکنولوژی های بسیار بسیار قدیمی پشتیبانی ایجاد کنید. به طور مثال آقای کریس جکسون رئیس بخش امنیت مایکروسافت از کاربران می‌خواهد که تنها در مواردی که هیچ چاره‌ای نیست از IE استفاده کنند. او بر این عقیده است که نقش اینترنت اکسپلورر به مرور زمان تغییر کرده و دیگر نمی‌توان آن را یک مرورگر دانست (بلکه تنها ابزاری برای همخوانی با برخی وبسایت‌های قدیمی است) و افراد عادی و توسعه دهندگان نباید از آن استفاده کنند.

به هر حال امیدوارم از این دوره ی آموزشی لذت برده باشید. حالا که دوره ی برنامه نویسی پیشرفته جاوا اسکریپت را به اتمام رسانده اید مطمن باشید که به سطح بسیار خوبی در زمینه ی جاوا اسکریپت رسیده و باید به دنبال چالش هایی در سطوح بسیار بالاتر باشید. امیدوارم در هر زمینه ای که هستید موفق باشید.

منتشر شده در برنامه نویسیJavaScript (جاوا اسکریپت)