Обращение к объектам [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 для начинающих, по возможности на русском. |
Используй ready либо прикрепляй файлы внизу <body>
|
<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>
|
Цитата:
Тэг <button> существует в стандартах HTML 4.01 / XHTML 1.0 / HTML 5. Цитата:
|
Да я чет загнался насчет тега button:)
Цитата:
|
Не стану плодить темы со своими нубскими вопросами, тем более что название подходит и к следующей моей проблемке. Насколько 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? |
Для элемента 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, спасибо. Они у меня обёрнуты в div с width и height 100%. Так работает как положено, да и мне так удобнее, просто хотелось разобраться в чём же дело. Как ни странно, jQuery всё-же возвращает их размеры в Opera. Да и изменяет он размеры object вполне корректно.
|
| Часовой пояс GMT +3, время: 10:26. |