Bahare Shariat Jild 2 By SadurshSharia Mufti Amjad Ali Azmi
jQuery
1. jQuery
Язык JavaScript
Алексей Бованенко
7 апреля 2009 г.
2. Что это?
• Библиотека JavaScript
• http://www.jquery.com
• Использование CSS селекторов
7 апреля 2009 г.
3. Начало
• <script type= “text/javascript” src= “jquery.js” ></script>
7 апреля 2009 г.
4. Селекторы
• $(obj) - jQuery селектор
• $ - класс
• $( ) - создание нового объекта
7 апреля 2009 г.
5. Селекторы
(уточнение)
• Вложенные элементы
• $(«p a»)
• Элементы с определенным классом
• $(«div.selectedElement»)
7 апреля 2009 г.
6. Селекторы
(уточнение)
• $(«body > div»)
• $(«a[href^=http://]»)
• $(«a[href$=pdf]»)
• $(«a[href*=links]»)
7 апреля 2009 г.
7. Первая программа
• window.onload=function(){
alert(“Hello, world!”);
}
• $(document).ready(function()
{
alert(“Hello, world!”);
}
);
7 апреля 2009 г.
8. Добавление обработчика
события
• $(document).ready(function(){
$(«a»).click(function(event){
alert(«Clicked!»);
});
});
7 апреля 2009 г.
9. Отмена действия
по умолчанию
• $(document).ready(function(){
$(«a»).click(function(event){
alert(«Clicked!»);
event.preventDefault();
});
});
7 апреля 2009 г.
10. Работа с CSS классами
• $(«a»).addClass(«selected»);
• $(«a»).removeClass(«selected»);
7 апреля 2009 г.
11. Пример таблицы
• $(«table tr:nth-child(even)»).addClass(«selected»);
• CSS3 селектор
• nth-child
7 апреля 2009 г.
12. Код/CSS
• <style>
.selected{
font-weight:bold;
color:red;
background-color:gray;
}
</style>
7 апреля 2009 г.
13. Код/javascript
• <script type=quot;text/javascriptquot; src=quot;jquery.jsquot;></script>
<script type=quot;text/javascriptquot;>
$(document).ready(function(){
$(quot;table tr:nth-child(even)quot;).addClass(quot;selectedquot;);
});
</script>
7 апреля 2009 г.
14. Использование эффектов
• $(«a»).click(function(event){
event.preventDefault();
$(this).hide(«slow»);
});
7 апреля 2009 г.
16. Изменение содержимого
• $(«#elementId»).html(«New value»)
• $(«#elementId»)[0].innerHTML= «New value»
7 апреля 2009 г.
17. Изменение содержимого
(продолжение)
• $(«div»).html(«New value»)
• var divs=$(«div»);
for(i=0;i<divs.length;++i)
divs[i].innerHTML= «New value»
7 апреля 2009 г.
19. Builder
• Каждый метод jQuery возвращает сам измененный объект
• $(«a»).filter(«.clickme»).click(function(){$(this).hide(); return
false;}).end();
7 апреля 2009 г.
21. Создание нового элемента
• Создание элемента
• $(«<p>It’s a new element»)
• Добавление в DOM-модель
• $(«<p>It’s a new element»).insertAfter(«#targetId»)
• $(«<p>It’s a new element»).appendTo(«#targetId»)
7 апреля 2009 г.
