031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » jquery » متد text در jQuery-درس هشتم

متد text در jQuery-درس هشتم

تاریخ:۲۷ام شهریور ۱۳۹۶
رعنا زارع
24

آموزش جی کوئری (JQuery)

درس هشتم :  متد text در jQuery 

در قسمت های قبلی آموزش جی کوئری درباره قواعد دستوری ، رویداد ها ، انتخابگرها در جی کوئری صحبت کردیم .همین طور سعی شد تا به صورت مختصرشما را با Ajax و متدهای get وpost  درAjax آشنا سازیم . در ادامه سعی داریم تا کمی کاربردی تر به توضیح متدها و توابع jquery بپردازیم. جی کوئری برای مدیریت عناصر صفحه متدهایی در اختیار شما قرار می دهد. به کمک برخی از این متدها ( text ،html ،attr  و  val) می توانید به مقادیر عناصر دسترسی داشته باشید . مقادیری را به یک عنصر نسبت دهید و یا از آن عنصر بخوانید. دراین قسمت از آموزش جی کوئری قصد داریم تا متد text در جی کوئری را به شما همراهان وبیار معرفی کنیم.

توانمندی های متد text  در جی کوئری :

متد text می تواند متن موجود در یک عنصر HTML مثل یک تگ را خوانده و در خروجی نمایش دهد.

متد text می تواند متن یک عنصر HTML مثل تگ پاراگراف را به متن دلخواه و تعیین شده تغییر دهد.

توجه داشته باشید که :

هنگامی که متد text در جی کوئری برای بازگرداندن متن استفاده می شود. متن تمام عناصری که با مشخصات داده شده توسط شما مطابقت دارند را بازمی گرداند . ( این متد علامت های زبان نوشتن تگ های HTML را در نظر نمی گیرد. )
هنگامی که متد text  در جی کوئری برای تغییر متن عنصر به کار می رود . متن تمام عناصری که با مشخصات داده شده توسط شما مطابقت دارند را تغییر می دهد .

نحوه استفاده از متد text  درجی کوئری:

$ ( selector ).text( پارامتر) ;

 Selector: این پارامتر تعیین کننده id عنصری است که می خواهیم متن درون آن را خوانده و در خروجی نمایش دهیم .

متد text در جی کوئری می تواند به دو صورت استفاده شود:

  • بدون پارامتر
  • همراه با یک پارامتر ورودی
  • در صورتیکه از متد text در جی کوئری بدون پارامتر استفاده شود، متن داخل عنصر مورد نظر را نمایش می دهد .

به مثال زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>به وب سایت طراحی سایت وبیار خوش آمدید</h1>
<hr>
<hr>
<p>در اینجا اولین متن آزمایشی خود را قرار دهید</p>
<p>در اینجا دومین متن آزمایشی خود را قرار دهید</p>
<input type="button" name="btn1" id="btn1" value="کلیک کن">

<script>
$(document).ready(function() {
	$("#btn1").click(function() {
		var test = $("p").text();
		alert(test);
	});
});
</script>

</body>
</html>

در این مثال متغیری با نام test تعریف کردیم. متغیر ها در jquery با کلمه کلیدی var تعریف می شوند. سپس با استفاده از متد text درجی کوئری متن پاراگراف موجود در صفحه را دریافت کرده و توسط alert  آن را به کاربر نمایش دادیم.

توجه داشته باشید متد text مقدار تمام عناصر انتخاب شده در صفحه را بر میگرداند.(در اینجا هردو پاراگراف را برگرداند.)                                                در صورتیکه متد text در جی کوئری را به همراه یک پارامتر ورودی فراخوانی کنید، مقدار مورد نظر را به عنصر نسبت می دهد. به مثال های زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>به وب سایت طراحی سایت وبیار خوش آمدید</h1>
<hr>
<p>در اینجا اولین متن آزمایشی خود را قرار دهید</p>
<p>در اینجا دومین متن آزمایشی خود را قرار دهید</p>
<input type="button" name="btn1" id="btn1" value="Set Text">

<script>
$(document).ready(function() {
	$("#btn1").click(function() {
		$("p").text("به سایت وبیار خوش آمدید.");
	});
});
</script>

</body>
</html>

دراین مثال با کلیک بر روی دکمه همانطور که مشاهده کردید. متن تمام پاراگراف های موجود در صفحه (به دلیل اینکه از انتخابگر p استفاده کردید ) را تغییر داد.

اگر بخواهید فقط مقدار اولین عنصر متناسب با انتخابگر را تغییر دهید  . و یا بخوانید می توانید از قطعه کد زیر به جای تگ scipt در بالا استفاده کنید:

<script>
$(document).ready(function() {
	$("#btn1").click(function() {
		var str = $("p:first").text();
		alert(str);
	});
});
</script>

ممنون از همراهی شما دوستان و همراهان وبیار.شما میتوانید انتقادات و پیشنهادات خود را برای بهبود کیفیت آموزش ها با ما در میان بگذارید.

وبیار را برای طراحی سایت های خود به خاطر بسپارید .

درباره نویسنده :
رعنا زارع

مطالب مرتبط

طراحی سایت فروش و تبلیغات مبلمان

طراحی سایت فروش و تبلیغات مبلمان

طراحی سایت فروش و تبلیغات مبلمان حراجی مبل طراحی سایت فروش و تبلیغات مبلمان سایت حراجی مبل ، با طراحی ساده و زیبای خود ، به معرفی انواع و دسته بندی های مبلمان پرداخته و با درج گالری عکس ها ، قیمت و جنس مبلمان ، محصولات خود را برای کاربران به نمایش گذاشته است. […]

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20 طراحی فروشگاه اینترنتی تحریر20 با خدمات فروش و عرضه انواع لوازم تحریر در اصفهان ، اخیرا توسط تیم طراحی سایت وب یار با رعایت تمامی المان های استاندارد سئو در آن طراحی شده است. طراحی گرافیکی کاملا اختصاصی و امکانات پیشرفته ای که در طراحی فروشگاه اینترنتی تحریر20 قرار گرفته است ، باعث […]

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته طراحی فروشگاه اینترنتی پخش پسته ، ارائه دهنده ی محصولات مغزیجات و خشکبار می باشد که ساختار استاندارد آن برای هر نوع طراحی فروشگاه اینترنتی مناسب است. یعنی شما با این قالب اختصاصی از تیم طراحی سایت وب یار قادرید هر نوع سایت فروشگاه اینترنتی را روی آن بالا بیاورید. […]

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور یکی از نمونه کارهای طراحی سایت وب یار، طراحی سایت آموزشی AZ کنکور می باشد که زمینه ی کاری آن مشاوره تحصیلی، برگذاری کلاس های آنلاین، آزمون آنلاین و فروش محصولات آموزشی است. اصول سئو در کدنویسی طراحی سایت AZ کنکور رعایت شده است همچنین در طراحی گرافیک قالب سایت […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید