wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

JQuery test rus

Total questions: 10

Worksheet time: 15mins

Name
Class
Date
1.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Exemplu de JQuery</title>

<style>

div {

border:2px solid;

margin:10px;

padding:10px;

border-radius:15px;

font-size:30px;

text-align:center;

background-color:lightblue;

}

</style>

<script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({height:300},"slow");

$("div").animate({width:300},"slow");

$("div").animate({height:100},"slow");

$("div").animate({width:100},"slow");

});

});

</script>

</head>

<body>

<div>DIV ce va fi animat</div>

<button>Fa un click</button>

</body>

</html>

a)

В данном коде событие - button

b)

В данном коде событие - ready

c)

В данном коде событие - animate

d)

В данном коде событие - click

e)

В данном коде событие - slow

2.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Exemplu de JQuery</title>

<style>

div {

border:2px solid;

margin:10px;

padding:10px;

border-radius:15px;

font-size:30px;

text-align:center;

background-color:lightblue;

}

</style>

<script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({height:300},"slow");

$("div").animate({width:300},"slow");

$("div").animate({height:100},"slow");

$("div").animate({width:100},"slow");

});

});

</script>

</head>

<body>

<div>DIV ce va fi animat</div>

<button>Fa un click</button>

</body>

</html>

a)

В данном коде селектор - button

b)

В данном коде селектор - div

c)

В данном коде селектор - document

d)

В данном коде селектор - animate

3.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Exemplu de JQuery</title>

<script>

$(document).ready(function(){

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

$("input").blur(function(){

$(this).css("background-color","#55aa00");

});

});

</script>

</head>

<body>

Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">

</body>

</html>

a)

В данном коде событие - blur

b)

В данном коде событие - ready

c)

В данном коде событие - css

d)

В данном коде событие - focus

e)

В данном коде событие - this

4.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Exemplu de JQuery</title>

<script>

$(document).ready(function(){

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

$("input").blur(function(){

$(this).css("background-color","#55aa00");

});

});

</script>

</head>

<body>

Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">

</body>

</html>

a)

В данном коде селектор - name

b)

В данном коде селектор - background-color

c)

В данном коде селектор - input

d)

В данном коде селектор - body

5.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Exemplu de JQuery</title>

<script>

$(document).ready(function(){

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

$("input").blur(function(){

$(this).css("background-color","#55aa00");

});

});

</script>

</head>

<body>

Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">

</body>

</html>

a)

В данном коде this означает элемент blur

b)

В данном коде this означает элемент document

c)

В данном коде this означает элемент input

d)

В данном коде this означает элемент body

6.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Exemplu de JQuery</title>

<script>

$(document).ready(function(){

$("html").hover(function(){

$("tr:even").css("background-color","white");

$("tr:odd").css("background-color","yellow");

},function(){

$("tr:even").css("background-color","yellow");

$("tr:odd").css("background-color","white");

});

});

</script>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<table border="1">

<tr>

<th>grupa MI-121</th>

</tr>

<tr>

<td>Arciuc Victor</td>

</tr>

<tr>

<td>Ceban Octavian</td>

</tr>

<tr>

<td>Ciobanu Vladimir</td>

</tr>

<tr>

<td>Ciorba Radu</td>

</tr>

<tr>

<td>Coceban Vlad</td>

</tr>

</table>

</body>

</html>

a)

В данном коде событие - even

b)

В данном коде событие - ready

c)

В данном коде событие - click

d)

В данном коде событие - hover

e)

В данном коде событие - css

7.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-3.5.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Exemplu de JQuery</title>

<script>

$(document).ready(function(){

$("html").hover(function(){

$("tr:even").css("background-color","white");

$("tr:odd").css("background-color","yellow");

},function(){

$("tr:even").css("background-color","yellow");

$("tr:odd").css("background-color","white");

});

});

</script>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<table border="1">

<tr>

<th>grupa MI-121</th>

</tr>

<tr>

<td>Arciuc Victor</td>

</tr>

<tr>

<td>Ceban Octavian</td>

</tr>

<tr>

<td>Ciobanu Vladimir</td>

</tr>

<tr>

<td>Ciorba Radu</td>

</tr>

<tr>

<td>Coceban Vlad</td>

</tr>

</table>

</body>

</html>

a)

В данном коде скрипт манипулирует элементом tr

b)

В данном коде скрипт манипулирует элементом html

c)

В данном коде скрипт манипулирует элементом td

8.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("img").mousedown(function(){

$("img").attr("src", "purple-dress_b.jpg");

$("p").attr("style", "position:fixed;top:10px;left:250px;z-index:+1;background-color:white;border-radius:15px;box-shadow:10px 10px 5px #888888;padding:25px;border:3px;font-size:20px;");

$("p").html("<b>Hey, do not touch me!!</b>");

});

});

</script>

</head>

<body>

<img src="purple-dress_f.jpg" width="250" height="450" />

<p style="position:fixed;top:10px;left:250px;">&nbsp;</p>

</body>

</html>

a)

В данном коде событие - src

b)

В данном коде событие - ready

c)

В данном коде событие - click

d)

В данном коде событие - mousedown

9.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("img").mousedown(function(){

$("img").attr("src", "purple-dress_b.jpg");

$("p").attr("style", "position:fixed;top:10px;left:250px;z-index:+1;background-color:white;border-radius:15px;box-shadow:10px 10px 5px #888888;padding:25px;border:3px;font-size:20px;");

$("p").html("<b>Hey, do not touch me!!</b>");

});

});

</script>

</head>

<body>

<img src="purple-dress_f.jpg" width="250" height="450" />

<p style="position:fixed;top:10px;left:250px;">&nbsp;</p>

</body>

</html>

a)

В данном коде селектор - img

b)

В данном коде селектор - src

c)

В данном коде селектор - document

d)

В данном коде селектор - p

10.

Анализируя код, отметьте все верные утверждения

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>Exemplu de FORMULAR</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="jquery-3.5.1.min.js"></script>

<script>

var s = [ "Parola trebuie sa contina litere si cifre", "Parola trebuie sa contina litere mici si mari", "Parola trebuie sa contina simboluri speciale", "Parola trebuie sa contina nu mai putin de 8 caractere", "Caracterele in parola nu trebuie sa se repete", "Nu utilizati aceiasi parola la cteva accounte", "Simbolurile in parola trebuie sa fie amestecate" ];

$(document).ready(function(){

i=0;

$("input:radio[name=raspuns]").change(function() {

x=$("input:radio[name=raspuns]:checked").val();

y=$("input:radio[name=raspuns]:checked").index();

$("#content2").text(x);

$("#content2").animate({

left:'350px',

});

if (y<2) {

$("#casatorit").prop({ "disabled":true });

$("#necasatorit").prop({ "disabled":true });

}

else {

$("#casatorit").prop({ "disabled":false });

$("#necasatorit").prop({ "disabled":false });

};

});

});

</script>

<style>

input[type=radio] {display:block;}

</style>

</HEAD>

<BODY>

<div>

<h3> Exemplu de formular</h3>

<form name="myform" >

<p> <input id="exemplu1" type="text" value="Camp de editare" size="25" maxlength="30"/> &nbsp;&nbsp;&nbsp;

<span id="content">&nbsp;&nbsp;&nbsp;</span></p>

<p> <input id="exemplu2" type="password" value="Parola" size="15" maxlength="15"/>&nbsp;&nbsp;&nbsp;

<span>&nbsp;&nbsp;&nbsp;</span></p>

<p>Întroduceţi vîrsta:<br/>

<input type="radio" name="raspuns" value="15" checked="checked" onClick="writeRadio('sub 15')">sub 15 ani

<input type="radio" name="raspuns" value="15-20" >15-20 ani

<input type="radio" name="raspuns" value="20-25" >20-25 ani

<input type="radio" name="raspuns" value="25-35">25-35 ani

<input type="radio" name="raspuns" value="35-45">35-45 ani

<input type="radio" name="raspuns" value="45" >peste 45 ani &nbsp;

<span id="content2" style="font-size:20px;position:absolute;"> &nbsp; </span>

</p>

<p>Ești casatorit(ă)?<br/>

<input type="checkbox" id="casatorit" >Da<br/>

<input type="checkbox" id="necasatorit">Nu<br/>

</p>

</form>

</div>

</BODY>

</HTML>

a)

В данном коде событие - click

b)

В данном коде событие - change

c)

В данном коде событие - ready

d)

В данном коде событие - animate

Similar Resources on Wayground

LATIHAN SOAL PEMROGRAMAN

15 questions

LATIHAN SOAL PEMROGRAMAN

quiz

Worksheet

•

9th Grade - University

GIT COURSE

13 questions

GIT COURSE

quiz

Worksheet

•

University

basic computer design

10 questions

basic computer design

quiz

Worksheet

•

University

PTIA - Pertemuan 1 - Post

10 questions

PTIA - Pertemuan 1 - Post

quiz

Worksheet

•

University

Pemrograman Web 1

10 questions

Pemrograman Web 1

quiz

Worksheet

•

University

Random stuff

12 questions

Random stuff

quiz

Worksheet

•

KG - Professional Dev...

ความรู้เบื้องต้นเกี่ยวกับ Flash

10 questions

ความรู้เบื้องต้นเกี่ยวกับ Flash

quiz

Worksheet

•

12th Grade - University

html

10 questions

html

quiz

Worksheet

•

12th Grade - University