جی کوئری jquery چیست و چه کاربرد هایی دارد؟

در این مقاله از آژانس دیجیتال مارکتینگ بانوی هدف قصد داریم تا به این موضوع بپردازم و شما را اندکی با آن و مزایای استفاده از jquery آشنا کنیم؛ پس با لیدی تارگت همراه باشید. نگاهی داریم به پرکاربردترین کتابخانه جاوااسکریپت وب یعنی jquery و این‌که کاربردهای jquery چیست و در کل jquery چه کاربردی دارد؟ اغراق کردن در تأثیر jQuery بر بهبود وب پس از ارائه کتابخانه منبع باز جاوا اسکریپت در مدت زمان طولانی دشوار می‌باشد. یک ابزاری که خلاصه‌نویسی دیگری برای برنامه‌نویسی پیچیده جاوا اسکریپت ایجاد کرده بود، یک مزیت جی کوئری بود طراحانش همچنان راضی از ضرب‌المثل خود هستند: «کمتر بنویس، بیشتر انجام بده».

در واقع، حتی امروزه، jQuery در میان طراحان ماهر مشهور است و از مزایای جی کوئری استفاده می‌شود؛ در حالی که دیگران با تجربه برنامه‌نویسی تقریباً صفر خواهند توانست از مزایای jquery چیست و مخصوصا کتابخانه آن برای افزودن سودمندی پیشرفته به سایت‌های خود استفاده کنند. این چیزی‌ست که در پس یکی از بهترین نمونه های ارتقا وب برای غلبه کردن بر ناملایمات قرار گرفته است و باز هم دلیلی بر جواب سوال jquery چیست می‌باشد.

با این حال، تعهدات مداوم مهندسان وب، کل داستان را بازگو نخواهد کرد که در این بخش از jquery چیست چه اتفاقاتی افتاده است. با توجه به الگوهای نوآوری وب BuiltWith، در بیش از 80 میلیون سایت در سال 2022 ردیابی شد. کتابخانه jquery بیش از 10 سال است که با مرکز وردپرس بسته‌بندی شده می‌باشد و آن را در خارج از جعبه برای بسیاری از موضوعات که به مفید بودن آن برای ایجاد سایت‌های پویا وابسته می‌باشد، قابل دسترسی می‌باشد.

دروپال یکی دیگر از موارد معروف فریم ورک بوده است که جی کوئری را در میان بخش‌های مرکزی خود قرار جای‌گذاری کرده می‌باشد. صرف‌نظر از اینکه چه نوآوری‌ها انتخاب‌های برتر مهندسین هستند، jquery پر استفاده‌ترین کتابخانه جاوا اسکریپت در وب باقی خواهد ماند.

تاریخچه مختصر jquery چیست؟

تضاد برنامه‌ها از ابتدای وب ادامه داشت و مهندسان برای همیشه با شکست مواجه شده‌اند. در سال 2006، زمانی که مهندس وب، جان رسیگ، جی کوئری را فاش کرد، برنامه Web Pilgrim مایکروسافت پیشگام در بازار بود. وارونگی مزایای نت اسکیپ کمتر از 10 سال زودتر انجام شد. در آن زمان، فایرفاکس جدید موزیلا 10 درصد از کیک را داشت (بر خلاف 84 درصد مایکروسافت) و سافاری اپل اخیراً در صحنه ظاهر شده بود. کروم گوگل، پیشگام بازار کنونی، وجود نداشت. توسعه دهندگان جاوا اسکریپت مانند Resig به‌طور معمول سعی می‌کردند کدی بنویسند که در همه برنامه‌ها اجرا شود.

کتابخانه جدید جی کوئری او برای رسیدگی به تمایزات به روشی که جاوا اسکریپت توسط آن برنامه‌ها اجرا می‌شد و به مهندسان کمک می‌کرد تا کد کمتری بنویسند و در عین حال به تعهداتی مانند موارد زیر دست پیدا کنند:

