ایجاد یک برنامه مبتنی بر Ajax با jQuery بسیار ساده و سریع می شود.
jQuery در ابتدا توسط John Resig در اوایل سال 2006 ایجاد شد. پروژه jQuery در حال حاضر توسط گروهی از توسعه دهندگان توزیع شده به عنوان یک پروژه منبع باز نگهداری و نگهداری می شود.
با jQuery می توانید در زمان و تلاش زیادی صرفه جویی کنید. بنابراین این سایت را به موارد دلخواه خود اضافه کنید و به خواندن ادامه دهید
کارهای بیشتری وجود دارد که می توانید با jQuery انجام دهید.
لیست به همین جا ختم نمی شود، بسیاری از کارهای جالب دیگر وجود دارد که می توانید با jQuery انجام دهید.
چندین مزیت وجود دارد که چرا باید از jQuery استفاده کرد:
برای شروع، اجازه دهید ابتدا یک نسخه از jQuery را دانلود کرده و سپس آن را در پروژه خود قرار دهیم. دو نسخه از jQuery برای دانلود در دسترس است: با عجله e فشرده نشده است .
فایل غیر فشرده برای توسعه یا اشکال زدایی مناسب تر است. در حالی که فایل کوچک شده و فشرده برای تولید توصیه می شود زیرا به دلیل حجم فایل کوچکتر باعث صرفه جویی در پهنای باند و بهبود عملکرد می شود.
ما می توانیم jQuery را از اینجا دانلود کنیم: https://jquery.com/download/
پس از دانلود فایل jQuery می توانید ببینید که پسوند js دارد، یعنی یک فایل جاوا اسکریپت است. در واقع JQuery چیزی جز یک کتابخانه جاوا اسکریپت نیست، بنابراین می توانید فایل jQuery را در سند HTML با عنصر اضافه کنید. درست مثل فایل های جاوا اسکریپت معمولی.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>به یاد داشته باشید که همیشه فایل jQuery را قبل از اسکریپت های سفارشی قرار دهید. در غیر این صورت، هنگامی که کد جی کوئری شما سعی می کند به آنها دسترسی پیدا کند، API های جی کوئری در دسترس نخواهند بود.
همانطور که ممکن است متوجه شده باشید، ما از ویژگی در مثال قبلی صرف نظر کردیم type="text/javascript" داخل تگ . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiدر HTML5 و تمام مرورگرهای مدرن موجود است.
به عنوان یک جایگزین، اگر ترجیح می‌دهید از دانلود فایل خودداری کنید، می‌توانید jQuery را از طریق پیوندهای CDN (شبکه تحویل محتوا) در سند خود جاسازی کنید.
CDN ها می توانند با کاهش زمان بارگذاری یک مزیت عملکردی ارائه دهند، زیرا آنها jQuery را روی چندین سرور در سراسر جهان میزبانی می کنند و هنگامی که کاربر فایل را درخواست می کند، از نزدیک ترین سرور ارائه می شود.
این همچنین این مزیت را دارد که اگر بازدیدکننده صفحه وب شما قبلاً یک کپی از jQuery را از همان CDN در حین بازدید از سایت‌های دیگر دانلود کرده باشد، مجبور نخواهند شد دوباره آن را بارگیری کند زیرا قبلاً در حافظه پنهان مرورگر آنها قرار دارد.
در این صورت باید بنویسید:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>علاوه بر CDN ارائه شده توسط پروژه jquery، می توانید jQuery را از طریق اضافه کنید گوگل e مایکروسافت cdn.
با توجه به اهداف کتابخانه jQuery و نحوه گنجاندن آن در سند خود، اکنون زمان آن رسیده است که jQuery را عملی کنید.
حالا بیایید با تغییر رنگ متن هدر از رنگ قبلی، یک عملیات ساده جی کوئری را انجام دهیمdefiرنگ مشکی مایل به سبز.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>در کد یک عملیات ساده جی کوئری را با تغییر رنگ هدر یعنی عنصر انجام دادیم با استفاده از انتخابگر عنصر jQuery و متد ()css هنگامی که سند آماده است، که به عنوان رویداد آماده سند شناخته می شود.
بیانیه جی کوئری معمولا با علامت دلار شروع می شود ( $) و با نقطه ویرگول ( ;).
در جی کوئری، علامت دلار ( $) فقط یک نام مستعار برای jQuery است. کد نمونه زیر را در نظر بگیرید که ساده ترین عبارت jQuery را نشان می دهد.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>مثال به سادگی یک پیام هشدار را نمایش می دهد "Hello I'm a JQuery sign” به کاربر. بیایید برخی از ویژگی ها را ببینیم:
<script>: jQuery فقط یک کتابخانه جاوا اسکریپت است، کد jQuery را می توان در داخل عنصر قرار داد <script>، یا می توانید آن را در یک فایل جاوا اسکریپت خارجی قرار دهید.$(document).ready(handler); به عنوان یک رویداد آماده شناخته می شود. کجاست handler این تابعی است که به محض آماده شدن سند، یعنی زمانی که سلسله مراتب DOM به طور کامل ساخته شده است، به متد ارسال می شود تا اجرا شود.روش جی کوئری ready() معمولاً با یک تابع ناشناس استفاده می شود. بنابراین، مثال بالا را می توان به صورت خلاصه به صورت زیر نوشت:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>در داخل یک تابع می‌توانید دستورات جی کوئری را بنویسید تا هر عملی را به ترتیب زیر انجام دهید، مانند:
$(selector).action();کجاست، $(selector) اساساً عناصر HTML را از درخت DOM انتخاب می کند تا بتوان آن را دستکاری کرد و action() اعمال برخی از اقدامات بر روی عناصر انتخاب شده، مانند تغییر مقدار ویژگی CSS، یا تنظیم محتوای عنصر و غیره.
حالا بیایید به مثال دیگری نگاه کنیم که متن پاراگراف را تنظیم می کند:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>مثال jQuery به انتخابگر اشاره دارد pو تمام پاراگراف ها و سپس متد را انتخاب می کند text() محتوای متن پاراگراف را با " تنظیم کنیدHello World!".
متن پاراگراف در مثال قبلی به طور خودکار هنگامی که سند آماده است جایگزین می شود. اما بیایید ببینیم در صورتی که می‌خواهید قبل از اجرای کد jQuery، برای جایگزینی متن پاراگراف، اقدامی را انجام دهید، چگونه این کار را انجام دهیم.
بیایید آخرین مثال را در نظر بگیریم:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>در این مثال، متن پاراگراف تنها زمانی جایگزین می‌شود که یک رویداد کلیک روی دکمه رخ دهد.Replace Text"، که به سادگی به این معنی است که کاربر روی این دکمه کلیک می کند.
می توانید از انتخابگر شناسه برای انتخاب یک مورد با شناسه منحصر به فرد در صفحه استفاده کنید.
به عنوان مثال، کد jQuery زیر یک عنصر با ویژگی ID را انتخاب و برجسته می کند id="markid"، زمانی که سند آماده شد.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>انتخابگر کلاس می تواند برای انتخاب عناصر با یک کلاس خاص استفاده شود.
به عنوان مثال، کد jQuery زیر عناصر با ویژگی class را انتخاب و برجسته می کند class="markclass"، زمانی که سند آماده شد.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>از انتخابگر آیتم می توان برای انتخاب اقلام بر اساس نام آیتم استفاده کرد.
به عنوان مثال، کد jQuery زیر تمام پاراگراف ها، یعنی عناصر را انتخاب و برجسته می کند "<p>" زمانی که سند آماده شد
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>می توانید از انتخابگر ویژگی برای انتخاب یک عنصر بر اساس یکی از ویژگی های HTML آن، مانند ویژگی پیوند، استفاده کنید targetیا ویژگی یک ورودی type، و غیره.
به عنوان مثال، کد jQuery زیر تمام ورودی های متن، مانند عناصر را انتخاب و برجسته می کند "<input>" با type="text"، زمانی که سند آماده شد.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>همچنین می توانید انتخابگرهای CSS را ترکیب کنید تا انتخاب خود را دقیق تر کنید.
به عنوان مثال، می توانید انتخابگر کلاس را با یک انتخابگر عنصر ترکیب کنید تا عناصری را در یک سند پیدا کنید که نوع و کلاس خاصی دارند.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>علاوه بر انتخابگرها defijQuery انتخابگر سفارشی خود را برای بهبود بیشتر قابلیت‌های انتخاب عناصر در صفحه فراهم می‌کند.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>رویدادها اغلب با تعامل کاربر با صفحه وب ایجاد می شوند، مانند کلیک کردن بر روی پیوند یا دکمه، وارد کردن متن در کادر ورودی یا ناحیه متن، انتخاب در کادر انتخاب، فشار دادن یک کلید روی صفحه کلید، حرکت دادن نشانگر ماوس. ، و غیره. در برخی موارد، خود مرورگر می تواند رویدادهایی مانند بارگیری صفحه و بارگیری رویدادها را راه اندازی کند.
جی کوئری با ارائه متدهای رویداد برای اکثر رویدادهای مرورگر بومی مکانیسم های مدیریت رویدادهای اساسی را بهبود می بخشد، برخی از این روش ها عبارتند از ready(), click(), keypress(), focus(), blur(), change()، و غیره.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>به طور کلی رویدادها را می توان به چهار گروه اصلی طبقه بندی کرد:
هنگامی که کاربر روی یک مورد کلیک می کند، نشانگر ماوس را حرکت می دهد و غیره، یک رویداد ماوس فعال می شود.
در اینجا چند روش متداول jQuery برای مدیریت رویدادهای ماوس آورده شده است.
click()روش click() یک تابع کنترل کننده رویداد را به عناصر انتخاب شده برای رویداد متصل کنید.click". تابع پیوند شده زمانی اجرا می شود که کاربر روی آن آیتم کلیک کند. مثال زیر عناصر را پنهان می کند <p> در یک صفحه با کلیک کردن.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()روش dblclick() یک تابع کنترل کننده رویداد را به عناصر انتخاب شده برای رویداد متصل کنید.dblclick". تابع پیوند شده زمانی اجرا می شود که کاربر روی آن آیتم دوبار کلیک کند. مثال زیر عناصر را پنهان می کند <p> هنگام دوبار کلیک کردن روی آنها
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()روش hover() یک یا دو تابع کنترل کننده رویداد را به عناصر انتخاب شده وصل کنید که هنگام حرکت اشاره گر ماوس به داخل و خارج از عناصر اجرا می شوند. تابع اول زمانی اجرا می شود که کاربر نشانگر ماوس را روی یک آیتم قرار می دهد، در حالی که تابع دوم زمانی اجرا می شود که کاربر نشانگر ماوس را از آن آیتم حذف کند.
مثال زیر موارد را برجسته می کند <p> هنگامی که مکان نما را روی آن قرار می دهید، هنگامی که مکان نما را بردارید، برجسته شدن آن حذف می شود.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()روش mouseenter() یک تابع کنترل کننده رویداد را به عناصر انتخاب شده متصل کنید که با ورود ماوس به یک عنصر اجرا می شود. مثال زیر برجسته سازی کلاس را به عنصر اضافه می کند <p> وقتی مکان نما را روی آن قرار می دهید.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()روش mouseleave() یک تابع کنترل کننده رویداد را به موارد انتخاب شده متصل کنید که وقتی ماوس یک مورد را ترک می کند اجرا می شود. مثال زیر برجسته کلاس را از عنصر حذف می کند <p> وقتی مکان نما را از روی آن بردارید.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>یک رویداد صفحه کلید زمانی مطرح می شود که کاربر کلیدی را روی صفحه کلید فشار داده یا رها کند. بیایید به چند روش متداول جی کوئری برای مدیریت رویدادهای صفحه کلید نگاه کنیم.
keypress()روش keypress() یک تابع مدیریت رویداد را به عناصر انتخاب شده (معمولاً کنترل‌های فرم) متصل می‌کند که وقتی مرورگر ورودی صفحه‌کلید را از کاربر دریافت می‌کند، اجرا می‌شود. مثال زیر پیامی را هنگام راه اندازی رویداد نمایش می دهد keypress و چند بار با فشار دادن کلید روی صفحه کلید خود فعال می شود.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>رویداد فشار کلید شبیه به رویداد keydown است، با این تفاوت که کلیدهای اصلاح کننده و غیرچاپ مانند Shift، Esc، Backspace یا Delete، کلیدهای جهت دار و غیره. آنها رویدادهای keydown را اجرا می کنند اما رویدادهای keydown را اجرا نمی کنند.
keydown()روش keydown() یک تابع مدیریت رویداد را به موارد انتخاب شده (معمولاً کنترل های فرم) متصل می کند که زمانی که کاربر برای اولین بار کلیدی را روی صفحه کلید فشار می دهد اجرا می شود. مثال زیر پیامی را هنگام راه اندازی رویداد نمایش می دهد keydown و چند بار با فشار دادن کلید روی صفحه کلید خود فعال می شود.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()روش keyup() یک تابع مدیریت رویداد را به عناصر انتخاب شده (معمولاً کنترل های فرم) متصل کنید که زمانی که کاربر کلیدی را روی صفحه کلید رها می کند، اجرا می شود. مثال زیر پیامی را هنگام راه اندازی رویداد نمایش می دهد keyup و چند بار با فشار دادن و رها کردن یک کلید روی صفحه کلید خود فعال می شود.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>یک رویداد فرم زمانی فعال می‌شود که یک کنترل فرم فوکوس را دریافت کند یا از دست بدهد، یا زمانی که کاربر مقدار کنترل فرم را تغییر می‌دهد، مانند تایپ متن در ورودی متن، انتخاب گزینه‌ای در کادر انتخاب و غیره. در اینجا چند روش متداول jQuery برای مدیریت رویدادهای فرم آورده شده است.
change()روش change() یک تابع کنترل کننده رویداد را به عناصر متصل کنید <input> و زمانی اجرا می شود که مقدار آن تغییر کند. مثال زیر هنگام انتخاب گزینه ای در کادر انتخاب کشویی پیام هشداری را نمایش می دهد.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>برای جعبه‌های کلیک، چک باکس‌ها و دکمه‌های رادیویی، زمانی که کاربر انتخاب ماوس را انجام می‌دهد، رویداد بلافاصله فعال می‌شود، اما برای ورودی متن و ناحیه متن، رویداد پس از از دست دادن تمرکز عنصر فعال می‌شود.
focus()روش focus() یک تابع کنترل کننده رویداد را به عناصر انتخاب شده متصل می کند (معمولاً اتصالات فرم را کنترل می کند) که وقتی فوکوس می شود اجرا می شود. هنگامی که ورودی متن فوکوس را دریافت می کند، مثال زیر پیامی را نشان می دهد.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()روش blur() یک تابع کنترل کننده رویداد را برای تشکیل عناصری مانند <input>, <textarea>, <select> که با از دست دادن تمرکز اجرا می شود. مثال زیر زمانی که ورودی متن از فوکوس خارج می شود پیامی را نمایش می دهد.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()روش submit() یک تابع کنترل کننده رویداد را به عناصر متصل کنید <form> زمانی که کاربر سعی می کند فرمی را ارسال کند اجرا می شود. مثال زیر پیامی را بر اساس مقدار وارد شده هنگام تلاش برای ارسال فرم نمایش می دهد.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>رویدادها همچنین در شرایطی فعال می شوند که صفحه DOM (مدل شیء سند) آماده است یا زمانی که کاربر پنجره مرورگر را تغییر اندازه می دهد یا اسکرول می کند و غیره. در اینجا چند روش متداول jQuery برای مدیریت این نوع رویدادها آورده شده است.
ready()روش ready() تابعی را مشخص می کند که در زمانی که DOM به طور کامل بارگذاری می شود اجرا شود.
به محض اینکه سلسله مراتب DOM به طور کامل ساخته شد و آماده دستکاری شد، مثال زیر جایگزین متن پاراگراف خواهد شد.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()روش resize() یک تابع کنترل کننده رویداد را به عنصر پنجره متصل کنید که با تغییر اندازه پنجره مرورگر اجرا می شود.
مثال زیر عرض و ارتفاع فعلی پنجره مرورگر را هنگامی که می خواهید با کشیدن گوشه های آن تغییر اندازه دهید، نشان می دهد.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()روش scroll() یک تابع کنترل کننده رویداد را به پنجره یا به پنجره وصل کنید iframe و موارد قابل پیمایش که هر زمان که موقعیت اسکرول مورد تغییر کند اجرا می شود.
مثال زیر هنگام پیمایش پنجره مرورگر پیامی را نمایش می دهد.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
بخش دریایی یک قدرت واقعی اقتصادی جهانی است که به سمت یک بازار 150 میلیاردی حرکت کرده است.
دوشنبه گذشته، فایننشال تایمز از قراردادی با OpenAI خبر داد. FT مجوز روزنامه نگاری در سطح جهانی خود را صادر می کند…
میلیون‌ها نفر برای خدمات استریم پرداخت می‌کنند و هزینه اشتراک ماهانه می‌پردازند. این عقیده رایج است که شما…
Coveware توسط Veeam به ارائه خدمات پاسخگویی به حوادث اخاذی سایبری ادامه خواهد داد. Coveware قابلیت‌های پزشکی قانونی و اصلاحی را ارائه می‌دهد…