Учебники • JQuery
JQuery - рамки с JavaScript много преимуществ - Часть 1: "начального уровня" - первый маленький пример
1996 года ("веб-каменный век"), я начал создавать первые интернет-сайтов - время, когда я мечтал о возможности сегодняшних даже не придется.
Почти 15 лет спустя (хорошо, я пе "веб-бабушка" утра :-)) имеет WWWelt сильно изменился. Сочетание (X) HTML, CSS (3) и JavaScript и соответствующей поддержки браузера предлагают практически неограниченные возможности по внешнему виду и функциональности.
Большую помощь и поддержку и различные структуры JavaScript.
Повинуясь серию статей о JQuery JavaScript Framework
Разделы в этой должности:
<example> <html code> <CSS code> <jQuery code> <Download> <other Beispiele>
Что является основой JavaScript и какие преимущества дает использование?
Рамки (каркаса, шаг, основная структура ...) с точки зрения программирования и языков сценариев, библиотеки, основные und-/oder повторяющихся задач приведены в функциях.
Облегчает использование рамок и ускоряет развитие собственных скриптов и функций, потому что вы можете использовать их предварительно протестированные функции, не "изобретать велосипед", чтобы иметь.
Javascript структуры должны, как правило, одна реализация функции для разных браузеров.
Это позволяет разработчикам и веб-дизайнеров огромное облегчение и экономия времени при тестировании веб-сайтов в разных браузерах.
Почему JQuery?
В этой серии статей я для JQuery JavaScript рамки выбраны потому, что она рядом с его производительностью и имеет очень высокую распространенность, это влечет за собой следующие преимущества.:
- Есть множество готовых, использовать бесплатные плагины (например, изображение слайдер-тестер, настольный сортировщики и т.д.), которые могут быть использованы непосредственно
- Высокие показатели также постоянно улучшаются, (об ошибке)
- Есть много информации и учебных пособий по JQuery
- JQuery также для людей, не имеющих навыков программирования научиться быстро и легко
Во-первых, это в моих глазах (вместе с скорости и функциональности), три наиболее важных аспекта. Кроме того, все JavaScript рамки работают по аналогичному принципу. Итак, кто имеет дело с JQuery и узнаете позже на другом umsteigt рамках быть как дома.
Лично я работаю в соответствии с проектами и задачами различных структур (например, ExtJS для разработки приложений и интранет-решения), но и в создании сайтов клиентов чаще всего ассоциируется с JQuery очень высокой из-за распространения.
Для начала, первый маленький пример JQuery
<click HTML code> <click CSS code> <click JQuery code> <click download>
Чтобы дать вам представление о том, какие возможности он может сделать JQuery предоставляет первый простой пример ниже.
JQuery код:
$ (Документ). Ready (функция () { $ ('# Demo_button1 "). Нажмите кнопку (функция () { $ ('Div.demo_absatz1) AddClass («коричневый») шоу ("медленные") ..; }); });
DEMO - выполнение кода DEMO сброс
Здравствуйте, я HTML DIV с классом "demo_absatz1" после нажатия на кнопку DEMO видна.
Если вы нажмете на кнопку Demo, я получаю новый класс CSS сначала (коричневый) и, наконец, появится в медленной анимации.
Не видели? Просто "сбросить DEMO" и попробуйте еще раз!
Код подробнее
Этот пример состоит из 3 частей:
- HTML код (например, в файле demo1.html)
- Код CSS для разработки (в файле demos.css)
- JQuery код (в файл-де-demos.js)
Примечание:
Вы найдете примеры по каждому из полного кода, чтобы вы могли понять все едины.
Я не сторонник их писать CSS и Javascript код в документе. Аутсорсинг вашего веб-проектов в код в виде отдельных файлов.
HTML код
<click Beispiel> <click CSS code> <click JQuery code> <click download>
<DOCTYPE HTML PUBLIC! "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML XMLNS = "HTTP :/ / www.w3.org/1999/xhtml "реж =" л "LANG =" EN-US "> Первый <head> <title> jQueryBeispiel </ title> <ссылка отн = 'стиль' HREF = '/ Текст demos.css "типа = '/ CSS" СМИ = "Все" /> </ HEAD> <a id="demo_button1" class="demo_button" href="#"> DEMO - выполнение кода </ > <div class="demo_absatz1"> <strong> Здравствуйте, я HTML DIV с идентификатором "demo_absatz1" после нажатия на кнопку DEMO видна. </ STRONG> </ P> Если вы нажмете на кнопку Demo, я получаю новый класс CSS Сначала (коричневый) и, наконец, появится в медленной анимации. </ P> не видели? "Сброс DEMO" Просто нажмите кнопку и попробуйте снова </ p> </ div> <сценарий тип = "текст / JavaScript" SRC = "http://ajax.googleapis.com/ajax/libs/jquery/1.4. 2/jquery.min.js "> </ скрипт> <script type='text/javascript' src='/demos.js'> </ SCRIPT> </ body> </ html>
Рассмотрим HTML-код более внимательно:
Строка 5: Эта линия внешний код CSS из файла загруженного demos.css. В зависимости от того, где хранятся файлы, вы должны установить "НИЦ" URL-адрес может измениться еще.
В теле тэги (строки 8-14), см. HTML-теги в примере ниже.
Линия 8: Все начинается с "<a>" день (ссылка), который был присвоен идентификатор "demo_button1". Это должен быть уникальный идентификатор идентификатор в HTML-документе. Этот идентификатор позднее в JQuery код, чтобы найти ясно, имеющих отношение к связи.
Связь также была назначена CSS класса (класса). "Demo_button" в данном случае. Этот класс будет в коде CSS используется для создания элемента.
10/Zeile строка 14: Здесь вы найдете "<div>" день (коробка) класса CSS "demo_absatz1" был назначен. Этот класс используется в коде CSS для разработки элементов и JQuery код для идентификации.
Строки 11-13: Вот текст, который позже показал в окно. Он отформатирован в 3 пунктах (<p>). Это чистое содержание, что не для CSS и JQuery код смысла.
Строка 16: Вот это очень важно, потому что, когда активирован, JQuery рамки. В этом примере, я из рамки с помощью Google Libs решили интегрировать. Можно, конечно, текущую версию JQuery в вашем веб-копии, но должно быть "НИЦ" URL соответственно.
Строка 17: Вот файл JavaScript "demos.js", в котором JQuery код загружается с моей веб-сервера. В зависимости от того, где хранятся данные, вы должны настроить "НИЦ" URL, если необходимо.
Файлы загружаются только в конце, потому что JQuery действия выполняются после загрузки HTML и CSS код. Загрузка файлов JavaScript в конечном итоге экономит время загрузки до строительства HTML документа.
Код CSS:
<click Beispiel> <click HTML code> <click JQuery code> <click download>
. Demo_absatz1 { дисплей: нет; обивка: 10px 20px; границы: 1px твердых # СТС; цвет: # 000; -Унций границы радиуса: 15px; -Webkit-граница радиуса: 15px; границы радиус: 15px; } . Браун { цвет: # FFF; фонового цвета: # 847d6b; границы сверху: 15px твердых № 212 421; } {A.demo_button обивка: 4px 4px 8px 10px; фонового цвета: # c6c700; цвет: # FFF; шрифта: жирный; границы: 1px твердых # СТС; -Унций границы радиуса: 5px; -Webkit-граница радиуса: 5px; границы радиус: 5px; текст-отделка: нет; }
Код CSS под микроскопом:
Линии 1-10: Вот это класс "demo_absatz1" определено. В дополнение к дизайну атрибутов вы найдете соответствующую запись в строке 2 "дисплей: нет". Это означает, что все элементы, из которых этот класс был назначен на экране не видны (в HTML-код уже есть).
Наши окна и загрузки HTML документов невидимым.
Линии 11-15: класс «коричневые» появилась ранее в документе HTML нет. Это позже используются для размещения поля в шоу более отчетливым.
Линии 16-28: Здесь вы найдете дизайн атрибуты ссылку "DEMO - выполнение кода", который был класс «демо-кнопка" назначен.
Отдельные атрибуты дизайна я хотел бы прежде всего не идти дальше. CSS новички могут найти атрибуты, например, в www.css4you.de.
Напомним еще раз о JQuery код
<click Beispiel> <click HTML code> <click CSS code> <click download>
$ (Документ). Ready (функция () { $ ('# Demo_button1 "). Нажмите кнопку (функция () { $ ('Div.demo_absatz1) AddClass («коричневый») шоу ("медленные") ..; }); });
Теперь начинается самое интересное: JQuery код более точно учитывать:
Что каждый, вероятно, заметили сразу, что код является относительно коротким - эквивалент JQuery лозунг "Пишите меньше, делать больше".
JQuery это JavaScript. Все функции в рамках называют, начинающиеся с "JQuery" или сокращенно "$".
Линия 1 и 5: ". $ (Документ) готовы" означает "Если документ будет загружен (все HTML-элементы) выполняют следующие функции ..."
В этой функции должна быть включена в любой JQuery код, определенный на элементы в HTML-документ относится.
Линии 2 и 4: "Если HTML элемент с идентификатором" demo_button1 "нажата, выполните следующие функции ..."
"# Demo_button1" является селектор - в которых есть много JQuery, что я пойду в других частях этой статьи более подробно.
# Является определение ID
При этом селектор можно четко определить элемент вашего HTML-кода.
Строка 3: «... Все Div коробки с классом" demo_absatz1 "получить новый класс CSS под названием" коричневый "и появится медленно".
В этой линии, далее селектор используется "div.demo_absatz1". В отличие от предыдущих, это не уникальный, не может быть назначена в нашем HTML документе также несколько ящиков Div класс "demo_absatz1" (это не так, но это может быть :-)).
В этом случае действие распространяется на всех этих элементов.
"AddClass" нашел элементы другого класса под названием "коричневый", чтобы (см. CSS код строка 11-15) и изменения цвета коробки.
Вот и все ...
Несколько незначительных изменений ...
Эффект ... и еще!
Вместо того, чтобы "шоу" мы используем "SLIDEIN"
$ (Документ). Ready (функция () { $ ('# Demo_button2 "). Нажмите кнопку (функция () { $ ('Div.demo_absatz2) AddClass («коричневый») слайд вниз ("медленные") ..; }); });
DEMO - выполнение кода DEMO сброс
Здравствуйте, я HTML DIV с классом "demo_absatz2" после нажатия на кнопку DEMO видна.
Если вы нажмете на кнопку Demo, я получаю новый класс CSS сначала (коричневый) и, наконец, появится в медленной анимации.
Не видели? Просто "сбросить DEMO" и попробуйте еще раз!
Вместо того, чтобы "шоу" мы опустошением "FadeIn"
$ (Документ). Ready (функция () { $ ('# Demo_button3 "). Нажмите кнопку (функция () { $ ('Div.demo_absatz3) AddClass («коричневый») FadeIn ("медленные") ..; }); });
DEMO - выполнение кода DEMO сброс
Здравствуйте, я HTML DIV с классом "demo_absatz3" после нажатия на кнопку DEMO видна.
Если вы нажмете на кнопку Demo, я получаю новый класс CSS сначала (коричневый) и, наконец, появится в медленной анимации.
Не видели? Просто "сбросить DEMO" и попробуйте еще раз!
"Три за один раз"
В этом примере есть 3 скрытых разделов все же класс "demo_absatz4" есть.
С помощью одного клика на "Run демо-код", по этой причине все три открытых там в селекторе ищет класса.
$ (Документ). Ready (функция () { $ ('# Demo_button4 "). Нажмите кнопку (функция () { $ ('Div.demo_absatz4) AddClass («коричневый») FadeIn ("медленные") ..; }); });
DEMO - выполнение кода DEMO сброс
Здравствуйте, я первый HTML DIV с классом "demo_absatz4" после нажатия на кнопку DEMO видна.
Если вы нажмете на кнопку Demo, я получаю новый класс CSS сначала (коричневый) и, наконец, появится в медленной анимации.
Не видели? Просто "сбросить DEMO" и попробуйте еще раз!
Да где же 2-й скрытых продаж?
Привет, я 2-й HTML DIV с классом "demo_absatz4" после нажатия на кнопку DEMO видна.
Да где же 3-й скрытых продаж?
Здравствуйте, я 3 HTML DIV с классом "demo_absatz4" после нажатия на кнопку DEMO видна.
Не видели? Просто "сбросить DEMO" и попробуйте еще раз!
Вывод:
<click Beispiel> <click HTML code> <click CSS code> <click JQuery code> <click download>
JQuery, CSS и HTML тесно связаны между собой и ...
.... это все не так сложно 
Я могу найти несколько хороших идей у вас с этим простым примером JQuery, начало и некоторые реальные преимущества для изменения WWWelt.
Скачать:
Вы можете использовать код из приведенных выше разделов кода или непосредственно копировать архива со всеми 3 файлы (. Сайтов. Css и. Js) здесь.
hpv24_jquery_beispiel1 (224)
Попробуйте!
1 голос / с, средняя оценка: 6.00 звезд с макс. 6 возможных звезд
Загрузка ... 
