окно
Объект Window не только действует как глобальная область, но также представляет окно браузера.
У окна объект обладает внутренней пропущенной и внутренней свойствами, которые могут получить внутреннюю ширину и высоту окна браузера. Внутренняя ширина и высота относятся к чистой ширине и высоте, используемой для отображения веб -страницы после удаления элементов заполнителя, таких как панель меню, панель инструментов, граница и т. Д. Существует также атрибуты воличной ширины и OuterHeight, которые могут получить всю ширину и высоту окна браузера.
Пополнить:
Ширина видимой области веб -страницы: document.body.clientWidth. Высота видимой области веб -страницы: Document.Body.ClientHeight. Видимая ширина области веб -страницы: Document.Body.OffsetWidth (включая ширину края и полоса прокрутки) высота видимой области веб -страницы. document.body.scrollwidth Полная высота текста веб -страницы: document.body.scrollheight Высота на веб -странице: Document.body.scrolltop или jquery (документ) .scrolltop () Левая сторона веб -страницы развернута. window.screen. Он $ (window) .height () ширина окна браузера: $ (window) .width ()
Special 1: решение Document.Body.scrolltop всегда 0 Var scrollpos; if (typeof window.pageyoffset! = 'undefined') {scrollpos = window.pageyoffset; } else if (typeof document.compatmode! = 'undefined' && document.compatmode! = 'backcompat') {scrollpos = document.documentelement.scrolltop; } else if (typeof document.body! = 'undefined') {scrollpos = document.body.scrolltop; } alert (scrollpos); Special 2: полная ширина текста веб -страницы: "+ document.body.scrollwidth; полная высота текста веб -страницы:"+ document.body.scrollheight; Вышеуказанные функции иногда не могут быть получены, поэтому используйте следующий метод. var xscroll, yscroll; if (window.innerheight && window.scrollmaxy) {xscroll = document.body.scrollwidth; yscroll = window.innerheight + window.scrollmaxy; } else if (document.body.scrollheight> document.body.offsetheight) {// Все, кроме Explorer mac xscroll = document.body.scrollwidth; yscroll = document.body.scrollheight; } else {// explorer mac ... также будет работать в Explorer 6 Strict, Mozilla и Safari xscroll = document.body.offsetwidth; yscroll = document.body.offsetheight; }Навигатор
Объект Navigator представляет информацию браузера. Наиболее часто используемые свойства включают:
• navigator.appname: имя браузера;
• Navigator.appversion: браузер версию;
• navigator.language: язык, установленный браузером;
• navigator.platform: тип операционной системы;
• navigator.useragent: строка пользователя-агента, установленная браузером.
Чтобы написать другой код для разных браузеров, начинающим нравится использовать, если судить о версии браузера, например:
var width; if (getieversion (navigator.useragent) <9) {width = document.body.clientwidth;} else {width = window.innerwidth;} Но это может быть неточным в суждении, и также трудно поддерживать кодекс. Правильным способом является полное использование функции JavaScript для возврата undefined для несуществующих свойств и непосредственно использовать оператор короткого замыкания || для расчета:
var width = window.innerwidth || document.body.clientWidth;
экран
Объект экрана представляет информацию экрана. Общие свойства включают:
• Экран.width: ширина экрана, в пикселях;
• Экран. Хист: высота экрана, в пикселях;
• Screen.colordepth: возвращает количество цветных цифр, таких как 8, 16, 24.
расположение
Объект местоположения представляет информацию URL -адреса текущей страницы. Например, полный URL:
http://www.example.com:8080/path/index.html?a=1&b=2#top
Это может быть получено с помощью location.href . Чтобы получить значения каждой части URL, вы можете написать это так:
местоположение. Протокол; // 'http'location.host; // 'www.example.com' location.port; // '8080'location.pathname; // '/path/index.html'location.search; // '? a = 1 & b = 2'location.hash; // 'ВЕРШИНА'
Чтобы загрузить новую страницу, вы можете позвонить в местоположение. Assign (). Если вы хотите перезагрузить текущую страницу, очень удобно вызвать метод местоположения. Reload ().
документ
Объект документа представляет текущую страницу. Поскольку HTML представлен как структура дерева в браузере в форме DOM, объект документа является корневым узлом всего дерева DOM.
Атрибут заголовка документа считывается из <tite> xxx </title> в документе HTML, но может быть динамически изменен:
Объект документа также имеет атрибут cookie, который может получить файлы cookie на текущей странице.
Cookie-это идентификатор клавиш, отправленный сервером. Поскольку протокол HTTP является без сохранения состояния, сервер может различать, какой запрос пользователя отправляется им, и его можно различить по файлам cookie. Когда пользователь успешно входит в систему, сервер отправляет файл cookie в браузер, такой как user = abc123xyz (зашифрованная строка). После этого, когда браузер посещает веб -сайт, он прикрепит этот файл cookie к заголовку запроса, и сервер может различать пользователя на основе файла cookie.
Файлы cookie также могут хранить некоторые настройки веб -сайта, такие как язык отображаемой страницы и т. Д.
JavaScript может прочитать файлы cookie на текущей странице через Document.cookie:
document.cookie; // 'v = 123; Помните = true; предпочтение = ZH '
Поскольку JavaScript может читать файлы cookie на странице, а информация о входе в систему пользователя обычно также существует в файлах cookie, это создает огромный риск безопасности. Это связано с тем, что введение стороннего кода JavaScript в HTML-страницы разрешено:
<!-Текущая страница на wwwexample.com-> <html> <head> <script src = "http://www.foo.com/jquery.js"> </script> </head> </html>
Если в JavaScript существует вредоносный код в представлении сторонних сторонних сторон, веб-сайт www.foo.com напрямую получит информацию о входе в систему пользователя веб-сайта www.example.com.
Чтобы решить эту проблему, сервер может использовать httponly при настройке файлов cookie. Файлы cookie, которые устанавливают Httponly, не будут прочитаны JavaScript. Такое поведение реализуется браузером, а основные браузеры поддерживают опцию Httponly. Чтобы обеспечить безопасность, сервер должен всегда настаивать на использовании httponly при настройке файлов cookie.
document.write () просто выводит новый контент в документ
Если Document.Write выполнена после загрузки документа, вся страница HTML будет перезаписана:
Ссылка: http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
Дом | Документ
// возвращать узел с идентификатором 'test': var test = document.getElementById ('test'); // Получить все прямые дочерние узлы в соответствии с узлом тестом: var cs = test.children; var First = test.firstelementchild; Второй метод - использовать querySelector() и querySelectorAll() . Вы должны понять синтаксис селектора, а затем использовать условия для получения узла, что более удобно:
// Получить узел с идентификатором Q1 через QuerySelector: var Q1 = document.queryselector ('#Q1'); // Получить все узлы в узле Q1, которые соответствуют условиям через QuerySelectorall: var ps = q1.queryselectorallall ('div.highlighted> p');Строго говоря, узел DOM здесь относится к элементу, но узел DOM на самом деле является узлом. В HTML Node включает в себя множество видов элементов, комментария, cdata_section и т. Д., А также тип документа корневого узла. Однако большую часть времени мы заботимся только о элементе, то есть узел, который фактически управляет структурой страницы, и игнорируем другие типы узлов. Документ корневого узла был автоматически связан с глобальным документом переменной.
Изменить DOM
Модификация CSS также является общей операцией. Атрибут стиля узла DOM соответствует всем CSS и может быть непосредственно извлечен или установлен. Поскольку CSS допускает такие имена, как Font-Size, но это не является действительным названием свойства для JavaScript, его необходимо переписать на имя в стиле верблюда в JavaScript:
// get <p id = "p-id"> ... </p> var p = document.getElementById ('p-ID'); // set css: p.style.color = '#ff0000'; p.style.fontsize = '20px'; p.style.paddingtop = '2em';Вставьте Dom
Есть два способа вставить новый узел. Одним из них является использование AppendChild для добавления детского узла в последний дочерний узел родительского узла. Например:
<!-html-структура-> <p id = "js"> javascript </p> <div id = "list"> <p id = "схема"> схема </p> </div>
Добавить <p id="js">JavaScript</p> к последнему элементу <div id="list"> :
var js = document.getElementbyId ('js'), list = document.getElementbyId ('list'); list.appendchild (js);Теперь структура HTML становится таким:
<!-html-структура-> <div id = "list"> <p id = "схема"> схема </p> <p id = "js"> javascript </p> </div>
Поскольку узел js , который мы вставлены, уже существует в текущее дерево документов, этот узел сначала будет удален из исходного места, а затем вставлен в новое место.
Чаще всего мы создадим новый узел из нуля и вставим его в указанное место:
haskell = document.createElement ('p'); Динамическое создание узла, а затем добавление его в дерево DOM может достичь многих функций. Например, следующий код динамически создает узел <style> и добавляет его к концу узла <head> , динамически добавляя новое определение CSS в документ:
var d = document.createElement ('style'); d.setattribute ('type', 'text/css'); d.innerhtml = 'p {color: red}'; document.getelementsbytagname ('head') [0] .appendchild (d);INSERTBEFOR
Что если мы хотим вставить дочерние узлы в указанное место? Вы можете использовать parentelement.insertbefore (NewElement, RELUCKSELEMENT); и детский узел будет вставлен до ссылки.
Много раз необходимо пройти через всех детей родительского узла, который может быть реализован путем атрибута по атрибуту детей:
var i, c, list = document.getElementbyId ('list'); for (i = 0; i <list.children.length; i ++) {c = list.children [i]; // Получите I-Th Kild Node}Удалить Dom
Чтобы удалить узел, сначала необходимо получить сам узел и его родительский узел, а затем вызовать снятие родительского узла, чтобы удалить себя:
// Получение удаления узла: var self = document.getElementById ('to-be-removed'); // Получить родительский узел: var parent = self.parentelement; // delete: var lement = parent.removechild (self); удален === Self; // истинныйЯ заметил, что, хотя удаленный узел больше не находится в дереве документов, на самом деле он все еще находится в памяти и может быть добавлен в другое место в любое время.
Когда вы пересекаете ребенка родительского узла и выполняете операцию удаления, имейте в виду, что атрибут детей является атрибутом только для чтения, и он будет обновлен в режиме реального времени, когда изменение детского узла. Поэтому при удалении нескольких узлов важно отметить, что атрибуты детей постоянно меняются.
Операция форма
Использование JavaScript для манипулирования формами аналогично операционному DOM, потому что сама форма также является деревом DOM.
Тем не менее, поле ввода формы, раскрывающееся ящик и т. Д. Может получить пользовательский ввод, поэтому использование JavaScript для работы формы может получить контент, введенный пользователем, или установить новый контент для блока ввода.
Есть в основном следующие элементы управления вводами для HTML -форм:
• Текстовое поле, соответствующий <input type = "text">, используется для ввода текста;
• Компания пароля, соответствующий <input type = "пароль">, используется для ввода паролей;
• Радиоам -окно, соответствующий <input type = "radio">, используется для выбора элемента;
• Флажок, соответствующий <input type = "флажок"> используется для выбора нескольких элементов;
• Раскрывающееся поле, соответствующее <elect>, используется для выбора элемента;
• Скрытый текст, соответствующий <input type = "hidden"> не виден пользователю, но скрытый текст будет отправлен на сервер при отправке формы.
Получите значение
Если мы получим ссылку на узел <pint>, мы сможем напрямую вызов, чтобы получить соответствующее значение ввода пользователя:
// <input type = "text" id = "email"> var input = document.getElementbyId ('email'); input.value; // 'значение, введенное пользователем' Этот метод может быть применен для text , password , hidden и select . Тем не менее, для радио и флажков атрибут value возвращает всегда предусмотренное значение HTML, и на самом деле необходимо получить опцию «проверить», поэтому checked использовать для суждения:
// <bakel> <input type = "radio" name = "weardday" id = "monday" value = "1"> понедельник </label> // <label> <input type = "radio" name = "weekday" id = "value =" 2 "> во вторник </label> var mon = document.getElementById (« понедельник '); var tue = document.getElementByid (вторник); // '1'tue.value; // '2'mon.cecked; // true или ложь
Установить значение
Установка значения аналогична получению значения. Для текста, пароля, скрытого и выбора, вы можете установить значение напрямую:
// <input type = "text" id = "email"> var input = document.getElementbyid ('email'); input.value = '[email protected]'; // содержание текстового поля было обновленоДля радио и флажок установите проверку на TRUE или FALSE.
Управление HTML5
HTML5 добавил большое количество стандартных элементов управления, обычно используемые включают дату, DateTime, DateTime-Local, цвет и т. Д. Все они используют тег <pint>:
<input type = "date" value = "2015-07-01">
<input type = "datetime-local" value = "2015-07-01t02: 03: 04">
<input type = "color" value = "#ff0000">
Браузеры, которые не поддерживают HTML5, не могут распознавать новые элементы управления и будут отображать их как type = "text". Браузеры, которые поддерживают HTML5, получат форматированные строки. Например, значение Type = "Date" гарантированно будет действительной датой в формате Yyyy-MM-DD или пустой строке.
Отправить форму
Наконец, JavaScript может обрабатывать подчинение формы двумя способами (метод Ajax введен в следующей главе).
Первый метод - отправить форму через метод post () элемента <Form>. Например, в ответ на событие <boto> нажмите, отправьте форму в коде JavaScript:
<form id = "test-form"> <input type = "text" name = "test"> <button Type = "onclick =" doSubmitform () "> отправить </button> </form> <script> function doSubmitform () {var form = document.getElementById ('test-form'); // Вы можете изменить ввод формы здесь ... // Форма отправки: form.submit ();} </script> Недостатком этого метода является то, что он нарушает нормальное представление браузера для формирования. Браузер представляет форму при нажатии <button type="submit"> по умолчанию, или пользователь нажимает клавишу Enter в последнем поле ввода. Следовательно, второй способ состоит в том, чтобы реагировать на событие самого onsubmit <form> и внести изменения при отправке формы:
<form id = "test-form" onsubmit = "return checkform ()"> <input type = "text" name = "test"> <button Type = "Opport"> отправить </button> </form> <script> function cakeform () {var form = document.getElementById ('test-form'); // Вы можете изменить ввод формы здесь ... // Продолжить к следующему шагу: return true;} </script> Обратите внимание, что return true требуется, чтобы сообщить браузеру продолжить отправку. Если return false , браузер не будет продолжать отправлять форму. Эта ситуация обычно соответствует ошибке ввода пользователя, и пользователю предлагается для сообщений об ошибках, и форма прекращается.
При проверке и изменении <input> полностью используйте <input type="hidden"> для передачи данных.
Например, многие формы входа хотят, чтобы пользователи вводили имена пользователей и пароли, но по соображениям безопасности не передают пароли с открытым текстом при отправке формы, а MD5 пароля. Обычные разработчики JavaScript будут напрямую изменять <input> :
<form id = "login-form" method = "post" onsubmit = "return checkform ()"> <input type = "text" id = "username" name = "username"> <input type = "password" id = "password" name = "password"> <button = "propect"> propect '‘/form> <script> function function function () {var pws ocome. // Измените открытый текст, введенный пользователем на MD5: pwd.value = tomd5 (pwd.value); // Перейдите к следующему шагу: вернуть true;} </script> Этот метод, кажется, в порядке, но когда пользователь входит в пароль для отправки, поле пароля внезапно отобразится от нескольких * до 32 * (потому что MD5 имеет 32 символа).
Чтобы не изменить ввод пользователя, вы можете использовать <input type="hidden"> для реализации:
<form id="login-form" method="post" onsubmit="return checkForm()"> <input type="text" id="username" name="username"> <input type="password" id="input-password"> <input type="hidden" id="md5-password" name="password"> <button type="submit">Submit</button></form><script>function checkForm() {var input_pwd = document.getElementByid ('input-password'); var md5_pwd = document.getElementByid ('md5-password'); // Измените открытый текст, введенный пользователем на MD5: md5_pwd.value = tomd5 (input_pwd.value); // Перейдите к следующему шагу: вернуть true;} </script>Обратите внимание, что <Input> с идентификатором MD5-Password Marked name = "пароль", в то время как идентификатор, введенный пользователем, является входным пассулдом без атрибута имени. Данные без имени Атрибут <pown> не будут отправлены.
Операционные файлы
В формах HTML единственным элементом управления, который может загружать файлы, является <input type = "file">.
ПРИМЕЧАНИЕ. Когда форма содержит <input type = "file">, Enctype формы должен быть указан как Multipart/Form-Data, и метод должен быть указан как Post, чтобы браузер мог правильно кодировать и отправлять данные в формате Multipart/Form-Data.
По соображениям безопасности браузер только позволяет пользователям нажимать <input type = "file">, чтобы выбрать локальные файлы. Использование JavaScript для назначения значения <input type = "file"> не имеет эффекта. Когда пользователь решает загрузить файл, JavaScript не может получить реальный путь к файлу:
Файл для загрузки:
Обычно загруженные файлы обрабатываются бэкэнд -сервером. JavaScript может проверить расширение файла при отправке формы, чтобы пользователи не загружали файлы в неверных форматах:
var f = document.getElementbyId ('test-file-upload'); var filename = f.value; // 'c: /fakepath/test.png'if (! Filename ||! (Filename.endswith ('. Jpg ') || filename.endswith ('. Png ') || filename.endswith ('. Gif '))) {alert (' может загрузить только файл изображения. '); вернуть false;}Файл API
Поскольку JavaScript имеет очень ограниченные операции на файлах, загруженных пользователями, особенно невозможность чтения файлового содержимого, многие веб-страницы, которые требуют рабочих файлов, должны быть реализованы с использованием сторонних плагинов, таких как Flash.
С популярностью HTML5, недавно добавленный файл API позволяет JavaScript прочитать содержимое файла и получать больше информации о файле.
API файла HTML5 предоставляет два основных объекта: File и FileReader, которые могут получить информацию о файле и чтение файлов.
В следующем примере демонстрируется, как прочитать выбранный пользователем файл изображения и предварительно просмотреть изображение в <Div>:
Предварительный просмотр изображения:
var fileInput = document.getElementById ('test-image-file'), info = document.getElementById ('test-file-info'), preview = document.getElementbyId ('test-image-preview'); // Слушайте изменение событий: fileInput.AddeventListener ('change', function () {// Очистить фоновое изображение: preview.style.backgroundimage = ''; // Проверьте, выбран ли файл: if (! FileInput.value) {info.InnerHtml = 'no file selected'; return;}// get file -ссылка: vari -файл = vari -файл. info.innerhtml = 'file:' + file.name + '<br>' + 'size:' + file.size + '<br>' + 'modified:' + file.lastmodifiedDate; Файл! в форме datairl: reader.readasdataurl (file);});Приведенный выше код демонстрирует, как прочитать содержимое файла через API файла HTML5. Файл считывается в форме DataRl - это строка, аналогичная данным: Image/jpeg; base64,/9J/4AAQSK ... (кодирование BASE64). Он часто используется для установки изображений. Если требуется обработка на стороне сервера, отправьте символы после строки BASE64 на сервер и расшифруйте его с помощью BASE64, чтобы получить двоичное содержание исходного файла.
Перезвонить
Приведенный выше код также демонстрирует важную особенность JavaScript, которая представляет собой режим выполнения с одной меткой. В JavaScript механизм выполнения JavaScript в браузере всегда выполняется в однопользовом режиме при выполнении кода JavaScript, что означает, что в любое время невозможно выполнять более 1 потока в одно и то же время.
Вы можете спросить, как справиться с многозадачностью в однопользовом режиме?
В Javascript многозадачность на самом деле асинхронно называется, например, приведенный выше код:
reader.readasdataurl (файл);
Будет инициирована асинхронная операция для чтения содержимого файла. Поскольку это асинхронная операция, мы не знаем, когда операция заканчивается в коде JavaScript, поэтому нам нужно сначала установить функцию обратного вызова:
reader.onload = function (e) {// Когда файл считывается, эта функция автоматически называется:};Когда чтение файла будет завершено, двигатель JavaScript автоматически вызовет функцию обратного вызова, которую мы установили. Когда функция обратного вызова выполнена, файл был прочитал, поэтому мы можем безопасно получить содержимое файла внутри функции обратного вызова.
Приведенная выше статья кратко рассказывает о объекте браузера JavaScript - это весь контент, которым я делюсь с вами. Я надеюсь, что это может дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.