فرستادن محتوا و ویژگی ها در jQuery

یادگیری jQuery

تعداد بازدید : 2173

تاریخ و ساعت انتشار : یک شنبه 12 آذر 1396 23:20

فرستادن محتوا – text() و ()html و val()

هر سه متد درس قبل را برای تنظیم محتوا استفاده خواهیم کرد:
Text() - تنظیم یا برگرداندن محتوای عنصر انتخاب شده
Html() – تنظیم یا برگرداندن محتوای عنصر انتخاب شده
Val() – نتنظیم یا برگرداندن مقدار فیلد های فرم

مثال های زیر طریق استفاده از سه متد بالا را نشان میدهد:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("Dolly Duck");
    });
});
</script>
</head>
<body>

<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>

<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>

</body>
</html>

تابع بازگشتی برای text()و html() و val()

هر سه متد جی کوئری بالا همچنین دارای یک فانکشن برگشتی هستند.
تابع برگشتی دو پارامتر دارد: شاخص عنصر فعلی از لیست عنصرهای انتخابی و مقدار اصلی.
بعد شما مقدار دلخواه رو به عنوان یک مقدار جدید از تابع برمیگردونید

مثال زیر طریقه استفاده از این سه متد را با تابع بازگشتی نشان می دهد:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#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 + ")";
        });
    });
});
</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>

</body>
</html>

تنظیم ویژگی ها – attr()

متد attr() جی کوئری برای تنظیم/ تغییر مقدار ویژگی ها به کار می رود.

مثال زیر طریقه استفاده و تغییر (تنظیم) مقدار ویژگی href در عنصرa را نشان می دهد:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#w3s").attr("href", "https://www.w3schools.com/jquery");
    });
});
</script>
</head>
<body>

<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>

<button>Change href Value</button>

<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>

</body>
</html>
این متد به شما اجازه می دهد تا چند ویژگی را در یک زمان تنظیم کنید. مثال زیر طریقه تنظیم دو ویژگی href و title را در یک زمان نشان می دهد:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#w3s").attr({
            "href" : "https://www.w3schools.com/jquery",
            "title" : "W3Schools jQuery Tutorial"
        });
    });
});
</script>
</head>
<body>

<p><a href="https://www.w3schools.com" title="some title" id="w3s">W3Schools.com</a></p>

<button>Change href and title</button>

<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>

</body>
</html>

تابع بازگشتی برای text ()، html() و val()

هر سه متد جی کوئری بالا همچنین دارای یک فانکشن برگشتی هستند.
تابع برگشتی دو پارامتر دارد: شاخص عنصر فعلی از لیست عنصرهای انتخابی و مقدار اصلی.
شما می توانید مقدار دلخواه را به عنوان یک مقدار جدید از تابع برگردانید.

مثال زیر طریقه استفاده از متد های text()،html() را با تابع بازگشتی نشان می دهد:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#w3s").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>
</head>
<body>