آموزش append و prepend و after و before در جی کوئری

هدایت عباسی آموزش جی کوئری

آموزش ویدئوییappend و prepend و after و before در جی کوئری

دانلود فیلم و آموزش ویدئوییappend و prepend و after و before در جی کوئری. در این فیلم با این دستورات آشنا می شوید و نحوه کار با آنها را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری (Jquery tutorial) قصد داریم به آموزش دستورات append و prepend و after و before در جی کوئری بپردازیم.

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

خطا

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

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

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

آموزش دانلود جی کوئری

آموزش دستور و متد append در جی کوئری

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

متد append در جی کوئری برای اضافه کردن یک عنصر به انتهای عنصر انتخاب شده بکار می رود.

در مثال زیر با کلیک روی دکمه با id ی btn2 یک li به انتهای تگ ul اضافه می شود.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$("ul").append("<li>topsite98.com</li>");
});
});
</script>
</head>
<body>
<ul>
<li>List item 1</li>
<li>sh711.com</li>
<li>List item 2</li>
</ul>
<button id="btn2">append</button>
</body>
</html>

آموزش متد prepend در جی کوئری

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

متد prepend در جی کوئری برای اضافه کردن یک عنصر به ابتدای عنصر انتخاب شده بکار می رود.

در مثال زیر با کلیک روی دکمه با id ی btn متن website به ابتدای متن اضافه می شود.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("h1").prepend("website ");
});
});
</script>
</head>
<body>
<h1>topsite98.com</h1>
<button id="btn">prepend</button>
</body>
</html>

آموزش دستور و متد after در جی کوئری

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

متد after در جی کوئری برای اضافه کردن یک عنصر به انتهای عنصر انتخاب شده بکار می رود.

در مثال زیر با کلیک روی دکمه با id ی btn یک تگ p به انتهای h1 اضافه می شود.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("h1").after("<p>sh711.com</p>");
});
});
</script>
</head>
<body>
<h1>topsite98.com</h1>
<button id="btn">after</button>
</body>
</html>

متد before در جی کوئری

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

متد before در جی کوئری برای اضافه کردن یک عنصر به ابتدای عنصر انتخاب شده بکار می رود.

در مثال زیر با کلیک روی دکمه با id ی btn متن website به ابتدای متن اضافه می شود.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("h1").before("<p>Website</p>");
});
});
</script>
</head>
<body>
<h1>topsite98.com</h1>
<button id="btn">before</button>
</body>
</html>

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

موفق باشید.

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

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