دستورات و متدهای text() و html() و val() و attr() در جی کوئری

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

آمورش ویدئویی text و html و val و attr

دانلود فیلم و آموزش ویدئویی دستورات و متدهای text() و html() و val() و attr() در جی کوئری. در این فیلم با این دستورات و نحوه کار با آنها آشنا می شوید.

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

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

در این بخش از آموزش جی کوئری (Jquery tutorial) از تاپ سایت 98 قصد داریم به دستورات و متدهای text() و html() و val() و attr() در جی کوئری بپردازیم. با ذکر مثال تمامی دستورات و متدها را توضیح خواهیم داد. پس با ما باشید.

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

دستور و متد text() در جی کوئری

دستور و متد text() در جی کوئری ، محتوای عنصر انتخاب شده را برمی گرداند.

در مثال زیر متن TOPSITE98.COM با دستور alert نمایش داده می شود.

<!DOCTYPE html>
<html>
<body>
<h1><b>topsite98.com</b></h1>
<button>Click me</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("h1").text());
});
});
</script>
</body>
</html>

دستور و متد html() در جی کوئری

کد زیر را در کد بالا و بجای alert text قرار دهید.

خروجی دستور و متد html() در جی کوئری ، متن TOPSITE98.COM همراه با تگ b خواهد بود که با دستور alert نمایش داده می شود.

alert($("h1").html());

دستور و متد val() در جی کوئری

دستور و متد val() در جی کوئری بیشتر با عناصر فرم بکار می رود که دارای value است.

در مثال زیر یک input را قرار داده ایم مثلا نام علی را در آن وارد کرده و دکمه را کلیک نمایید.

خروجی نام علی در پیغام alert خواهد بود یعنی مقدار یا value را برمی گرداند.

<!DOCTYPE html>
<html>
<body>
<h1><b>topsite98.com</b></h1>
<input type="text">
<button>Click me</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("input").val());
});
});
</script>
</body>
</html>

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

حال به سراغ آموزش متد attr() در جی کوئری می رویم.

با متد و دستور attr می توانیم به ویژگی های عناصر html دسترسی داشته باشیم.

در مثال زیر ما ویژگی href تگ a را با دستور alert نمایش می دهیم.

<!DOCTYPE html>
<html>
<body>
<h1><b>topsite98.com</b></h1>
<a href="https://topsite98.com/" title="">topsite98</a>
<input type="text">
<button>Click me</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("a").attr("href"));
});
});
</script>
</body>
</html>

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

موفق باشید.

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

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