Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2010, 15:49
Аватар для Sufir
Аспирант
Отправить личное сообщение для Sufir Посмотреть профиль Найти все сообщения от Sufir
 
Регистрация: 15.06.2008
Сообщений: 47

Обращение к объектам [jQuery for newbie]
Здравствуйте!

Сегодня вот взялся изучать сей инструмент и с первых же строк возникли проблемы. Набросал следующий код по примерам на официальном сайте с текущей версией 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 для начинающих, по возможности на русском.
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2010, 16:07
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Используй ready либо прикрепляй файлы внизу <body>
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2010, 16:08
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2010, 16:09
Аватар для Sufir
Аспирант
Отправить личное сообщение для Sufir Посмотреть профиль Найти все сообщения от Sufir
 
Регистрация: 15.06.2008
Сообщений: 47

Сообщение от Sweet
Начни с изучения html. Например, узнаешь, что тега button не существует.
Sweet, c html я знаком неплохо, но в данном вопросе это не столь важно, я пробовал использовать div, a, span.

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

Сообщение от Sweet Посмотреть сообщение
Используй ready либо прикрепляй файлы внизу <body>
Большое спасибо, так работает! Интересно почему без этого работал первый вариант... Буду ковырять дальше.

Последний раз редактировалось Sufir, 08.10.2010 в 16:12.
Ответить с цитированием
  #5 (permalink)  
Старый 08.10.2010, 16:17
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Да я чет загнался насчет тега button
Сообщение от Sufir
Интересно почему без этого работал первый вариант
Потому что document уже создан, когда к нему из head обращаются.
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2010, 10:20
Аватар для Sufir
Аспирант
Отправить личное сообщение для Sufir Посмотреть профиль Найти все сообщения от Sufir
 
Регистрация: 15.06.2008
Сообщений: 47

Не стану плодить темы со своими нубскими вопросами, тем более что название подходит и к следующей моей проблемке. Насколько 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?

Последний раз редактировалось Sufir, 09.10.2010 в 10:25.
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2010, 12:45
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Для элемента 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>

Последний раз редактировалось monolithed, 09.10.2010 в 12:50.
Ответить с цитированием
  #8 (permalink)  
Старый 09.10.2010, 13:20
Аватар для Sufir
Аспирант
Отправить личное сообщение для Sufir Посмотреть профиль Найти все сообщения от Sufir
 
Регистрация: 15.06.2008
Сообщений: 47

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

Последний раз редактировалось Sufir, 09.10.2010 в 22:17.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обращение к объектам CSS Djumpen Общие вопросы Javascript 12 11.04.2010 10:47