تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


جی‌کوئری روش های قدرتمندی برای ایجاد تغییر در یک صفحه 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>

 

 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین