0
0
0
آموزش jquery قسمت پنجم کار با Manipulating
آموزش jquery قسمت پنجم کار با Manipulating
در قسمت پنجم از آموزش jquery به مفهوم Manipulating در jquery می پردازیم.
کلمه Manipulating را در فارسی به معنی دست کاری ترجمه شده.
در مثال زیر با استفاده از تابع html() کل (تمامی تگ ها و محتوای آن ها) داخل تگ ul را با استفاده از تابع alert نمایش دادیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert($("#list").html());
});
</script>
</head>
<body>
<ul id="list">
<li>iranganj 1</li>
<li>iranganj 2</li>
<li>iranganj 3</li>
</ul>
</body>
</html>
همچین می توانیم داخل تایع html() تگ و متنی را نوشته، در این صورت جایگزین تگ های قبلی می شود.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#list").html("<li>this is the new list item</li>");
});
</script>
</head>
<body>
<ul id="list">
<li>iranganj 1</li>
<li>iranganj 2</li>
<li>iranganj 3</li>
</ul>
</body>
</html>
برای مشاهده اطلاعات (تگ ها و متون) داخل body می توان کل body را انتخاب کرد و با استفاده از تابع alert نمایش داد.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert($("body").html());
});
</script>
</head>
<body>
<ul id="list">
<li>iranganj 1</li>
<li>iranganj 2</li>
<li>iranganj 3</li>
</ul>
</body>
</html>
با استفاده از تابع attr می توانیم ویژگی های یک تک را مورد بررسی یا نمایش قرار دهیم
در مثال زیر مسیر تصویر و عنوان و همچنین alt تگ img را با استفاده از متد alert نمایش داده ایم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert($("img").attr("src"));
alert($("img").attr("alt"));
alert($("img").attr("title"));
});
</script>
</head>
<body>
<img src="Logo.png" alt="ایران گنج" title="لوگو" />
</body>
</html>
در مثال زیر با استفاده از attr یک ویژگی به لینک اضافه کردیم
برای اینکه لینک را در یک صفحه جدید باز کنیم ویژگی target را برابر _blank قرار دادیم. در اسن صورت زمانی که روی لینک کلیک کنیم در یک پنجره جدید نمایش داده خواهد شد.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").attr("target", "_blank");
});
</script>
</head>
<body>
<a href="http://iranganj.ir">ایران گنج</a>
</body>
</html>
در مثال زیر با استفاده attr دو ویژگی را به تگ img اضافه کردیم.
همچنین با استفاده از removeAttr می توانیم یک ویژگی را از تگ ها حذف کنیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("img").attr({ src: "Logo.png", alt: "bank" });
//$("a").removeAttr("href");
$("a[href $=ir]").after("<img src='logo.png'/>");
});
</script>
</head>
<body>
<img title="لوگو" />
<br />
<a href="http://iranganj.ir">ایران گنج</a>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال