Форум

Sufir · #1 (**permalink**) 08.10.2010, 16:49

Здравствуйте!

Сегодня вот взялся изучать сей инструмент и с первых же строк возникли проблемы. Набросал следующий код по примерам на официальном сайте с текущей версией jQuery (1.4.2). Пробовал в Opera и FF.

<html><head>
<title>jQuery</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    // Здесь пытался использовать три варианта кода приведённые ниже
</script>

</head><body>

<button id="btn1">Button 1</button>

</body></html>

// Вариант первый - работает на ура. По клику в любом месте документа (кроме фреймов) появляется соответсвующее сообщение.
   $( document ).click(function(){
     alert("Thanks for visiting!");
   });

// Вариант второй - не работает. Пробовал использовать другие объекты и события.
   $( "button" ).click(function(){
     alert("Thanks for visiting!");
   });

// Вариант третий - не работает. Пробовал использовать другие различные объекты с id="btn1" события.
   $( "#btn1" ).click(function(){
     alert("Thanks for visiting!");
   });

Что не в порядке в моём коде и каким образом нужно обращаться к объектам?

P.S.: Порекомендуйте пожалуйста хорошие уроки по jQuery для начинающих, по возможности на русском.

Sweet · #2 (**permalink**) 08.10.2010, 17:07

Используй ready либо прикрепляй файлы внизу <body>

Sweet · #3 (**permalink**) 08.10.2010, 17:08

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $( "button" ).click(function(){
     alert("Thanks for visiting!");
   });
});
</script>
<button id="btn1">Button 1</button>

Sufir · #4 (**permalink**) 08.10.2010, 17:09

Сообщение от Sweet

Начни с изучения html. Например, узнаешь, что тега button не существует.

Sweet, c html я знаком неплохо, но в данном вопросе это не столь важно, я пробовал использовать div, a, span.

Тэг <button> существует в стандартах HTML 4.01 / XHTML 1.0 / HTML 5.

Сообщение от Sweet

Используй ready либо прикрепляй файлы внизу <body>

Большое спасибо, так работает! Интересно почему без этого работал первый вариант... Буду ковырять дальше.

Sweet · #5 (**permalink**) 08.10.2010, 17:17

Да я чет загнался насчет тега button

Сообщение от Sufir

Интересно почему без этого работал первый вариант

Потому что document уже создан, когда к нему из head обращаются.

Sufir · #6 (**permalink**) 09.10.2010, 11:20

Не стану плодить темы со своими нубскими вопросами, тем более что название подходит и к следующей моей проблемке. Насколько jQuery имеет кроссбраузерный функционал и насколько качественно и корректно он работает с <object>? Дело в том, что он почему-то не может определить ширину указанного объекта после обновления страницы, причём в FF в то время как в Opera работает вполне корректно.

<html><head>
<style type="text/css">
       * {
	    padding: 0;
	    margin: 0;
	    border: 0;
	}
	object{
        display: block;
        width:512px;
        height:128px;
        border: #000000 1px  solid;
	}
</style>
<title>jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("a").text( " Doc: " + $( document ).height() + " x " + $( document ).width() );
        $("a").text( $("a").text() + " Obj: " + $( "#obj1" ).height() + " x " + $( "#obj1" ).width() );
    });
</script>
</head>
<body>

<div id="main"><a>info</a><br /></div>
<object id="obj1" data="http://javascript.ru" type="text/html"></object>

</body></html>

Пример во время первого открытия страницы в FF выведет Obj: 128 x 512, но если обновить страницу то получается Obj: 0 x 0. Даже если напрямую предварительно указать $( "#obj1" ).width( 512 ). Так же если использовать другой тег, например iframe, то он обрабатывается вполне нормально и в Opera и в FF. В чём же дело с object?

monolithed · #7 (**permalink**) 09.10.2010, 13:45

Для элемента object jQuery не предоставляет получение значений width/height методами width() / height(), а также css('width' / 'height').

Но есть вариант узнать размеры родительского элемента, которые могут совпадать с дочерним:
$( "#obj1" ).parent().height()

Но лучше всего узнать размеры элемента (если им заданы эти значения) базовыми средствами языка:

<style type="text/css">
object {
        width:512px;
        height:128px;
}
</style>

<script type="text/javascript">
window.onload = function(){
	var e = document.getElementById('obj')
	var w = parseInt(window.getComputedStyle(e, null).width || e.currentStyle.width);
	var h = parseInt(window.getComputedStyle(e, null).height || e.currentStyle.height);
	alert(w + ' x ' + h)
};
</script>
<object id="obj" data="http://javascript.ru" type="text/html"></object>

Sufir · #8 (**permalink**) 09.10.2010, 14:20

monolithed, спасибо. Они у меня обёрнуты в div с width и height 100%. Так работает как положено, да и мне так удобнее, просто хотелось разобраться в чём же дело. Как ни странно, jQuery всё-же возвращает их размеры в Opera. Да и изменяет он размеры object вполне корректно.

Форум

Справочник

Discord чат

Курсы javascript