شما برای استفاده از دستورات jquery باید ابتدا فروم ورکر اصلی ٰ رو به صفحتون لینک بدید. توی قسمت هدر کدهاتون اضافش کنید
مثلا به این شکل
<script xsrc=“jquery.js”></script>
خوب حالا میتونید کد ها خودتون رو اضافه کنید و این کد با استفاده از توابع موجود در این فروم ورکر اجرا میشن .
برای شروع کد های به این شکل رو میتونید استفاده کنید
<html>
<head>
<script xsrc=“jquery.js”></script>
<script>
$(document).ready(function(){
$(”.poem-stanza”).addClass(”highlight”);
});
</script>
<link rel=”stylesheet” type=”text/css” xhref=”style.css” />
</head>
<body>
<h1>hello world</h1>
<div class=”author” >voltan</div>
<div class=”cap” id=”cap1″ >
<h2 class=”captitle”">cap title</h2>
<div class=”poem”>
<h3 class=”poem-title”>div 2</h2>
<div class=”poem-stanza”>
<div>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1</div>
<div>test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</div>
<div>test 3 test 3 test 3 test 3 test 3 test 3 test 3 test 3</div>
<div>test 4 test 4 test 4 test 4 test 4 test 4 test 4 test 4</div>
</div>
</div>
test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1
<div class=”poem”>
<h4 class=”poem-title”>div 2</h2>
<div class=”poem-stanza”>
<div>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1</div>
<div>test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</div>
<div>test 3 test 3 test 3 test 3 test 3 test 3 test 3 test 3</div>
<div>test 4 test 4 test 4 test 4 test 4 test 4 test 4 test 4</div>
</div>
</div>
</div>
</body>
</html>
و از استایل های مثل این استفاده کنید
body {
background-color: #dedede;
}
h1 {
font-size: 25px;
}
h2 {
font-size: 20px;
}
h2 {
font-size: 15px;
}
.poem {
margin: 2px;
}
.highlight {
font-size: 32px;
background-color: #fff;
color: #eb0be0;
border: 1px #E18A00 solid;
}
همونطور که در کد های بالا میبیند از این دستور ساده استفاده کردیم
$(document).ready(function() {
$(’.poem-stanza’).addClass(’highlight’);
});
این دستور چیکار میکنه؟
به طور خلاصه کارش اینه که میاد و یه کلا css دیگه رو به جای کلاس قبلی قرار میده . توی کد های اچ تی ام ال دقت کنید. ما کلاسی به این اسم داریم : poem-stanza در حالی که در کد های css این کلاس موجود نیست . ولی در کد های سی اس اس کلاسی به این اسم داریم : highlight. خوب میشه خیلی ساده با کد بالا کای کرد که برای کلاس اولی از کد های کلاس دومی استفاده کنه . البته در این مثال شاید اگه مستقیم اسم کلاس رو عوض میکردیم صفحه ما به همون شکل نمایش داده میشد ولی جلوتر خواهید دید که با کد های jquery میشه افکت های دیگه ای هم به صفحه اضافه کرد که خیلی از این افکت ها رو مستقیما با کد های سی اس اس نمیشه به دست آورد و یا شما مجبورید ده ها خط کد جاوا و اچ تی ام ال بنویسید ولی با jquery تنها با سه یا چهار خط کد میتونید اون افکت رو ایجاد کنید.
خوب ساختار این تابع jquery که نوشته شد به این شکله
از $() برای گرفتن یک کلاس از صفحه استفاده کردیم
از .addClass() برای اضافه کردن یک کلاس در صفحه استفاده کردیم
و از $(document).ready(); برای اجرا کردن یک کد در صفحه استفاده کردیم .
این یه مثال خیلی سادس ولی برای شروع و برای اینکه مطمءن بشیم توابع jquery برای ما کار میکنه بهتره با این مثال ساده شروع کنیم.
نکته مهم : در عبارت addClass حتما از حرف C بزرگ استفاده کنید . اگه از cکوچیک استفاده کنید کدتون ممنه در ویندوز کار کنه ولی لینوکس کار نخواهد کرد .