jQuery для начинающего! Продолжение.

Опубликовано admin - сб, 09/11/2010 - 23:21

jQuery для начинающего!

jQuery для начинающих.

 

javascript методы для определения размеров объекта windows и их аналоги в jQuery

Как то в одной статье я видел обзор всех способов получения значений высоты и ширины, используемых в javascript для элементов на странице, окна браузера, окна экрана. Статья на самом деле представляла большой интерес для меня и читателей, но сегодня javascript дополняется многими фреймовиками, поддерживающими огромное количество методов получения тех же значений, однако делающих это кроссбраузерно. Об этом мы далее и будем говорить.

javascript методы для определения размеров объекта windows и их аналоги в jQuery

Во-первых, отметим глобальный объект javascript - window. Данный объект обладает методами, позволяющими работать с внешним окружением браузера - размер экрана, его разрешение и тд/, а так же с внутренними элементами браузера - панели браузера и кнопки. Среди наиболее популярных методов используемых пр работе с объектом window можно указать window.screen.height(window.screen.width), для тех кто не дружит с английским, поясню, что данный метод предоставляет значение высоты и ширины экрана пользователя. С его помощью Вы сможете определять порядок размещения информации на странице в зависимости от размера экрана пользователя. Ниже указана подробная таблица методов объекта window, заранее скажу, что всеми без исключения браузерами поддерживается только два метода:

  • window.screen.height(window.screen.width);
  • window.screen.availHeight(window.screen.availWidth).

В таблице приведены значения актуальные для вашего браузера, измените размеры окна и Вы увидите изменение значений в таблице.

 

 

javascript методы для определения размеров элемента body и их аналоги в jQuery

Во-вторых, на мой взгляд, более интересно изучать методы измерения размеров элементов, расположенных внутри элемента document, нежели методы объекта window. В большинстве случаев, при создании плагинов на jQuery, я применяю методы, позволяющие получить значения высоты страницы, смещение отдельных элементов относительно родительского элемента или относительно краёв клиентской части окна браузера. Больше всего я использую jQuery методы определения размеров основного элемента страницы - body. Наверняка и Вы, если Вы работаете с jQuery сталкивались с необходимостью знать подробное описание всех методов jQuery и их аналогов на javascript при работе с элементом body. Поэтому, обобщив собранный материал в интернете, я сделал сравнительную таблицу методов на javascript и jQuery.
В таблице приведены значения актуальные для вашего браузера, измените размеры окна и Вы увидите измененные значения в таблице.

 

По поводу элемента document.documentElement скажу лишь то, что он доступен, если браузер соответствует стандарту CSS1, то есть, если свойство document.compatMode == "CSS1Compat", иначе применяться должен элемент document.body. Если Вы не улавливаете смысл пишите следующий код в своих скриптах и он не вызовет у Вас ошибок:

  • "return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollWidth : document.documentElement.scrollWidth);"
  • или соответсвтвенно для высоты body
  • "return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollHeight : document.documentElement.scrollHeight);"

 

Интерактивный пример получения величин измерения в javascript и jQuery

В-третьих, еще интереснее работать с элементами на странице. В jQuery, к примеру, существуют методы получения значений величины смещения дочернего элемента относительно границ его родительского элемента($(this).position().left($(this).position().top)), значений величины смещения элемента относительно верхней и левой границы страницы ($(this).position().left($(this).position().top)). В то же время, в javascript Вы не найдёте аналогов данных методов. Ниже указан интерактивный пример, с помощью которого Вы можете узнать значения элемента с id "select".
В таблице приведены значения актуальные для вашего браузера, измените размеры окна и Вы увидите изменение значений в таблице.

Элемент
перетащите элемент или измените его размеры
Описание Метод Значеине
javascript jQuery javascript jQuery
Высота элемента document.getElementById("select").clientHeight $(this).height()    
Ширина элемента document.getElementById("select").clientWidth $(this).width()    
Смещение элемента от верхнего края родительского элемента document.getElementById("select").scrollTop; $(this).position().top    
Смещение элемента от левого края родительского элемента document.getElementById("select").scrollLeft; $(this).position().left    
Смещение элемента от верхней границы рабочей области окна document.getElementById("select").scrollTop $(this).offset().top    
Смещение элемента от левого края рабочей области окна document.getElementById("select").scrollLeft $(this).offset().left    
Высота элемента с учётом скроллинга document.getElementById("select").scrollHeight $(this).outerHeight()    
Ширина элемента с учётом скроллинга document.getElementById("select").scrollWidth $(this).outerWidth()    
Высота элемента, включающая свойства padding и border document.getElementById("select").offsetHeight $(this).outerHeight()    
Ширина элемента, включающая свойства padding и border document.getElementById("select").offsetWidth $(this).outerWidth()    

Как видите методы javascript:

  • document.getElementById("select").scrollHeight(document.getElementById("select").scrollwidth)
  • document.getElementById("select").scrollTop (document.getElementById("select").scrollLeft)

всегда остаются равными 0. В то время как их аналоги на jQuery предоставляют правильное значение. Почему же Вы спросите меня так происходит. Потому что я ввёл Вас в заблуждение, на самом деле указанные два метода javascript не являются аналогами методов jQuery:

  • $(this).position().top($(this).position().left)
  • $(this).offset().top($(this).offset().left)

 

javascript методы имеют самостоятельное значение, а какое Вы узнаете, когда добавить css свойство overflow:scroll; к элементу.

В заключение я укажу кроссбраузерную таблицу значений на javascript и их аналогов на jQuery

Описание Метод Значение
javascript jQuery javascript jQuery
Популярные браузеры (значения в px) FireFox Chrome Internet Explorer Opera FireFox Chrome Internet Explorer Opera
Высота body document.body.clientHeight $("body").height() 541 656 545 608 541 656 545 608
Ширина body document.body.clientWidth $("body").width() 968 969 963 968 968 969 963 968
Высота body document.documentElement.clientHeight $("body").height() 541 2426 2967 608 541 656 545 608
Ширина body document.documentElement.clientWidth $("body").width() 968 1009 1056 968 968 969 963 968
Смещение скроллбара от верхней границы рабочей области окна браузера document.body.scrollTop $(document.body).position().top 0 0 0 0 0 0 0 0
Смещение скроллбара от левого края рабочей области окна браузера document.body.scrollLeft $(document.body).position().left 0 0 0 0 0 0 20 0
Высота body, включающая свойства padding и border document.body.offsetHeight $("body").outerHeight() 541 656 545 608 541 656 545 608
Ширина body, включающая свойства padding и border document.body.offsetWidth $("body").outerWidth() 968 969 1003 968 968 969 1003 968
Размер правого скроллинга в px document.body.scrollHeight $("body").height() 541 2426 2967 608 541 656 545 608
Размер нижнего скроллинга в px document.body.scrollWidt $("body").width() 968 1009 1056 968 968 969 1003 968
Смещение body(margin) относительно document в px нет $("body").offset().top нет нет нет нет 0 0 0 0
Смещение body(margin) относительно document в px нет $("body").offset().left нет нет нет нет 0 0 20 0

На этом я закончу исследование методов javascript и jQuery, надеюсь мои знания о них Вам будут для полезны.

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

читать...
На разработку сайта! Скидки до 20%!