آموزش 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 اضافه می شود.
مثال
<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 به ابتدای متن اضافه می شود.
مثال
<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 اضافه می شود.
مثال
<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 به ابتدای متن اضافه می شود.
مثال
<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>
امیدواریم این آموزش برای شما مفید باشد. کدهای بالا تست شده می باشند.
موفق باشید.
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید