.attr() - Manipulation , jQuery |
.attr() เป็นการใช้ Manipulation ในการเพิ่ม โดยรับค่าของแอตทริบิวต์สำหรับองค์ประกอบที่แรกในชุดขององค์ประกอบที่ตรงกัน เช่น การอ้างถึงชื่อ attribute ของ element
Syntax
attr( attributeName )
attr( attributeName, value )
.attr( attributeName,value )
.attr( map )
.attr( attributeName,function(index, attr) )
Example 1 ตัวอย่างการใช้งาน .attr()
Manipulationattr1.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var title = $("em").attr("title");
$("div").text(title);
});
</script>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ $("em").attr("title"); คืออ้างถึงแท็ก <em> ที่มี attrubite ชื่อว่า title และอ่านค่าเก็บไว้ในตัวแปร และคำว่าไปใส่ให้กับ <div>
Example 2 ตัวอย่างการใช้งาน .attr()
Manipulationattr2.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").attr({
src: "hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
});
</script>
</head>
<body>
<img />
<img />
<img />
<div><B>Attribute of Ajax</B></div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ $("div").text($("img").attr("alt")); เพื่อกำหนดคุณสมบัติของ <img>
Example 3 ตัวอย่างการใช้งาน .attr()
Manipulationattr3.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
button { margin:10px; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button:gt(1)").attr("disabled","disabled");
});
</script>
</head>
<body>
<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ $("button:gt(1)").attr("disabled","disabled"); เพื่อ disabled ปุ่ม button
Example 4 ตัวอย่างการใช้งาน .attr()
Manipulationattr4.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
});
</script>
</head>
<body>
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
การอ่านและแสดงคุณสมบัติต่าง ๆ ด้วย attr
Example 5 ตัวอย่างการใช้งาน .attr()
Manipulationattr5.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").attr("src", function() {
return this.title;
});
});
</script>
</head>
<body>
<img title="hat.gif"/>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ $("img").attr("src", function() เพื่ออ้างถึง attr ของ title พร้อม ๆ กับการนำค่าที่ได้ไปใส่กับ src
ลิ้งค์ที่ควรศึกษา
Go to : jQuery Selectors : jQuery Selectors and Element
Go to : jQuery HTML : jQuery and HTML
Go to : .attr() - Attributes , jQuery
เกี่ยวกับบทความ
ส่วนหนึ่งของบทความได้เรียบเรียงและแปลจากเว็บไซต์ jQuery.Com โค้ดตัวอย่างคำสั่งนี้อยู่ภายใต้สัญญาอนุญาตของ GFDL สามารถนำโค้ดและคำสั่งใช้งานได้ฟรี สงวนลิขสิทธิ์เฉพาะคำอธิบายภาษาไทย
|
 ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
| |
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
| |
Score Rating : |
 |
|
| |
Create/Update Date : |
2011-09-22 21:11:07 /
2017-03-19 13:48:15 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
Load balance : Server 05
