آموزش jquery قسمت پنجم کار با Manipulating
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>

دانلود

نویسنده حسین فتحی
گروه مطلب Jquery
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۶ اردیبهشت ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم