مقداردهی عناصر در jQuery
تنظیم محتوایِ عناصر HTML
برای تنظیم محتوی در jQuery، همانند مطلب قبل، از متدهای زیر استفاده می شود:
- ()text - محتوای عنصر/عناصر انتخاب شده را تنظیم یا برمی گرداند.
- ()html - محتوای عنصر/عناصر انتخاب شده را تنظیم یا برمی گرداند. (همراه با تگ های HTML)
- ()val - محتوای فیلد/فیلدهای انتخاب شده داخل یک فرم را تنظیم یا برمی گرداند.
در مثال زیر، چگونگی تنظیم محتوی، با استفاده از متدهای ()text و ()html و ()val نشان داده شده است:
مثال (مقداردهی عناصر در jQuery)
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
متدهای ()text و ()html و ()val همراه با تابع callback
می توان سه متد ()text و ()html و ()val را همراه با تابع callback استفاده نمود. تابع callback دو پارامتر دارد:
- index - شماره عنصر جاری در لیست عناصر انتخاب شده
- origValue - مقدار قبلی خصوصیت
در نهایت با استفاده از دستور return مقدار جدیدی را که در نظر دارید، تنظیم می کنید.
در مثال زیر، متدهای ()text و ()html همراه با تابع callback نشان داده شده است:
مثال (مقداردهی عناصر در jQuery)
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
تنظیم مقدار یک خصوصیت
در jQuery برای تغییر/تنظیم مقدار برای یک خصوصیت از متد ()attr استفاده می شود.
در مثال زیر، مقدار خصوصیت href در تگ <a> با شناسه "w3s" با کلیک روی دکمه، تغییر داده می شود:
مثال (مقداردهی عناصر در jQuery)
$("#w3s").attr("href","http://www.w3schools.com/jquery");
});
در متد ()attr، می توان همزمان چند خصوصیت را مقدار دهی نمود.
در مثال زیر، چگونگی تنظیم خصوصیت های href و title بطور همزمان نشان داده شده است:
مثال (مقداردهی عناصر در jQuery)
$("#w3s").attr({
"href" : "https://beyamooz.com",
"title" : "Beyamooz jQuery"
});
});
متد ()attr همراه با تابع callback
می توان متد ()attr را همراه با تابع callback استفاده نمود. تابع callback دو پارامتر دارد:
- index - شماره عنصر جاری در لیست عناصر انتخاب شده
- origValue - مقدار قبلی خصوصیت
در نهایت با استفاده از دستور return مقدار جدیدی را که برای خصوصیت در نظر دارید، تنظیم می کنید.
در مثال زیر، متد ()attr همراه با تابع callback نشان داده شده است:
مثال (مقداردهی عناصر در jQuery)
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery HTML Reference
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 22356
دیدگاه‌ها
توی مثالهای مربوط به تغییر مقدار یه خصیصه با attr
مقدار عوض نمیشه توی مثالهایی که خودتون زدین.
با سلام.
کد زیر رو تست کنید. درسته و جواب میده. دقت کنید کل کد رو کامل کپی و در یه فایل با پسوند html. ذخیره کنید و سپس اجرا کنید. با کلیک روی دکمه تگ div توسط خاصیت attr خصوصیت style رو با مقادیر موردنظر پیدا می‌کنه.
کد:
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
<meta charset="u tf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<div id="DIVX&q uot;> this is a test. </div>
<input id="btn&qu ot; value="Cha nge Attribute" type="butt on" name="btn">
</div>
</body>
<script>
$('#btn').click(function(){
$('#DIVX').attr('style', 'color:red;bord er:1px solid #ccc;margin:5px;');
});
</script>
</html>
لطفا اگر مقدر هست در باره متد attr توضیحات بیشتری بدهید
با سلام.
در html هر تگ دارای خصوصیات مربوط به خود می‌باشد و هر کدام از این خصوصیات مقدار یا مقادیر خاصی رو می‌گیرن.
توسط متد attr در جی‌کوئری می‌توان به این تگ‌ها مقادیر مختلف داد و آنها را حذف کرد.
مثلا کد html زیر را ملاحظه کنید:
This is a test content.
توسط attr به تگ بالا خصوصیات style می‌دهیم:
$('#DIVX').attr('style', 'color:red;bord er:1px solid #ccc');
با اجرای دستور بالا در جی‌کوئری، محتویات تگ موردنظر ما به رنگ قرمز در خواهد آمد و همینطور یک بوردر خواهد گرفت...
با سلام و تشکر از سایت خوب شما
من می خواهم یک textbox داشته باشم که در آن تاریخ را وارد کنم و تاریخ بصورت خودکار با علامت ( / ) از هم تفکیک شود
بوسیله چه دستوری می توانم کاراکتر های درون text را مدیریت کنم و جایگاه علامت چشمک زن که مختصات کاراکتر های نوشته شده را مشخص می کند را چطور می توان تغییر داد
نمونه کاری که من می خواهم در این سایت وجود دارد ولی من نتونستم ازش استفاده کنم
http://foswiki.org/System/JQueryMaskedInput
لطفا من را راهنمایی کنید .
از این که سوال من با عنوان موضوع مرتبط نیست عذرخواهم. متاسفانه من انجمن سایت را پیدا نکردم و نمیدانم کجا باید این سوالات را مطرح کنم
با تشکر
سلام
برای کسب اطلاعات بیشتر از نحوه ی ماسک گذاری روی فیلدهای ورودی به مطلب زیر مراجعه فرمایید:
beyamooz.com/jquery/340-jquery-plugin/4079-%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86-%D9%85%D8%A7%D8%B3%DA%A9-%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C
با سلام و تشکر از پاسخ کامل شما
دو سوال دیگر هم داشتم
1 - بوسیله چه دستوری می توان مثلا کارکتر هار 6 تا 9 یک text را select کرد
2 - بوسیله چه دستوری می توان موقعیت علامت چشمک زن را تغییر داد
با تشکر
سلام مجدد
1- stackoverflow.com/questions/3085446/selecting-part-of-string-inside-an-input-box-with-jquery
2- در مثال زیر، زمانی که روی دکمه "btn1" کلیک می شود، مکان نما به عنصر با آی دی "input" منتقل می شود.
$(document).rea dy(function(){
$("#btn1").clic k(function(){
$("#input").foc us();
});
});
بنابراین اگر منظورتون از تغییر علامت چشمک زن، قراردادن تمرکز روی یک عنصر دلخواه بود، با استفاده از متد focus در jQuery این کار انجام خواهد شد.
با سلام
در سوال دوم منظور من درون متن text بود
فرض کنید محتوای text برابر با ( محمد حسین ) با شد و شما بخواهید در بعد از محمد و قبل از حسین چیزی بنویسید
اگر با موس در بین فاصله میان محمد و حسین کلیک کنید یک علامت چشمک زن در انجا قرار می گیرد و نوشتن در آنجا آغاز می شود
من می خواستم بوسیله کد علامت چشمک زن را در کارکتری خاص قرار دهم
با تشکر فراوان
سلام، در یکی از لینک های زیر به جواب خواهید رسید:
1- stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
2- www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/
سلام! میشه
function(i,orig Text)
رو توضیح بدید؟
i و origtext دقیقا چی هستن؟ من به جای i حرف b رو گذاشتم و نتیجه فرقی نکرد!
سلام .دقت کنید که i ،اندیس عنصری که به آن اشاره می کنیم و آن را سلکت کرده ایم را مشخص می کند. و origText هم متن اصلی عنصری که آن را در سلکتورش مشخص کرده ایم را مشخص می کند.
مثلا در کدهای زیر :
<!DOCTYPE html >
<html >
<head >
<script src="/jquery.min .js" ></script >
<script >
$(document).ready(function(){
$("#b tn1").click(fun ction(){
$("#test1").tex t(function(i,or igText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
$("#btn2").clic k(function(){
$("#test2").htm l(function(i,or igText){
return "Old html: " + origText + " New html: Hello <b >world!</ b > (index: " + i + ")";
});
});
});
</script >
</head >
<body >
<p id="test1" >This is a <b >bold</b > paragraph.</ p >
<p id="test2" >This is another <b >bold</b > paragraph.</ p >
<button id="btn1" >Show Old/New Text</button >
<button id="btn2" >Show Old/New HTML</button >
</body >
</html >
در خط 28 یک دکمه داریم و در خط 25 هم یک پاراگراف داریم. توجه کنید که آی دی پاراگراف ما test1 است و آی دی دکمه ی ما btn1 است.
حالا به خط 7 توجه کنید، ابتدا می خواهیم وقتی که روی دکمه ی ما که آی دی آن برابر با btn1 بود، کلیک شد دستورات بعدی اجرا شود... در ادامه قصد داریم متن اصلی(قدیمی) پاراگراف مورد نظر را که به طور پیش فرض در آرگومان origText قرار می گیرد را چاپ کنیم و اندیس عنصر با آی دی #text1 را که همان پاراگراف مورد نظر ما است را برگردانیم. حالا می خواهیم بدانیم که این اندیس چیست: این اندیس موقعیت قرار گیری عنصر مورد نظر در body است. همان طور که در خط 25 مشاهده می نمایید، پاراگراف مورد نظر ما، اولین تگ در تگ های body است پس اندیس آن 0 است.
سلام.
تو مثال های تنظیم مقدار یک خصوصیت، وقتی بعد از کلیک روی button مقدار href تغییر کرد، باید مقدارش در یک پیام نمایش داده بشه ؟ یا وقتی که روی لینک کلیک میکنیم به آدرس جدید هدایت شه ؟
هیچکدوم کار نمیکنن.
سلام، با تشکر اصلاح شد.