• کنترل اجزای html در یک صفحه سایت
• CSS به تدریج در حال تغییر است
• پاسخ دادن به موقعیت هایی مانند ضربه زدن به ماوس و فشار دادن کلید
• مراقبت از درخواست های ajax برای تازه کردن محتوای صفحه بدون بارگیری مجدد

پس از ورود Resig به کتابخانه، مهندسان مختلف برنامه هایی را در بالای jquery ساختند، و اغلب کار خود را به عنوان ماژول به اشتراک می گذاشتند تا مفید بودن جدید را برای همه در دسترس قرار دهند.

مجموعه شناخته شده‌ای از ماژول‌ها است که برای بهبود UI‌ها در نظر گرفته شده است. به‌عنوان یک متحد “رسمی” برای کتابخانه مرکزی jquery در نظر گرفته می‌شود و گروه بزرگی از پیشرفت‌ها و ابزارهایی مانند انتخاب‌گر تاریخ، نوارهای پیشرفت، لغزنده، اسپینرها، و تابلوهای انتخاب شده یا تاشو را اضافه می‌کند.

تفاوت بین jquery چیست و JavaScript چیست؟

درک اینکه jquery چیست و یک جاوا اسکریپت است بسیار مهم است. در زمانی که از استفاده می‌کنید، با نمونه‌هایی از اشیاء جاوا اسکریپت کار می‌کنید که نام‌گذاری jQuery را برای تکنیک‌ها (قابلیت‌ها) و ویژگی‌ها نشان می‌دهد. ما باید جاوا اسکریپت و jQuery وانیلی را بررسی کنیم و کار مشابهی را انجام دهیم. در jquery چیست کمی هم باید با کد زنی HTML آشنا باشید اینجا کمی HTML در یک صفحه سایت وجود دارد:

<p id=”target”>Old text</p>

کد جاوا اسکریپت Vanilla که می‌تواند مؤلفه <p> را با شناسه “هدف” پیدا کند و بعد از آن متن را بین برچسب‌ها جایگزین کند. می‌تواند این باشد:

const content = document.getElementById( “target” );

content.textContent = “New text”;

تکنیک getElementById() جاوا اسکریپت آیتمی را برمی‌گرداند که HTML و محتوای متن را با شناسه “target” ترکیب می‌کند. مورد به محتوای مرجع ثابت اختصاص داده می‌شود؛ سپس، در آن نقطه، ویژگی textContent آن به «متن جدید» تغییر می‌کند. جاوا اسکریپت به شما اجازه می‌دهد تا تکنیک‌ها را زنجیره‌ای کنید و انجام موارد فوق را با یک ادعای انفرادی قابل تصور می‌کند:

document.getElementById( “target” ).textContent = “New text”;

البته در آن زمان، می‌توانید فعالیت‌های jQuery را زنجیره‌ای کنید. برای تغییر “متن قدیمی” به “متن جدید” با استفاده از jQuery، می توانید این کار را انجام دهید:

