آموزش jquery کار با محتویات صفحه قسمت پنجم

جی‌کوئری روش های قدرتمندی برای ایجاد تغییر در یک صفحه HTML دارد.

ابتدا بررسی کنیم DOM چیست :

 

DOM چیست ؟

مخفف (Document Object Model) ، استانداردی برای دسترسی به اسناد صفحات HTML و XML است.

 

گرفتن محتویات صفحه ، با :

 

  • ()text : محتویات متنی درون یک المنت صفحه را می‌گیرد یا قرار می‌دهد.
  • ()html : تمام محتویات درون یک المنت را می‌گیرد یا قرار می‌دهد که می‌تواند شامل تگ‌های HTML باشد.
  • ()val : محتویات فیلد یک فرم را می‌گیرد یا قرار می‌دهد یا قرار می‌دهد.

به کدهای زیر دقت کنید و آنها را اجرا کنید :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
 
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>

با کلیک روی Button با آی‌دی btn1 ، اخطاری نمایش داده می‌شود که فقط شامل متن المنت P می‌باشد. اما Button با آی‌دی btn2 محتویات المنت p  را به همراه تگ‌های موجود در آن به شکل اخطار نمایش می‌دهد.

 

کد زیر محتویات یک input فرم را نمایش می‌دهد :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>
 
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
</html>

()attr : گرفتن صفات و خاصیت‌های یک المنت :

به مثال زیر دقت کنید ، با این کد می‌توانید محتویات href از یک تگ a را بگیرید :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>
</head>
 
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href Value</button>
</body>
</html>

 

این هم به نحو احسن تمام

انقدر این آموزش خوب داره پیش میره دلم نمیاد آموزش jqurey رو ادامه ندم پس همراه باشید با بخش های بعدی

نمونه ای از آخرین کارهای ما

آموزش jquery کار با محتویات صفحه قسمت پنجمReviewed by Goolexacom on Mar 23Rating: 5.0

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت