игра брюс 2048
Главная / Интернет-технологии / Введение в jQuery / Тест 12

Введение в jQuery - тест 12

Упражнение 1:
Номер 1 
Свойство height элемента div по умолчанию равно:

Ответ:

 (1) Высоте элемента без отступов и бордюра 

 (2) Высоте элемента с внутренним отступом 

 (3) Высоте элемента с внутренним отступом, включая ширину бордюра 

 (4) Высоте элемента со всеми отступами и бордюром 

Номер 2 
Дан код:

var a = 1;
function getOdd(arg){
			var a = 2;
			if(arg%2){
				return  arg + a;
			}else{
				a = window.a;
				return arg + a;
			}
}

Что будет возвращено при вызовах – getOdd(1)  и getOdd(2) ?

Ответ:

 (1) 3 и 4; 

 (2) 3 и 3; 

 (3) 2 и 3; 

 (4) 3 и undefined 

Упражнение 2:
Номер 1 
Выбираем все теги a и b:

Ответ:

 (1) $("a, b") 

 (2) $("a + b") 

 (3) $("#a, #b") 

 (4) $("a && b") 

Номер 2 
Есть таблица со свойствами, описанными в глобальных стилях:

	<style>
td {width:100px;
    		    height:100px;
	               background-color:green;
	              color:white;
	             text-align:center;
	            font-size:40px
                      }
       </style>
<body >
<table class="table">
			<tr class="header">
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr class="body">
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr class="footer">
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
</table>
<script></script>
</body>

Как с помощью jQuery сделать цвет цифры "6" в таблице красным?

Ответ:

 (1) $(".table tr: eq(1)").css("color", "red"); 

 (2) $(".table, .body, td: eq(2)").css("color", "red"); 

 (3) $("tr .body")[2].css("color", "red"); 

 (4) $(".body td:eq(2)").css("color", "red"); 

Упражнение 3:
Номер 1 
$("#message").toggleClass('text-danger bg-success') для <p id="message" class="text-danger text-left"> даст следующий результат:

Ответ:

 (1) <p id="message" class="text-left bg-success"> 

 (2) <p id="message" class="text-danger bg-success"> 

 (3) <p id="message" class="text-left"> 

 (4) <p id="message" class="text-danger text-left bg-success"> 

Номер 2 
Есть блок со свойствами, описанными в глобальных стилях:

<style>
.div {width: 100px;
		height: 100px;
		background-color: green;
		position: absolute;
		top: 150px;
		left: 200px;
		transition: top 0.5s
	     }
.b {top: 350px;
	}
</style>
<body >
<div class="div"></div>
<script>
$(".div").click(function(){
      		 $(this).toggleClass("b");
});
</script>
</body>

Что будет происходить при кликах на блоке?

Ответ:

 (1) Блок один раз опустится вниз на 350 пикселей; 

 (2) Блок будет с каждым кликом опускаться на 350 пикселей; 

 (3) Блок будет попеременно опускаться и подниматься на 350 пикселей; 

 (4) У блока сбросятся стили описанные для класса "div" и он расположится в левом верхнем углу окна браузера; 

Упражнение 4:
Номер 1 
Это событие не является событием HTML DOM:

Ответ:

 (1) onupdate 

 (2) onload 

 (3) onclick 

 (4) oncontextmenu 

Номер 2 
Есть элемент div с классом ".div" и обработчиками событий "click" и "mousedown":

<div class="div"></div>
$(".div").on("click", function(){ $(this).css("background-color","red") }).on("mousedown", function(){ $(this).css("background-color","green") });

Как из посторонней функции не затрагивая div в браузере закрасить его зеленым цветом?

Ответ:

 (1) вызвать $(".div").trigger("click"); 

 (2) вызвать $(".div").onmousedown(); 

 (3) вызвать $(".div").trigger("mousedown"); 

 (4) вызвать $(".div").onclick(); 

Упражнение 5:
Номер 1 
$("#accord").slideToggle()

Ответ:

 (1) Покажет все закрытые и спрячет все открытые элементы 

 (2) Только спрячет все открытые элементы 

 (3) Покажет все элементы 

 (4) Спрячет все зактытые элементы 

Номер 2 
Дан код:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js"></script>
</head>
<style>
div {width: 100px;
		height: 100px;
		background - color: blue;
		position: absolute;
		top: 150px;	
		}
.first {left: 200px}
.second {left: 330px}
.third {left: 460px}
</style>
<body >
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<script>
$(".first").fadeToggle(100, function(){ $(".second").fadeToggle(100, function(){$(".first").fadeToggle(100, function(){ $(".third").fadeToggle(100, function(){ $(".second").fadeToggle(100, function(){ $(".third").fadeToggle(100)})})})})});
</script>
</body>
</html>

В каком порядке будут происходить изменения в окне браузера при выполнении данного скрипта?

