سبد (0)

تبلیغات

مقداردهی عناصر در jQuery

تنظیم محتوایِ عناصر HTML

برای تنظیم محتوی در jQuery، همانند مطلب قبل، از متدهای زیر استفاده می شود:

  • ()text - محتوای عنصر/عناصر انتخاب شده را تنظیم یا برمی گرداند.
  • ()html - محتوای عنصر/عناصر انتخاب شده را تنظیم یا برمی گرداند. (همراه با تگ های HTML)
  • ()val - محتوای فیلد/فیلدهای انتخاب شده داخل یک فرم را تنظیم یا برمی گرداند.

در مثال زیر، چگونگی تنظیم محتوی، با استفاده از متدهای ()text و ()html و ()val نشان داده شده است:

مثال (مقداردهی عناصر در jQuery)

$("#btn1").click(function(){
  $("#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 دو پارامتر دارد:

  1. index - شماره عنصر جاری در لیست عناصر انتخاب شده
  2. origValue - مقدار قبلی خصوصیت

در نهایت با استفاده از دستور return مقدار جدیدی را که در نظر دارید، تنظیم می کنید.

در مثال زیر، متدهای ()text و ()html همراه با تابع callback نشان داده شده است:

مثال (مقداردهی عناصر در jQuery)

$("#btn1").click(function(){
  $("#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)

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3schools.com/jquery");
});
خودتان امتحان کنید »

در متد ()attr، می توان همزمان چند خصوصیت را مقدار دهی نمود.

در مثال زیر، چگونگی تنظیم خصوصیت های href و title بطور همزمان نشان داده شده است:

مثال (مقداردهی عناصر در jQuery)

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.beyamooz.com",
    "title" : "Beyamooz jQuery"
  });
});
خودتان امتحان کنید »

متد ()attr همراه با تابع callback

می توان متد ()attr را همراه با تابع callback استفاده نمود. تابع callback دو پارامتر دارد:

  1. index - شماره عنصر جاری در لیست عناصر انتخاب شده
  2. origValue - مقدار قبلی خصوصیت

در نهایت با استفاده از دستور return مقدار جدیدی را که برای خصوصیت در نظر دارید، تنظیم می کنید.

در مثال زیر، متد ()attr همراه با تابع callback نشان داده شده است:

مثال (مقداردهی عناصر در jQuery)

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});
خودتان امتحان کنید »

jQuery HTML Reference

For a complete overview of all jQuery HTML methods, please go to our jQuery HTML/CSS Reference.

دیدگاه‌ها  

+3 # azadeh ahmadi 1394-07-23 13:54
توی مثالهای مربوط به تغییر مقدار یه خصیصه با attr
مقدار عوض نمیشه توی مثالهایی که خودتون زدین.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-23 20:56
با سلام.
کد زیر رو تست کنید. درسته و جواب میده. دقت کنید کل کد رو کامل کپی و در یه فایل با پسوند 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>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amin 1394-07-14 20:09
لطفا اگر مقدر هست در باره متد attr توضیحات بیشتری بدهید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-07-15 06:59
با سلام.
در html هر تگ دارای خصوصیات مربوط به خود می‌باشد و هر کدام از این خصوصیات مقدار یا مقادیر خاصی رو می‌گیرن.
توسط متد attr در جی‌کوئری می‌توان به این تگ‌ها مقادیر مختلف داد و آنها را حذف کرد.
مثلا کد html زیر را ملاحظه کنید:
This is a test content.

توسط attr به تگ بالا خصوصیات style می‌دهیم:
$('#DIVX').attr('style', 'color:red;bord er:1px solid #ccc');

با اجرای دستور بالا در جی‌کوئری، محتویات تگ موردنظر ما به رنگ قرمز در خواهد آمد و همینطور یک بوردر خواهد گرفت...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # محمدحسین واحدی 1394-07-05 00:18
با سلام و تشکر از سایت خوب شما
من می خواهم یک textbox داشته باشم که در آن تاریخ را وارد کنم و تاریخ بصورت خودکار با علامت ( / ) از هم تفکیک شود
بوسیله چه دستوری می توانم کاراکتر های درون text را مدیریت کنم و جایگاه علامت چشمک زن که مختصات کاراکتر های نوشته شده را مشخص می کند را چطور می توان تغییر داد

نمونه کاری که من می خواهم در این سایت وجود دارد ولی من نتونستم ازش استفاده کنم
http://foswiki.org/System/JQueryMaskedInput
لطفا من را راهنمایی کنید .
از این که سوال من با عنوان موضوع مرتبط نیست عذرخواهم. متاسفانه من انجمن سایت را پیدا نکردم و نمیدانم کجا باید این سوالات را مطرح کنم
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-07-05 09:17
سلام
برای کسب اطلاعات بیشتر از نحوه ی ماسک گذاری روی فیلدهای ورودی به مطلب زیر مراجعه فرمایید:
http://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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # محمدحسین واحدی 1394-07-05 19:15
با سلام و تشکر از پاسخ کامل شما
دو سوال دیگر هم داشتم
1 - بوسیله چه دستوری می توان مثلا کارکتر هار 6 تا 9 یک text را select کرد
2 - بوسیله چه دستوری می توان موقعیت علامت چشمک زن را تغییر داد
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-07-05 20:53
سلام مجدد
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 این کار انجام خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # محمدحسین واحدی 1394-07-06 00:35
با سلام
در سوال دوم منظور من درون متن text بود
فرض کنید محتوای text برابر با ( محمد حسین ) با شد و شما بخواهید در بعد از محمد و قبل از حسین چیزی بنویسید
اگر با موس در بین فاصله میان محمد و حسین کلیک کنید یک علامت چشمک زن در انجا قرار می گیرد و نوشتن در آنجا آغاز می شود
من می خواستم بوسیله کد علامت چشمک زن را در کارکتری خاص قرار دهم
با تشکر فراوان
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-07-06 07:17
سلام، در یکی از لینک های زیر به جواب خواهید رسید:
1- stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
2- www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # حمید001 1394-04-17 14:05
سلام! میشه
function(i,orig Text)
رو توضیح بدید؟
i و origtext دقیقا چی هستن؟ من به جای i حرف b رو گذاشتم و نتیجه فرقی نکرد!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-04-17 23:25
سلام .دقت کنید که 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 است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # nazila 1393-11-27 00:18
سلام.
تو مثال های تنظیم مقدار یک خصوصیت، وقتی بعد از کلیک روی button مقدار href تغییر کرد، باید مقدارش در یک پیام نمایش داده بشه ؟ یا وقتی که روی لینک کلیک میکنیم به آدرس جدید هدایت شه ؟
هیچکدوم کار نمیکنن.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-11-27 07:24
سلام، با تشکر اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی