نمونه پروژه جی کوئری

در این بخش از آموزش جی کوئری می خواهیم چند نمونه پروژه جی کوئری را آموزش دهیم تا بدانیم با جی کوئری می شود چه کارهایی انجام داد.

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

باید بدانید از جی کوئری بصورت بسیار حرفه ای تری استفاده میشود و این آموزش برای افراد مبتدی میباشد تا با ویژگی های جی کوئری بیشتر آشنا شوند.

در این آموزش قصد داریم چند پروژه کوچک را انجام دهیم.

نمونه پروژه جی کوئری 1 :

در این نمونه پروژه جی کوئری 1 قصد داریم نحوه تغییر برچسب یا متن دکمه را تغییر دهیم.

خروجی پروژه 1:

با کلیک روی دکمه متن دکمه تغییر می کند.

در قسمت پایین ، کد پروژه را می توانید دانلود کنید.

توضیح پروژه 1 :

ابتدا مانند کد پایین ، یک input را قرار می دهیم. مقدار value را در نظر بگیرید که کلمه button است. با کلیک روی این دکمه باید متن آن به edit value button تغییر کند.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>SH711.COM</h1>
<p>change value button by click</p>
<input type="button" value="button">
</script>
</body>
</html>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

با استفاده از کد جی کوئری و دستور attr زیر می توانیم متن دکمه را تغییر دهیم.

<script>
$(':button').click(function () {
$(this).attr('value','edit value button');
});
</script>

کد کامل پروژه 1 :

درقسمت پایین می توانید کد کامل پروژه را مشاهده نمایید.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h1>SH711.COM</h1>
<p>change value button by click</p>
<input type="button" value="button">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(':button').click(function () {
$(this).attr('value','edit value button');
});
</script>
</body>
</html>

نمونه پروژه جی کوئری 2 :

در نمونه پروژه جی کوئری 2 به سراغ دستورات دیگر جی کوئری (jquery) می رویم.

خروجی پروژه 2 :

خروجی پروژه 2 به این شکل است که وقتی در هر کدام از input ها کلیک می کنیم متن span در سمت راست برای لحظاتی نمایش داده میشود و سپس محو میشود.

توضیح پروژه 2 :

ابتدا چند input را مطابق کد زیر قرار می دهیم. ورودی ها می توانید از نوع text یا textarea باشد. با کلیک درون هر input متن span ها در سمت راست ورودی ها نمایش داده میشود و سپس محو می شود.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: none;
}
</style>
</head>
<body>
<h1>SH711.COM</h1>
<p>by click - display span</p>
<p><input type="text"> <span>name</span></p>
<p><input type="text"> <span>lname</span></p>
<textarea></textarea> <span>description</span>
</body>
</html>

فراخوانی جی کوئری :

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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

<script>
$(":input").focus(function () {
$(this).next("span").css("display","inline").fadeOut(5000);
});
</script>

کد کامل نمونه پروژه 2 :

در قسمت پایین می توانید کد کامل نمونه پروژه 2 را ببینید و آن را در فایل html قرار داده و اجرا کنید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: none;
}
</style>
</head>
<body>
<h1>SH711.COM</h1>
<p>by click - display span</p>
<p><input type="text"> <span>name</span></p>
<p><input type="text"> <span>lname</span></p>
<textarea></textarea> <span>description</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(":input").focus(function () {
$(this).next("span").css("display","inline").fadeOut(5000);
});
</script>
</body>
</html>

نمونه پروژه جی کوئری 3 :

در نمونه پروژه جی کوئری 3 قصد داریم به سراغ فرم ها برویم.

خروجی پروژه 3 :

خروجی پروژه 3 به این شکل است که وقتی در هر کدام از input ها کلیک می کنیم رنگ پس زمینه input ها تغییر کند.

 توضیح پروژه 3 :

ابتدا چند input را مطابق کد زیر قرار می دهیم. ورودی ها می توانید از نوع text یا textarea باشد. با کلیک درون هر input رنگ پس زمینه تغییر می کند و باعث متمایز شدن ورودی فعال با دیگر ورودی ها می شود.

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

کد نمونه پروژه 3 :

در این بخش به توضیح کدها می پردازیم. چنانچه مشکلی در اجرا داشتید سورس کد کامل زیر را دانلود کنید و اجرا کنید.

ابتدا کد html را مشاهده می کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>sh711.com</h1>
<input type="text" id="t1" value="sh711"><br>
<textarea>aaaaa</textarea><br>
</body>
</html>

در قسمت زیر جی کوئری را فراخوانی می کنیم.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(':input').focus(function () {
$(this).css("background-color","yellow");
}).blur(function () {
$(this).css("background-color","#fff");
});
</script>

در قسمت زیر کد پروژه جی کوئری را مشاهده می کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>sh711.com</h1>
<input type="text" id="t1" value="sh711"><br>
<textarea>aaaaa</textarea><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(':input').focus(function () {
$(this).css("background-color","yellow");
}).blur(function () {
$(this).css("background-color","#fff");
});
</script>
</body>
</html>


نویسنده : هدایت عباسی

عضویت طلایی
ثبت نظر