Ответ:

 (1) <div class="first"> исчезнет <div class="second"> исчезнет <div class=" first"> исчезнет <div class=" third"> появится <div class="second"> появится <div class="third"> появится  

 (2) <div class="first"> исчезнет <div class="second"> появится <div class=" first"> исчезнет <div class="third"> появится <div class="second"> исчезнет <div class="third"> появится  

 (3) <div class="first"> исчезнет <div class="second"> появится <div class=" first"> исчезнет <div class="third"> появится <div class=" second"> исчезнет <div class="third"> появится  

 (4) <div class="first"> исчезнет <div class="second"> исчезнет <div class="first"> появится <div class="third"> исчезнет <div class="second"> появится <div class="third"> появится  

Упражнение 6:
Номер 1 
Добваить элемент в список

Ответ:

 (1) $('ul').prepend('<li>Новый элемент</li>'); 

 (2) $('<li>Новый элемент</li>').insertInto('ul'); 

 (3) $(list).add('<li>Новый элемент</li>'); 

 (4) $('ul').append('Новый элемент'); 

Номер 2 
Есть код:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src=" jquery-1.12.0.min.js"></script>
</head>
<style>
#target {width:50px;
		height:50px;
		background-color: red;
		border-radius: 25px}
</style>
<body >
<div id="target"></div>
<script>
window.onmousemove = function(){
		var x = event.clientX;
		var y = event.clientY;
		var target = $("#target");
		//вставить код………………
}
</script>
</body>
</html>

Дополнить код, чтобы при движении курсора по окну браузера красный круг перемещался за курсором (таким образом, чтобы курсор находился в центре круга) :

Ответ:

 (1) target.offset({top: y-target.height()/2, left: x-target.width()/2}); 

 (2) target.offset({top: y, left: x}); 

 (3) target.offsetTop(x).offsetLeft(y); 

 (4) target.css({position:"absolute", top: x, left: y}); 

Упражнение 7:
Номер 1 
Собрать данные формы для отправки в формате JSON

Ответ:

 (1) serializeArray() 

 (2) serialize() 

 (3) serializeJson() 

 (4) getJsonArray() 

Номер 2 
Даны три чекбокса:

<input type="checkbox" name="first">
< input type="checkbox" name="second">
< input type="checkbox" name="third">

Выбрать  обработчик событий, позволяющий при клике на том или ином чекбоксе получить значение "name" данного чекбокса.

Ответ:

 (1) $("input").on("click", function(){ return($(this).attr("name")) }); 

 (2) $("input").on("click", function(){ return($(this).attr()) }); 

 (3) $("input").on("click", function(){ return($(this).attr("name")) }); 

 (4) $("input").on("change", function(){ return($(this).attr("name")) }); 

Упражнение 8:
Номер 1 
Какие AJAX события идут в правильном порядке:

Ответ:

 (1) ajaxStart beforeSend 

 (2) ajaxComplete error 

 (3) ajaxError ajaxSuccess 

 (4) ajaxSuccess success 

Номер 2 
Есть элемент <div id="div"></div>, с обработчиком onmousedown, реализующим эффект перетаскивания блока мышью на экране (Drug'n'drop). Написать обработчик, позволяющий при отжатии левой кнопки мыши отправлять данные о координатах элемента на сервер "server.js".

Ответ:

 (1) $("#div").on("mouseup", function(){ var coords = $(this).offset(); $.get("/server.js", {top: coords.top+"px", left: coords.left+"px"}); });  

 (2) $("#div").on("mouseup", function(){ var coords = $(this).offset(); $ ("GET", "/server.js", {top: coords.top+"px", left:coords.left+"px"}); });  

 (3) $("#div").on("mouseup", function(){ var coords = $(this).offset(); $ ("POST", "/server.js", {top: coords.top+"px", left:coords.left+"px"}); });  

Упражнение 9:
Номер 1 
Объект Deferred используется для:

Ответ:

 (1) Создания очереди 

 (2) Распараллеливания исполнения 

 (3) Управления функциями обратного вызова 

 (4) Управления очередью функций без разделения на позитивный и негативный сценарии 

Номер 2 
Даны три элемента:

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

В скрипте – объект Deferred, в который каждый из элементов добавляет функцию для изменения своих свойств:

var d = $.Deferred();
$(".first").on("click", function(){
	d.done (function(){
		//изменение свойства элемента с классом "first"
});
$(".second").on("click", function(){
	d.done (function(){
		//изменение свойства элемента с классом "second"
	});
});
$(".third").on("click", function(){
	d.done (function(){
		//изменение свойства элемента с классом "third"
	});
});

Будут ли выполнены функции при вызове d.resolve() если изменение свойств задано в виде $(this).css("свойство","значение")?

Ответ:

 (1) Да, для всех элементов – своя функция; 

 (2) Да, для первого элемента – все три функции; 

 (3) Нет; 

Упражнение 10:
Номер 1 
jQuery.data()

Ответ:

 (1) Сначала обращается в совой реестр, а затем к аттрибутам HTML 

 (2) Манипулирует только своим реестром 

 (3) Ищет данные в cookies 

 (4) Не умеет обращаться к data-аттрибутам 

Номер 2 
В jQuery UI отсутствуют

Ответ:

 (1) Модули 

 (2) Плагины 

 (3) Виджеты 

 (4) Темы 



Главная / Интернет-технологии / Введение в jQuery / Тест 12