$( “#target” ).text( “New text” );

علامت دلار ($) یک نام کوتاه برای jQuery است و (“#target”) تصویری از انتخابگر jQuery است. برای این وضعیت، انتخابگر به دنبال یک جزء HTML با شناسه بخش هدف ما است. استراتژی jQuery text() باند شده تا «متن جدید» را به ماده بخش تبدیل کند.

دستورالعمل استفاده از jQuery در سایت شما

با اتصال کدهای کتابخانه از صفحات سایت، جی کوئری را به سایت خود اضافه کنید. کتابخانه jQuery می تواند در وب سرور شما یا یک سازمان انتقال آزادانه مواد (CDN) باشد. سایت معتبر jQuery می‌تواند شما را با جدیدترین انواع کتابخانه متصل کند. کتابخانه jQuery در جاوا اسکریپت کوچک شده (فشرده) برای انباشته شدن سریع در حال انجام یا غیر فشرده برای معنی‌دار بودن و عیب یابی قابل دسترسی است. به همین ترتیب، تا حدودی کمی جاوا اسکریپت می‌نویسید تا jQuery را تداعی کنید و تعهداتی را که به‌خوبی برای برنامه وب خود تعریف شده‌اند، انجام دهید. در HTML صفحات سایت خود، می‌توانید کتابخانه jQuery و رکورد حاوی کد خود را به این صورت متصل کنید:

<script type=”text/javascript” src=”/js/jquery-3.6.0.min.js”></script>

<script type=”text/javascript” src=”/js/my_script.js”></script>

در این مدل، نوع 3.6.0 جی کوئری و کد صریح صفحه وب شما در رکوردی به نام my_script.js در کاتالوگ/js/سایت قرار دارند. کتابخانه jQuery معمولاً برای بخش <head> یک صفحه به خاطر سپرده می‌شود. برای طراحان عادی است که یک اتصال به اسناد جاوا اسکریپت قرار دهند، کدی را که به کتابخانه jQuery وابسته است، نزدیک به قسمت پایین صفحه، به خاطر بسپارند، معمولاً مدت زیادی قبل از پایان تگ <body> نیست. شما به‌طور مستمر به هر کد مشخص سایت نیاز دارید که jQuery را تداعی کند تا پس از اتصال به کتابخانه واقعی نمایش داده شود.

اتصال به jQuery در CDN

کتابخانه jQuery زمانی که توسط CDN قوی منتقل شود، اغلب سریع‌تر دانلود می‌شود. jQuery در سراسر وب بسیار جهانی است که فرصت مناسبی برای مهمان وب‌سایت (اگر کدنویسی برای شما سخت است پس حتما این مقاله را بخوانید) شما وجود دارد که از هم اکنون کتابخانه را در برنامه خود برای CDN‌های مختلف رزرو کرده است. می‌توانیم قطعه HTML بالا را برای استفاده از شبکه انتقال محتوای جاوا اسکریپت Cloudflare مانند این تنظیم کنیم:

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

<script type=”text/javascript” src=”/js/my_script.js”></script>

jquery چیست – ایجاد jQuery در برنامه شما

هنگام نوشتن برنامه jQuery خود، بهترین روش این است که تأیید کنید که صفحه سایت قبل از شروع اجرای کد شما، فرآیند انباشتگی را کامل بکند. شما می‌توانید این را با استفاده از استراتژی ()preded، که کد شما را زمانی که رکورد روی هم انباشته شد، به این ترتیب حذف می کند، آزمایش کنید:

$(document).ready(function() {

  // Your jQuery application will go here

});

این شروع برای یک برنامه jQuery تا حدی عادی است که مهندسان کتابخانه دستور زبان به‌طور قابل توجهی مختصرتری ایجاد کرده‌اند:

$(function() { 

 // Your jQuery application will go here

});

انتخاب کامپوننت‌ها در DOM با جی کوئری

زیربنای اکثر برنامه‌های jQuery ظرفیت عبور از طراحی یک صفحه به‌عنوان یک آیتم (مدل شی رکورد یا DOM) و هدف قرار دادن اجزای مختلف در داخل HTML است. انتخاب یک جزء (یا مجموعه ای از اجزاء) مرحله قبل از انجام کاری با آن جزء است؛ مانند تغییر ظاهر آن یا تازه کردن نزدیک به شاد، انتخابگرهای جی کوئری ویژگی های DOM را به روش‌های مختلف هدف قرار می‌دهند. شناخته‌شده‌ترین عبارتند از:

بر اساس نام مؤلفه (برچسب) HTML

بر اساس ویژگی‌های CSS (شمارش شناسه‌ها و نام کلاس‌ها)

با مکان کلی یک جزء در داخل DOM

با ارزش ماده در زمینه‌های ساختاری

با وضعیت فعلی یک جزء

در اینجا چند مدل وجود دارد:

// Select all HTML paragraph tags in a document

$( “p” );

// Select the element with the ID “myID”

$( “#myID” );

// Select all elements with the CSS class name “myClass”

$( “.myClass” );

// Select all input, textarea, select, and button elements in a form

$( “:input” );

// Select the children of some other element

// (In this case, the entries in an unordered list)

$( “ul > li” ); 

// Select all anchors with the rel attribute “nofollow”

$( “a[rel=’nofollow’]” ); 

// Select all checkboxes in a “checked” state

$( “input:checked” )

برای تمرکز واضح تر می‌توانید به انتخابگرهای jQuery بپیوندید. مدل‌ها:

// HTML paragraph tags with the CSS class “myClass”

$( “p.myClass” ); 

// HTML paragraphs with the text “Kinsta” anywhere within them

$( “p:contains(‘Kinsta’)” ); 

// HTML div tags that have at least one paragraph tag as a descendent

$( “div:has(p)” ); 

// The first entry in any unordered list with the CSS class “myList” 

$( “ul.myList li:first” );

کنترل DOM با جی کوئری

از آنجایی که نحوه انتخاب بخش‌های مختلف در یک صفحه بسیار غیر قابل انکار شده است، می‌توانید با استفاده از متدولوژی‌های jQuery آنها را تغییر دهید. همانطور که قبلاً اشاره شد، می‌توانید به‌طور منظم این تمرین‌ها را برای تکمیل کامل کدنویسی کمی ببندید. چند مدل:

// Select the element with the ID “alert” and add a red background

$( “#alert” ).css( “background-color”, “red” ); 

// Select the element with the ID “alert” and add the class “urgent” to its markup

$( “#alert” ).addClass( “urgent” ); 

// Find any paragraph with the class “myName” and make its content “Kinsta”

$( “p.myName” ).text( “Kinsta” );

// Like the statement above, but with support for HTML markup

$( “p.myName” ).html( “<strong>Kinsta</strong>” ); 

// Add the attribute/value rel=”nofollow” to every anchor

$( “a” ).attr( “rel”, “nofollow” );

// Hide the element with the ID “myDiv” (but keep it in the DOM)

$( “#myDiv” ).hide(); 

// Make the element hidden above visible again

$( “#myDiv” ).show();

// Remove from the DOM everything INSIDE the element with the ID “myDiv”

$( “#myDiv” ).empty(); 

// Remove from the DOM the entire element with the ID “myDiv”

$( “#myDiv” ).remove();

jquery چیست – رسیدگی به موقعیت ها با جی کوئری

در صورتی که همه چیز به محض بارگذاری صفحه اتفاق بیفتد، نوع دستکاری DOM که در بالا نشان داده شده است، توسط بازدیدکنندگان وب از بین می‌رود. به همین دلیل است که برنامه jQuery شما می‌تواند مواردی مانند کلیک ماوس، توسعه ماوس، ضربه زدن به کلید و موارد دیگر را تشخیص داده است و به آنها پاسخ دهد تا یک برخورد واقعاً پاسخگو ایجاد کند.

شناسایی اسنپ های ماوس با جی کوئری

پاسخ دادن به ضربه ماوس (یا ضربه زدن روی یک ابزار صفحه لمسی) یک کار معمولی برای برنامه های کاربردی وب است. ما چند jQuery و HTML را در یک مثال به هم پیوسته‌ایم که از شیء مناسبت ضمنی jQuery نیز استفاده می‌کند، که حاوی اطلاعات مفیدی در مورد ” مناسبت کلیک” ما است:

<script>

// Invoke jQuery

$(document).ready(function () {

    // Assign “click” method to all button elements

    // Our function passes the built-in object with event details

    $( “button” ).click(function ( event ) { 

        // Make sure all button backgrounds are white

        $( “button” ).css( “background-color”, “white” );

        // Change our H2 text to report the ID of the clicked button

        $( “#buttonReport” ).text(“You clicked ” + event.target.id); 

        // Set the background color of the clicked button to red 

        $( “#” + event.target.id ).css(“background-color”, “red”);

    });

}); 

</script>

<h2 id=”buttonReport”>Click a button!</h2>

<button id=”Button1″>Button 1</button>

<button id=”Button2″>Button 2</button>

<button id=”Button3″>Button 3</button>

شناسایی توسعه ماوس با jQuery درک مکان مداوم نشانگر ماوس بر روی یک صفحه وب در بسیاری از برنامه های کاربردی وب پاسخگو مفید است. این نمونه ای از روشی است که jQuery می تواند کمک کند:

<script>

$(document).ready(function () { 

    // Detect when the mouse is over a div with the mouseover() method  

    $( “div” ).mouseover(function ( event ) { 

        // Make the div under the mouse grey and taller

        $( “#” + event.target.id ).css({ 

           “background-color” : “lightgrey”,

           “height” : “8em”

        });

    }); 

    // Detect when the mouse moves away with the mouseout() method 

    $( “div” ).mouseout(function ( event ) { 

        // Return the size and color of the div to its original state

        $( “#” + event.target.id ).css({

           “background-color” : “white”,

            “height” : “4em”

        });

    });

}); 

</script>

<div id=”div1″>Div 1</div>

<div id=”div2″>Div 2</div>

<div id=”div3″>Div 3</div>

رسیدگی به درخواست های Ajax با جی کوئری

بخش عمده‌ای از محبوبیت jQuery توانایی آن در بهبود خواسته‌های Ajax است که برنامه‌های کاربردی وب می‌توانند برای تبادل داده با سرورها بدون بارگذاری مجدد صفحات استفاده کنند. این کتابخانه دستگاه‌های زیادی برای مدیریت درخواست‌های Ajax برای داده‌ها در قالب‌های متن ساده، HTML، XML و JSON دارد. رویکرد جی کوئری این است که انتخاب‌های کوتاه‌نویسی را برای شناخته‌شده‌ترین وظایف ارائه دهد. یکی از ساده‌ترین راهبردها در محفظه ابزار Ajax، استراتژی load() است:

<div id=”myContent”>Replace Me</div>

<button>Load Content</button>

<script> 

// Request the file content.php from the server after a button is clicked.

// Place the results in the HTML element with the ID “myContent” 

$( “button” ).click( function (){ 

    $( “#myContent” ).load( “content.php” );

}); 

</script>

اتفاقات زیادی در آنجا با تنها سه خط جاوا اسکریپت و دو مؤلفه HTML رخ می‌دهد.

ما در لیدی تارگت تمام نیازهای شما را برای راه‌اندازی یک کسب‌وکار اینترنتی با ضمانت و مشاوره رایگان محیا می‌‌کنیم از جمله:

1. مشاوره دیجیتال مارکتینگ
2. مشاوره سئو سایت
3. تبلیغات گوگل ادز
4. تبلیغات کلیکی
5. تولید محتوا
6. طراحی سایت
7. خدمات شبکه‌های اجتماعی

همانطور که گفته شد تمامی این خدمات توسط آژانس دیجیتال مارکتینگ بانوی هدف با ارائه ضمانت و مشاوره رایگان صورت می‌گیرد. همچنین برای طراحی سایت بدون کدنویسی پیشنهاد می‌کنیم به مقاله طراحی سایت با المنتور مراجعه کنید.

سوالات متداول

آیا جی کوئری منسوخ شده است؟

جی کوئری در چند سال گذشته کاهش قابل توجهی در محبوبیت داشته است. با ظهور فریم‌ورک‌های جاوا اسکریپت frontend مانند Angular، Vue و React، نحو عجیب و غریب jQuery و پیاده‌سازی غالباً بیش از حد، در این موج جدید فناوری وب جای عقب افتاده است. همانطور که گفته شد، jQuery هنوز کاربردهای خود را دارد. برای نمونه، در پروژه‌های بی شماری از برنامه‌های تجارت الکترونیک سازمانی گرفته تا صفحات فرود ساده استفاده شده است. ثانیا، jQuery هنوز برای چیزهای خاصی مانند نمونه سازی سریع و حتی انیمیشن خوب است، اگر با CSS اشنا نیستید. جی کوئری ممکن است قدیمی‌باشد اما جی کوئری نمرده است.

جی کوئری چیست؟

جی کوئری یک کتابخانه جاوا اسکریپت رایگان و منبع باز است. جی کوئری برای ساده کردن پیمایش و دستکاری درخت HTML DOM طراحی شده است. همچنین jQuery انیمیشن CSS، مدیریت رویداد، Ajax و موارد دیگر را ساده می‌کند.