logo
logo
تبلیغ کلیکی تاپ سایت 98

فراخوانی جی کوئری در html

فراخوانی جی کوئری در html
هدایت عباسی آموزش HTML

فراخوانی جی کوئری در html از دو روش همراه با مثال را توضیح خواهیم داد.

امروزه برای اینکه قالب های زیبایی را طراحی کنیم می توانیم از جی کوئری (jquery) استفاده کنیم.

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

اگر اسلاید زیبایی را می بینیم که تصاویر را به شکل های زیبایی نمایش می دهد به وسیله جی کوئری این کار را انجام می دهد.

این آموزش متعلق به تاپ سایت 98 میباشد.

در این بخش از آموزش html به سراغ فراخوانی جی کوئری در html می رویم.

فراخوانی جی کوئری با cdn

برای فراخوانی جی کوئری با cdn کافی است که در تگ script و ویژگی src ، آدرس cdn جی کوئری را قرار دهیم.

در مثال زیر یک div را ابتدا مخفی می کنیم و سپس با استفاده از جی کوئری (jquery) آن را نمایش می دهیم.

برای نمایش div ابتدا جی کوئری را با cdn فراخوانی می کنیم سپس از دستور fadeIn استفاده می کنیم.

این دستور دارای سرعت می باشد و ما آن را روی 3 ثانیه تنظیم می کنیم یعنی در مدت زمان 3 ثانیه ، باکس نمایش داده می شود.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#a1").fadeIn(3000);
});
});
</script>
</head>
<body>
<h1>TopSite98.com</h1>
<button>Click me</button><br><br>
<div id="a1" style="display: none">
<h2>TopSite98</h2>
<p>TopSite98</p>
</div>
</body>
</html>

فراخوانی جی کوئری با فایل جی کوئری

جهت فراخوانی جی کوئری با فایل جی کوئری می بایست به سایت jquery برویم و فایل جی کوئری را فراخوانی کنیم.

در تگ script و ویژگی src نام فایل و ادرس آن را قرار می دهیم.

اگر آدرس یا نام فایل جی کوئری اشتباه باشد دستورات جی کوئری کار نخواهد کرد.

ما ابتدا در تگ style ، تگ div را مخفی کردیم. با کمی تغییر در استایل ، سعی کردیم با مثال بالا متفاوت باشد.

اگر کاربر روی دکمه کلیک کند باکس نمایش داده می شود.

برای این کار از دستور fadeIn استفاده کردیم. باکس در 2 و نیم ثانیه نمایش داده می شود.

<!DOCTYPE html>
<html>
<head>
<style>
#a1{
display: none;
width: 400px;
height: 400px;
background-color:orangered;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#a1").fadeIn(2500);
});
});
</script>
</head>
<body>
<h1>TopSite98.com</h1>
<button>Click me</button><br><br>
<div id="a1">
<h2>TopSite98</h2>
<p>TopSite98</p>
</div>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.