JavaScript Tutorial/jQuery/this
30. this pointer
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var str = $(this).text();
alert(str)
});
</script>
</head>
<body>
<table>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</table>
</body>
</html>
30. Use jQuery object instead of the regular DOM element, use the $(this) function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});
});
</script>
<style>
.example { font-style:italic; }
</style>
</head>
<body>
<body>
To do list: <span>(click here to change)</span>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
30. Use this to reference document
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").replaceWith("<div>" + $(this).text() + "</div>");
});
</script>
<style>
div { border:2px green solid;}
</style>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>