0
0
0
آموزش jquery قسمت دهم کار با Event Object ها
آموزش jquery قسمت دهم کار با Event Object ها
در این قسمت از آموزش jquery به مفهوم کلیک (click) در jquery می پردازیم.
تابع Click
این تابع زمانی که روی عنصری انتخابی کلیک شود اجرا می شود.
در مثال زیر برای اینکه به مشخصات یک عنصر مانند مکان عنصر انتخابی ، نوع Event و... دسترسی داشته باشیم از یک function با ورودی eventArgs داخل تابع click استفاده کردیم
نکته:
در اینجا شما به جای eventArgs هر چیزی دیگری می توانید بنویسید.
<!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 () {
$("div").click(function (eventArgs) {
$(this).html("pageX:" + eventArgs.pageX + ",pageY:" + eventArgs.pageY + ", type:" + eventArgs.type + ", target:" + eventArgs.target);
});
})
</script>
</head>
<body>
<div>click iranganj</div>
</body>
</html>
مثال دیگر از تابع click
<!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 () {
$("body").click(function () {
alert("Clicked On Body");
});
$("div").click(function () {
alert("Clicked On Div");
});
});
</script>
</head>
<body>
<div>click iranganj</div>
</body>
</html>
تابع one
این تابع فقط یک بار برای هر عنصر انتخابی اجرا می شود و تابع click را داخل آن پیداه سازی کردیم.
<!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 () {
$("div").one("click", function () {
$(this).css({ background: "red", cursor: "auto" });
});
});
</script>
<style type="text/css">
div {
margin: 5px;
background-color: blueviolet;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>click iranganj</div>
<div>click iranganj</div>
<div>click iranganj</div>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال