You are on page 1of 7

2

: JQuery

1)
:

1.

JQuery (

).
HTML :
<table>
<tr>

<td> </td>
<td>a</td>
<td></td>
</tr>
<tr>
<td>SK-9000-AC</td>
<td>Alfa Romeo</td>
<td></td>
</tr>
<tr>
<td>VE-8000-AB</td>
<td>Toyota Yaris</td>
<td></td>
</tr>
<tr>
<td>KO-7000-AD</td>
<td>Renault Meganne</td>
<td></td>
</tr>
<tr>
<td>PP-6000-AC</td>
<td>Mercedes</td>
<td></td>
</tr>
<tr>
<td>BT-5000-AB</td>
<td>BMW</td>
<td>
/td>
</tr>
<tr>
<td>SN-4000-AC</td> <td>Peugeot</td>

<td></td></tr></table>

CSS:
.boja {
}

font-weight: bold;
color: #FF0000;

.border {
background-color: #ccc;
}

JQuery:
$('tr:nth-child(odd)').addClass('boja');
$('td:nth-child(odd)').addClass('border');

2)
2:

2.

3. Change

Change ( 3)
Jquery.
HTML + CSS:
<style>
.urlBold
{
font-weight:bold;
color: #0000FF;
}
</style>
<ul id="list">
<li>Logo-Photo</li>
<ol type="I">
<li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>url-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
</ol>
<li>Header-Photo</li>
<ol type="I">
<li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>url-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
</ol>
<li>Footer-Photo</li>

<ol type="I">
<li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>url-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
</ol>
<li>Main-Photo</li>
<ol type="I">
<li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>ur-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
<li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
</ol>
</ul>

JQuery:
var turn = true;
function toggle() {
if (turn) {
$("#list li").removeClass("urlBold");
$("#list > li").addClass("urlBold");
turn = false;
}
else {
$("#list li").addClass("urlBold");
turn = true;
}
}
3)
JQuery tab- 4.

4.

HTML CSS .
JQuery:
$(document).ready(function() {
$("#switcher .button").bind('click', function(event) {
$('#switcher .button-selected').addClass('button');
$('#switcher .button-selected').removeClass('button-selected');
$(this).addClass('button-selected');
if (this.id == 1) {
$('#fragment-1').removeClass();
$('#fragment-1').addClass('tab');
$('#fragment-2').removeClass();
$('#fragment-2').addClass('hidden');

$('#fragment-3').removeClass();
$('#fragment-3').addClass('hidden');
} else if (this.id == 2) {
$('#fragment-1').removeClass();
$('#fragment-1').addClass('hidden');
$('#fragment-2').removeClass();
$('#fragment-2').addClass('tab');
$('#fragment-3').removeClass();
$('#fragment-3').addClass('hidden');
} else if (this.id == 3) {
$('#fragment-1').removeClass();
$('#fragment-1').addClass('hidden');
$('#fragment-2').removeClass();
$('#fragment-2').addClass('hidden');
$('#fragment-3').removeClass();
$('#fragment-3').addClass('tab');
}
});
});

4)
JQuery (.animate())
,
:

5.

1. ,
2, 2 3, 3 4
4 1.
HTML:
<p>click the box</p>
<div id="elm" class="elm"
style="height: 40px; width: 40px; background-color: blue; position:
absolute;">

</div>

JQuery:
$(document).ready(function() {
var width = $(document).width();
var height = $(document).height();
var elmW = $("#elm").width();
var elmH = $("#elm").height();
var newLeft = width / 2 - elmW / 2;
$("#elm").offset({
left : newLeft
});
$("#elm").css('border', 'solid red 0px');
$("#elm").click(function() {
var
var
var
var
var
var
var

startL = $(this).offset().left;
startT = $(this).offset().top;
thisW = $(this).width();
thisH = $(this).height();
left1 = width - thisW;
topMid = height / 2 - thisH / 2;
topEnd = height - thisH;

$(this).animate({
left : left1,
top : topMid
}, 1800, function() {
$(this).animate({
left : startL,
top : topEnd
}, 1800, function() {
$(this).animate({
left : 0,
top : topMid
}, 1800, function() {
$(this).animate({
left : startL,
top : startT
}, 1800, function() {
});});});});});});

5)
(
) : a,s,d,w,
5px : , , , , .
HTML:
<div id="elm" class="elm"
style="height: 40px; width: 40px; background-color: blue; position: absolute;">
</div>

JQuery :

$(document).ready(function() {
$(document).keypress(function(e) {
var c = (e.which ? e.which : e.keyCode);
switch (String.fromCharCode(c)) {
case 'd':
var left=$("#elm").css("left");
left=parseInt(left);
$("#elm").css("left",(left+5));
break;
case 's':
var top=$("#elm").css("top");
top=parseInt(top);
$("#elm").css("top",(top+5));
break;
case 'a':
var left=$("#elm").css("left");
left=parseInt(left);
$("#elm").css("left",(left-5));
break;
case 'w':
var top=$("#elm").css("top");
top=parseInt(top);
$("#elm").css("top",(top-5));
break; }});});

6)
4

7:

7)
.
8.

, (.
x1.5), . ,
.
.
,
.
: $().css('fontSize')