betacode

Руководство jQuery

View more Tutorials:

Сайт бесплатного изучения языков:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- Download jQuery

You have 2 options to download jQuery:
  • jQuery 1.x
  • jQuery 2.x
Both version are no differences in the API, jQuery 1.x support all browsers including IE 6,7,8; whereas jQuery 2.x supports all browsers except IE 6,7,8. Therefore you should consider version to the download. In this guide I downloaded version 1.x:
Download Results:

2- Пример Hello jQuery

Создать папку examples, примеры в этой статье будут в этой папке.
Объявить использование библиотеки jQuery:

<!-- Declaring use jquery, specify the location of your jQuery library -->
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>

<!-- Or use external sources -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js">

</script>
Когда веб страница будет гв готовности, значит объект document в состоянии готовности, jQuery поймает данное событие через метод ready.

// When the document is ready.
jQuery(document).ready(function(){
  alert('Hello jQuery');
});

// You can also use $ instead of jQuery.
$(document).ready(function(){
  alert('Hello jQuery');
});
Смотрите простой пример:
helloJQuery.html

<html>
<head>
    <meta charset="utf-8">
    <title>Hello jQuery Example</title>
    
    <!-- (1): Declaring using JQuery library -->
    <script src="../jquery-1.11.3.min.js"></script>
    
</head>
<body>
    <h2>Hello jQuery Example</h2>
    <a href="">Reset</a>
    
    <script type="text/javascript">
        
       jQuery(document).ready(function(){
           alert("Hello jQuery");
       });
    
    </script>
    
    
</body>
</html>
Запуск примера:

3- jQuery Selector

3.1- Что такое jQuery Selector?

Страница HTML включает много элементов (element), Selector используется для выбора элементов совпадающих с определенной критерией. Например выбрать все элемент <h1> в странице, или все элементы <div> в странице.

Понятие Selector это одно из важнейших понятий в jQuery.

3.2- Пример с Selector

Первый пример,выбрать все элементы div в документе и настроить border для них "1px solid red". Здесь мы используем синтаксис:

// Select all <div> elements in HTML page.
jQuery('div')

// You can replace jQuery by $
$('div')
selector_tagname.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Select elements by tagName</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
      div {
        padding: 5px;
        margin:5px;
        width: 100px;
      }
   </style>
  
   <script>
      function selectDiv()  {  
          $('div').css("border","1px solid red");
      }    
   </script>
</head>
<body>

   <input type="button" onclick="selectDiv();" value="Select Div"/>
   <a href="">Refresh this page</a>
  
  
   <div>Div1</div>
  
   <h2>H2 tag</h2>
  
   <div>
      
        <div>Div3</div>
      
        <div>Div4</div>
  
   </div>
  
  
</body>
</html>
Запуск примера:
Выбрать элементы по classname.
Синтаксис:

// Select all elements has classname='abc'.
jQuery('.abc')

// You can replace jQuery by $
$('.abc')
selector_classname.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Select elements by classname</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
      h2, div {
        padding: 5px;
        margin:5px;
        width: 250px;
      }
   </style>
  
   <script>
      function selectByClassName()  {  
          $('.abc').css("border","1px solid red");
      }    
   </script>
</head>
<body>

   <input type="button" onclick="selectByClassName();" value="Select By ClassName"/>
   <a href="">Reset</a>
  
  
   <div>Div1</div>
  
   <h2 class='abc'>H2 with class='abc'</h2>
  
   <div>
      
        <div class='abc'>Div3 with class='abc'</div>
      
        <div class='abc'>Div4 with class='abc'</div>
  
   </div>
  
  
</body>
</html>
Запуск примера:

3.3- Синтаксисы в Selector

Я ознакомил вас выше про Selector, в этой части я перечислю разные синтаксисы Selector.
Selector Пример Выбор
* $("*") Все элементы
#id $("#lastname") Элемент с id="lastname"
.class $(".intro") Все элементы, имеющие class="intro"
.class,.class $(".intro,.demo") Все элементы, имеющие class "intro" или "demo"
element $("p") Все элементы <p>
el1,el2,el3 $("h1,div,p") Все элементы <h1>, <div> и <p>
     
:first $("p:first") Первый элемент <p> 
:last $("p:last") Последний элемент <p> 
:even $("tr:even") Все четные элементы <tr> 
:odd $("tr:odd") Все нечетные элементы <tr> 
     
:first-child $("p:first-child") Все элементы <p> являющиеся первым подэлементом.
:first-of-type $("p:first-of-type") Все элементы <p> являющиеся первыми элементами <p> родительского элемента.
:last-child $("p:last-child") Все элементы <p> являющиеся последними элементами родительского элемента.
:last-of-type $("p:last-of-type") Все элементы <p> являющиеся последними элементами <p> родительского элемента.
:nth-child(n) $("p:nth-child(2)") Все элементы <p> являющиеся 2-ми подэлементами их родителей.
:nth-last-child(n) $("p:nth-last-child(2)") Все элементы <p> являющиеся 2-ми подэлементами их родителей, считая от последнего.
:nth-of-type(n) $("p:nth-of-type(2)") Все элементы <p> являющиеся 2-ми элементами <p> tих родителей.
:nth-last-of-type(n) $("p:nth-last-of-type(2)") Все элементы <p> являющиеся 2-ми элементами <p> их родителей, считая от последнего.
:only-child $("p:only-child") Все элементы <p> являющиеся единственными подэлементами их родителей.
:only-of-type $("p:only-of-type") Все элементы <p> являющиеся единственными подэлементами <p> их родителей.
     
parent > child $("div > p") Все элементы <p> являющиеся прямыми подэлементами для <div>
parent descendant $("div p") Все элементы <p> являющиеся потомками <div> 
element + next $("div + p") Все элементы <p> находящиеся радом с элементами <div>
element ~ siblings $("div ~ p") Все элементы <p> являющиеся братьями с элементом <div> 
     
:eq(index) $("ul li:eq(3)") 4-й элемент в списке (индекс начинается с 0)
:gt(no) $("ul li:gt(3)") Список элементов с индексом больше чем 3
:lt(no) $("ul li:lt(3)") Список элементов с индексом меньше чем 3
:not(selector) $("input:not(:empty)") Все непустые элементы <input>
     
:header $(":header") Все элементы с заголовком <h1>, <h2> ...
:animated $(":animated") Все анимационные элементы (animated elements)
:focus $(":focus") Все выбранные элементы (has focus)
:contains(text) $(":contains('Hello')") Все элементы содержащие текст "Hello"
:has(selector) $("div:has(p)") Все элементы <div> имеющие элемент <p>
:empty $(":empty") Все пустые элементы (empty)
:parent $(":parent") Все родительские элементы других элементов
:hidden $("p:hidden") Все скрытые элементы <p> (hidden).
:visible $("table:visible") Все видимые таблицы.
:root $(":root") Коренные элементы документа.
:lang(language) $("p:lang(de)") Все элементы <p>  с атрибутом lang начинающийся с "de"
     
[attribute] $("[href]") Все элементы с атрибутом href
[attribute=value] $("[href='default.htm']") Все элементы с атрибутом href являющиеся "default.htm"
[attribute!=value] $("[href!='default.htm']") Все элементы с атрибутом href отличающиеся от "default.htm"
[attribute$=value] $("[href$='.jpg']") Все элементы с атрибутом href с окончанием là ".jpg"
[attribute|=value] $("[title|='Tomorrow']") Все элементы с атрибутом title равный 'Tomorrow', или начинается с 'Tomorrow'
[attribute^=value] $("[title^='Tom']") Все элементы с атрибутом title начинающиеся с "Tom"
[attribute~=value] $("[title~='hello']") Все элементы с атрибутом title содержащие "hello"
[attribute*=value] $("[title*='hello']") Все элементы с атрибутом содержащие слово "hello"
     
:input $(":input") Все входные элементы (input elements)
:text $(":text") Все элементы  <input> с type="text"
:password $(":password") Все элементы  <input> с type="password"
:radio $(":radio") Все элементы  <input> с type="radio"
:checkbox $(":checkbox") Все элементы <input> с type="checkbox"
:submit $(":submit") Все элементы <input> с type="submit"
:reset $(":reset") Все элементы <input> с type="reset"
:button $(":button") Все элементы <input> с type="button"
:image $(":image") Все элементы <input> с type="image"
:file $(":file") Все элементы <input> с type="file"
:enabled $(":enabled") Все действующие элементы <input> (enabled)
:disabled $(":disabled") Все недействующие элементы <input> (disabled)
:selected $(":selected") Все выбранные элементы <input> (selected)
:checked $(":checked") Все проверенные элементы <input>  (checked)
Правила выше являются базовыми правилами, вы можете их сочетать вместе.
Сочитаем Selector:
Правило:
  • $('div') - Элементы <div>.
  • $('.abc') - Элементы имеющие class='abc'.
  • $('#slider') - Элементы имеющие ID slider
Сочитание:
  • $('div.abc') - Элементы <div> имеющие class='abc'.
  • $('div#slider') - Элемент <div> c id ='slider'.
Правило:
  • $("p:first-child")  - Элементы <p> являются первым подэлементом их родителей.
  • $('div') - Элементы <div>
  • $("div p") - Элементы <p> являются потомками <div> 
Сочитание:
  • $('div p:first-child') - Элементы <p> являются первым подэлементом элемента <div>
Например:
selector_firstchildofdiv.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Select First child of div</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
      h2, div , p   {
        padding: 5px;
        margin:5px;
        width: 350px;
        border: 1px solid blue;
      }
   </style>
  
   <script>
      function selectAdv()  {  
          $('div p:first-child').css("background","#ccc");
      }    
   </script>
</head>
<body>

   <input type="button" onclick="selectAdv();" value="Select First Child of div"/>
   <a href="">Reset</a>
  
  
   <div>Div element</div>
  
   <h2 class='abc'>H2 element</h2>
  
   <div> Div element
      
        <p class='abc'>p - first child of div</p>
      
        <p class='abc'>p - second child of div</p>
      
        <div class='abc'> Div element
      
             <p>p -  first child of div</p>
            
        </div>
  
   </div>    
  
  
   <div>
      
        <div class='abc'>Div element</div>
      
        <p class='abc'>p - second child of p</p>        
  
   </div>    
  
</body>
</html>
Запуск примера:

4- jQuery Attribute

Каждый элемент на странице с jQuery будет иметь атрибуты, и методы для использования.
Пример элемента с атрибутом (attribute):

<!-- <a> element has two attributes href & target -->

<a href="abc.html" target="_blank">Abc.html</a>
jQuery предоставляет вам некоторые методы для получения значения или настроить значение для атрибута.

4.1- Получить значение атрибута

Метод attr(name) в jQuery позволяет вам получить значение элемента:
attribute_getatt.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery - Get Attribute</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
 
    
    <script>
    
       function getAttr()  {   
     
           // Get the href attribute value of the element with id = 'atag'
           var hrefValue = $('#atag').attr("href");
           
     
           // Set html to element with id='atag'.
           $('#atag').html(hrefValue);
       }    
    </script>
</head>
<body>
   <input type="button" onclick="getAttr();" value="Get Attribute"/>
   <a href="">Reset</a>
   
   <br><br>
   
   <a id="atag" href="http://jquery.com" target="_blank">jQuery</a>
    
</body>
</html>
Запуск примера:

4.2- Настроить значение атрибута

Метод attr(name, value) используется для настройки значения атрибутов элемента.
attribute_setatt.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery - Set Attribute</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
 
    
    <script>
    
       function setAttr()  {   
      
           // Setting new value for the src attribute of the img elements.
           $('img').attr("src","images/jquery-mobile.png");
       }    
    </script>
</head>
<body>
   <input type="button" onclick="setAttr();" value="Set Attribute"/>
   <a href="">Reset</a>
   
   <br><br>
   
   <img src="images/jquery.png" > <img src="images/jquery2.png" >
    
</body>
</html>
Запуск примера:

4.3- Настроить Style

Метод addClass(classes) используется для применения style (стиля) в элементы. Вы можете использовать много  css-class отделенные пробелом.
attribute_applystyle.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery - Apply Style</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>

   <style>
      .selected {color: red; }
      .highlight {background: yellow;}
  
   </style>
  
   <script>
  
      function applyStyle()  {  
          $('h1').addClass('selected highlight');
          $('h2').addClass('selected');
      }    
   </script>
</head>
<body>
  <input type="button" onclick="applyStyle();" value="Apply Style"/>
  <a href="">Reset</a>

  <br><br>

  <h1>H1 will apply selected + highlight</h1>

  <h2>H2 will apply selected</h2>

  <h1>H1 will apply selected + highlight</h1>
  
</body>
</html>
Запуск примера:

4.4- Методы работы с атрибутом

T.T Метод и Описание Пример
1 attr( properties )
Настроить key/value как атрибуты для подходящих элементов.
$('#id').attr('href')

$('a').attr({href:'a.html', alt:'a'})
2 attr( key, fn )
Настроить одно вычисленное значение в единственный атрибут для всех подходящих элементов (element).
$("table").attr("border", function(index) {
    return "1px";
})
3 removeAttr( name )
Убрать атрибут из каждого подходящего элемента.
$("table").removeAttr("border");
4 hasClass( class )
Возвращается true если определенный class находится как минимум в одном из настроенных подходящих элементов.
$('h1').hasClass('highlight')
5 removeClass( class )
Удаляет определенный класс (классы) из настроенных подходящих элементов.
$('h1').removeClass('highlight')
6 toggleClass( class )
Добавляет определенный класс (class) если отсутствует в элементе, или удаляет этот класс если уже есть в элементе.
$('h1').toggleClass('highlight')
7 html( )
Возвращает содержание html (innerHTML) первого подходящего элемента.
$('a').html()
8 html( val )
Настраивает содержаение html во все подходящие элементы.
$('a').html('Go to new page')
9 text( )
Получает сочетание содержания текстов все подходящих элементов.
$('div').text()
10 text( val )
Настраивает содержание текста всех подходящих элементов.
$('div').text('Text content')
11 val( )
Получает входное значение первого подходящего элемента.
$("input").val();
12 val( val )
Настраивает значение атрибута каждого подходящего элемента. Если вызывается на элементе <input>, если вызывается на <select> то значение передается <option>, если вызывается на  checkbox или radio то все подходящие check box, или radio будут проверены.
$("input").val('New value');

5- DOM Traversing

5.1- Что такое Traversing?

jQuery traversing, означает "перемещение", используется для поиска (или выбора) элементов HTML основываясь на их отношении с другими элементами. Начиная с выбранным местоположением (элементов) и перемещайтесь пока вы не встретите нужные вам элементы.
Посмотрите документ HTML и он трансформировался в структуру типа DOM (дерева).

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Traversing</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
 
</head>
<body>

    <h3>jQuery Traversing</h3>
      
    <div>
        
         <ul>
            <li>Java</li>
            <li>.Net</li>
            <li>PHP</li>
         </ul>
    
    </div>     
    
</body>
</html>

5.2- jQuery Traversing - Ancestors

Элемент предок (ancestor element) это родитель, прародитель и т.д. определенного элемента.
С jQuery вы можете перемещаться вверх (traverse up) по дереву DOM чтобы найти предков элемента.
jQuery имеет некоторые методы, позволяющие вам перемещаться вверх (traverse up) по дереву DOM чтобы найти предков (Ancestors).
  • parent()
  • parents()
  • parentsUntil()

5.2.1- parent()

Метод parent() возвращает прямого родителя выбранного элемента.
Например, чтобы найти все родительские элементы имеющие класс class='abc'.
traversing_parent.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Traversing - Parent</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
       div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;}
       .abc {border: 1px solid red;}
   </style>
  
   <script>
  
      function highlightParent()  {  
          
          $('.abc').parent().css("background","#ccc");
      }    
   </script>
  
</head>
<body>

   <h3>jQuery Traversing - parent </h3>
   <input type="button" onclick="highlightParent();" value="Highlight parent of element with class='abc'"/>
   <a href="">Reset</a>
      
   <div>
      
        <ul>
           <li class='abc'>li class='abc' </li>
           <li>li element</li>
           <li>li element</li>
        </ul>
  
   </div>    
  
   <div>
       <div class='abc'>Div class='abc'</div>
   </div>
  
</body>
</html>
Запуск примера:

5.2.2- parents

Метод parents() возвращает элементов предков (ancestor) выбранных элементов, всех элементов до коренных элементов документа (<html>).
Например найдите все элементы <div> являющиеся предком элементов имеющих класс class= 'abc'.
traversing_parents.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Traversing - Parent</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
       div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;}
       .abc {border: 1px solid red;}
   </style>
  
   <script>
  
      function highlightParents()  {  
          
          $('.abc').parents('div').css("background","#ccc");
      }    
   </script>
  
</head>
<body>

   <h3>jQuery Traversing - parent </h3>
   <input type="button" onclick="highlightParents();" value="Highlight DIV ancestors of element with class='abc'"/>
   <a href="">Reset</a>
      
   <div>
      
        <ul>
           <li class='abc'>li class='abc' </li>
           <li>li element</li>
           <li>li element</li>
        </ul>
  
   </div>    
  
   <div>
       <div class='abc'>Div class='abc'</div>
   </div>
  
</body>
</html>
Запуск примера:

5.2.3- parentsUntil()

Метод parentsUntil() возвращает все элементы предки находящиеся между 2-мя элементам включая выбранные элементы и определенные элементы в параметре.
Например найдем элементы предки <h2> до тех пор пока не встретим элемент <div>:
traversing_parentsUntil.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Traversing - parentsUntil</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
       div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;}
   </style>
  
   <script>
  
      function highlightParentsUntil()  {    
          $('h2').parentsUntil('div').css("border","2px solid red");
      }    
   </script>
  
</head>
<body>

   <h3>jQuery Traversing - parentsUtil</h3>
   <p>$('h2').parentsUntil('div').css("border","2px solid red");</p>
   <input type="button" onclick="highlightParentsUntil();"
                   value="Highlight ancestors elements between H2 and DIV"/>
   <a href="">Reset</a>
      
   <div> div element
      
        <ul> ul element
                    
           <li>
              li element
              <h2>h2 element</h2>
           </li>
          
           <li>li element</li>
        </ul>
  
   </div>
  
</body>
</html>
Запуск примера:

5.3- jQuery Traversing - Descendants

Найти элементы потомков (descendants) выбранных элементов. То есть подэлементы
jQuery предоставляет вам 2 метода:
  • children()
  • find()

5.3.1- children()

Данный метод возвращает все прямые подэлементы выбранного элемента.
Например после выделения (highlight) подэлементов элемента <div>.
traversing_children.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Traversing - children</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
       div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;}
   </style>
  
   <script>
  
      function highlightChildren()  {    
          $('div').children().css("border","2px solid red");
      }    
   </script>
  
</head>
<body>

   <h3>jQuery Traversing - children</h3>
   <p>$('div').children().css("border","2px solid red");</p>
   <input type="button" onclick="highlightChildren();"
             value="Highlight children of DIV"/>
   <a href="">Reset</a>
      
   <div> div element
      
        <h2>h2 element</h2>
      
        <ul>
           ul element
          
           <li>li element</li>
           <li>li element</li>
        </ul>
  
   </div>
  
</body>
</html>
Запуск примера:

5.3.2- find()

Найти подходящие элементы в наборе элементов потомков выбранных элементов.
Следующий пример находит элементы <h2> являющиеся наследником элемента <div>.
traversing_find.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Traversing - find</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
    
    <style>
        div,  h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
    </style>
    
    <script>
    
       function highlightFind()  {    
           $('div').find('h2').css("border","2px solid red");
       }    
    </script>
    
</head>
<body>

    <h3>jQuery Traversing - find</h3>
    <p>$('div').find('h2').css("border","2px solid red");</p>
    <input type="button" onclick="highlightFind();"
              value="Highlight descendants H2 of DIV"/>
    <a href="">Reset</a>
        
    <h2>h2 element</h2>
        
    <div> div element
        
         <h2>h2 element</h2>
        
         <ul>ul element
            <li>li element
               <h2>h2 element</h2>
            </li>  
            <li>li element</li>
         </ul>
    
    </div>
    
</body>
</html>
Запуск примера:

5.4- jQuery Traversing - Siblings

Найти элементы братьев, с одним родителм данного элемента.
jQuery предоставляет вам некоторые методы поиска элементов братьев (sibling elements).
  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()
nextUntil(..) & prevUntil(..):

5.4.1- siblings(), next(), prev(), nextAll(), prevAll(), nextUntil(), prevUntil example

Методы:
Метод Описание Пример
siblings([selector]) Метод siblings() возвращает все элементы братья выбранного элемента. $('h2').siblings()
next([selector]) Метод next() возвращает следующий элемент брат выбранного элемента. $('h2').next()
prev([selector]) Метод prev() возвращает передний элемент брат выбранного элемента. $('h2').prev()
nextAll([selector]) Метод nextAll() возвращает все следующие элементы братья выбранного элемента. $('h2').nextAll()
prevAll([selector]) Метод prevAll() возвращает все предыдущие элементы братья выбранного элемента. $('h2').prevAll()
nextUntil(selector) Метод  nextUntil() возвращает все последующие элементы братья до тех пор пока не встречается элемент подходящий условиям параметра. $('h2').nextUntil('h4.blue')
prevUntil(selector) Метод  prevUntil() возвращает все предыдущие элементы братья до тех пор пока не встречается элемент подходящий условиям параметра. $('h2').prevUntil('h1')
Следующий пример иллюстрирует использование методов:
  • siblings(), next(), prev(), nextAll(), prevAll(), nextUntil(), prevUntil().
traversing_siblings.html

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery Traversing - siblings</title>
  
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
   <style>
     h1, h2, h4, p, div {padding: 5px; margin: 5px; border: 1px solid black;}
         h2 {border: 2px solid red;}
        .blue {border: 2px solid blue;}
   </style>
  
   <script>
      function clearAll() {
          $('h1, h2, h4, p, div').css("background","white");
      }
      function highlightSiblings()  {
          clearAll();  
          $('h2').siblings().css("background","yellow");
      }
      function highlightNext()  {
          clearAll();    
          $('h2').next().css("background","yellow");
      }
      function highlightNextAll()  {
          clearAll();    
          $('h2').nextAll().css("background","yellow");
      }
      function highlightNextUntil()  {
          clearAll();    
          $('h2').nextUntil('h4.blue').css("background","yellow");
      }
      function highlightPrev()  {
          clearAll();    
          $('h2').prev().css("background","yellow");
      }
      function highlightPrevAll()  {
          clearAll();    
          $('h2').prevAll().css("background","yellow");
      }
      function highlightPrevUntil()  {
          clearAll();    
          $('h2').prevUntil('h1').css("background","yellow");
      }                                              
   </script>
  
</head>
<body>

   <h3>jQuery Traversing - siblings</h3>

   <input type="button" onclick="highlightSiblings();" value="siblings()"/>
   <input type="button" onclick="highlightNext();" value="next()"/>
   <input type="button" onclick="highlightPrev();" value="prev()"/>
  
   <input type="button" onclick="highlightNextAll();" value="nextAll()"/>
   <input type="button" onclick="highlightPrevAll();" value="prevAll()"/>
  
   <input type="button" onclick="highlightNextUntil();" value="nextUntil()"/>
   <input type="button" onclick="highlightPrevUntil();" value="prevUntil()"/>
  
  
   <a href="">Reset</a>
      

      
    <div>div element
       <h1 class='blue'>h1 element (Until)</h1>  
       <div>div element</div>
       <div>div element</div>
       <h2>h2 element (current)</h2>
       <p>p element</p>
       <div>div element
           <br>
           <p style="background:white;">p element</p>
       </div>
       <h1>h1 element</h1>
       <h4>h4 element</h4>
       <h4 class='blue'>h4 element class='blue'  (Until)</h4>
       <div>div element</div>  
    </div>
  

  
</body>
</html>
Запуск примера:

5.5- jQuery Traversing - Filtering

Методы:
Метод Описание Пример:
eq(index) Метод eq() возврщамет элемент с определенным индексом выбранных элементов $('p').eq(1)
filter(selector) Метод filter() позволяет вам выбрать критерию. Элементы не подходящмк по критериям будут удалены из выбранного, и возвращаются подходящие. $('p').filter('.abc')
filter(fn) Удаляет все элементы из набора подходящих элементов которые не подходят по укащанным функциям.  
first() Метод first() возвращает первый элемент из выбранных элементов. $('p').first()
has()    
is(selector) Проверяет подходят ли выбранные элементы к параметром и возвращает true, если хотя бы 1 элемент из выбранного подходит.  
last() Метод last() возвращает последний элемент в списке выбранного. $('p').last()
map(callback) Переводит набор элементов в объекте jQuery в набор массивов (возможно, не содержит никаких элементов).  
not(selector) Метод not() возвращает все элементы неподходящие критериям.  
slice(start,[end]) Возвращает набор подходящих подэлементов. $('p').slice(1, 4)
$('p').slice(2)

5.5.1- eq(index)

Метод eq(index) возвращает элемент с опредленным индексом выбранных элементов.
Номер индекса начинается с 0, поэтому первый элемент будет иметь индекс номер 0, а не 1.
Например, найдем второй элемент <p>  (Индекс будет 1).

// Tìm phần tử <p> thứ 2
$("p").eq(1);

5.5.2- filter(selector)

Метод filter(selector) позволяет вам определить критерию. Элементы не подходящие критерию будут удалены из выбранного и будут возвращены подходящие.
В следующем примере возвращаются все элементы <h3> имеющие classname  "abc":

$("h3").filter(".abc");

5.5.3- filter(fn)

Удаляет все элементы из выбранных неподходящие критериям, возвращает остальные элементы.
Параметры функции:

// Function
Function( Integer index, Element element ) => Boolean
Например:

$('h4').filter(function(index, element) {
  if(index == 1) {
     return true;
  }
  if( $(element).hasClass('highlight')  ) {
     return true;
  }
  return false;
}).css('color','red');
Полный пример:
traversing_filter_fn.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Traversing - filter(fn)</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
    
    <style>
        div,  h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
    </style>
    
    <script>
    
       function highlightFilter()  {    
      
           $('h4').filter(function(index, element) {
              if(index == 1) {
                 return true;
              }
              if( $(element).hasClass('highlight')  ) {
                 return true;
              }
              return false;
           }).css('color','red');
       }    
      
    </script>
    
</head>
<body>

    <h3>jQuery Traversing - filter(fn)</h3>
    
    <input type="button" onclick="highlightFilter();"
              value="Highlight filter(fn)"/>
              
    <a href="">Reset</a>
        
    <h4>h4 element (index = 0)</h4>    
        
    <h4>h4 element (index = 1)</h4>
    
    <p>p element</p>
        
    <h4 class="highlight">h4 element with class = 'highlight' (index = 2)</h4>
    
    <h4>h4 element (index = 3)</h4>
    
</body>
</html>
Запуск примера:

5.5.4- not(selector)

Метод not(selector) возвращает все элементы неподходящие критериям.
Например, найдем элементы <p> несодержащие class = 'abc'.

$('p').not('.abc')

5.5.5- not(fn)

Метод not(fn) возвращает элементы не подходящие функции fn.
Параметры функции:

// Function
Function( Integer index, Element element ) => Boolean
Пример:

$('h4').not(function(index, element) {
  if(index == 1) {
     return true;
  }
  if( $(element).hasClass('highlight')  ) {
     return true;
  }
  return false;
}).css('color','red');
Смотреть полный пример:
traversing_not_fn.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Traversing - not(fn)</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
    
    <style>
        div,  h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
    </style>
    
    <script>
    
       function highlightNot()  {    
      
           $('h4').not(function(index, element) {
              if(index == 1) {
                 return true;
              }
              if( $(element).hasClass('highlight')  ) {
                 return true;
              }
              return false;
           }).css('color','red');
       }    
      
    </script>
    
</head>
<body>

    <h3>jQuery Traversing - not(fn)</h3>
    
    <input type="button" onclick="highlightNot();"
              value="Highlight not(fn)"/>
              
    <a href="">Reset</a>
        
    <h4>h4 element (index = 0)</h4>    
        
    <h4>h4 element (index = 1)</h4>
    
    <p>p element</p>
        
    <h4 class="highlight">h4 element with class = 'highlight' (index = 2)</h4>
    
    <h4>h4 element (index = 3)</h4>
    
</body>
</html>
Запуск примера:

5.5.6- has(selector)

Например:
Найдем все элементы <div> имеющие элемент <p> внутри:

$("div").has("p")
traversing_has.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Traversing - has(selector)</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
    
    <style>
        p, div {padding: 5px; margin: 5px; border: 1px solid blue; width: 300px;}
    </style>
    
    <script>
    
       function highlightHas()  {    
      
           $('div').has("p").css('border','2px solid red');
       }    
      
    </script>
    
</head>
<body>

    <h3>jQuery Traversing - has(selector)</h3>
    
    <p>$("div").has("p").css('border','2px solid red');</p>
    
    <input type="button" onclick="highlightHas();"
              value="Highlight has(selector)"/>
              
    <a href="">Reset</a>
        
    <div>div element
        
        <div>div element
            <p>p element</p>
        </div>
    </div>
        
    <div>div element
            <p>p element</p>
    </div>
    
</body>
</html>
Запуск примера:

6- jQuery Event

События поддерживающиеся в модели DOM:
Виды событий События Описание
MOUSE EVENT click Происходит при клике
dblclick Происходит при двойном клике
mouseenter Происходит когда мышь заходит в регион отображения элемента
mouseleave Происходит когда мышь выходит из региона отображения элемента
 
KEYBOARD EVENT keypress Происходит при нажатии и отпускании клавиши.
keydown Происходит при нажатии клавиши.
keyup Происходит при отпускании клавиши.
 
FORM EVENT submit Происходит при отправлении формы (submit)
change Происходит при изменении элемента (element).
focus Происходит когда выбран основной элемент.
blur Происходит когда элемент теряет фокус.
 
DOCUMENT/WINDOW EVENT load Происходит при скачивании документа (document).
resize Происходит когда окно (window) меняет размер.
scroll Происходил при прокрутке окна
unload Происходит при неудачном скачивании документа (unloaded).
error Происходит при обшибке при скачивании или отмене скачивания,..(loading or unloading).

6.1- Общий метод для обработки события

Вам нужно прикрепить (bind) функцию с определенным событием элемента. Когда происходит событие, выполняется функция. Например после прикрепления функции к событию нажмите на все элементы <h3>.

// At the moment the page is ready
$(document).ready(function() {

   // Attach an event handler to the "click" event of h3 elements.
   $("h3").click(function() {
       // Use $(this) to refer element fire this event. (h3)
       $(this).css("background:#ccc");
   });

   // Attach an event handler to the "dblclick" event of h4 elements.
   $("h4").dblclick(function(){
       // Use $(this) to refer element fire this event. (h4)
       $(this).css("background:yellow");
   });
 
});
event_helloworld.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Event - Hello World example</title>


    <style>
       h3 {border: 1px solid blue; padding: 5px; width: 200px;}
       h4 {border: 1px solid red; padding: 5px; width: 200px;}
    </style>
        
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
 
    
    <script>
    
 
        // At the moment the page is ready
        $(document).ready(function() {

      
           // Attach an event handler to the "click" event of h3 elements.
           $("h3").click(function(){
         
               // Use $(this) to refer element fire this event. (h3)
               $(this).css("background","#ccc");
           });

      
           // Attach an event handler to the "dblclick" event of h4 elements.
           $("h4").dblclick(function() {
      
               // Use $(this) to refer element fire this event. (h4)
               $(this).css("background","yellow");
           });
        
        });
        
    </script>
    

</head>
<body>
    <h2>jQuery Event - Hello World example</h2>
    <a href="">Reset</a>
    
    <h3>H3 - Click me!</h3>
    <h3>H3 - Click me!</h3>
    
    <h4>H4 - Double Click me!</h4>
    
</body>
</html>
Запуск примера:

6.2- Использование bind()/unbind()

Вы можете использовать bind() чтобы прикрепить функцию обработки события для элементов. 
Синтаксис:

selector.bind( eventType[, eventData], handler)
 
  • eventType − string содержащий вид событий, например click, submit,.... Смотрите список событий в таблице выше.
  • eventData − Это необязательных параметр являющийся картой данных (map) который будет отправлен в функцию управляющую события (event handler).
  • handler − Это функция выполненная каждый раз при происхождении события.

 
Пример:

$(document).ready(function() {

    $('div').bind('click', function( event ){
        alert('Hi there!');
    });

});
Вы так же можете использовать unbind() чтобы убрать обработчик события (event handler)
Синтаксис:

selector.unbind(eventType, handler)

// or

selector.unbind(eventType)
  • eventType − этоt string tên событий, например click, submit,...
  • handler − При предоставлении, определяет что нужно удалить.
event_bind_unbind.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Event - bind()/unbind() example</title>


    <style>
       h3 {border: 1px solid blue; padding: 5px; width: 300px;}
       h4 {border: 1px solid red; padding: 5px; width: 300px;}
       
       p {border: 1px solid green; padding: 5px; width: 300px;}
    </style>
        
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
 
    
    <script>
    
    
        // At the moment the page is ready
        $(document).ready(function() {
             
   
           // Bind an event handler to the "click" event of h3 elements.
           $("h3").bind('click', function() {
               $(this).css("background","#ccc");
           });

    
           // Bind an event handler to the "dblclick" event of h4 elements.
           $("h4").bind('dblclick', function(){
               $(this).css("background","yellow");
           });
           
           $("p").bind('click', function()  {
       
               // Remove the event handler click on h3.
               $("h3").unbind("click");
               $("h3").text("click handler removed!");
               $("h3").css("background", "white");               
           });        
        });
        
    </script>
    

</head>
<body>
    <h2>jQuery Event - bind()/unbind() example</h2>
    <a href="">Reset</a>
    
    <h3>H3 - Click me!</h3>
    <h3>H3 - Click me!</h3>
    
    <h4>H4 - Double Click me!</h4>
    
    <p>Click to remove click handler in h3</hp>
</body>
</html>
Запуск примера:

6.3- Атрибуты Event (Event Attribute)

Номер Атрибут Описание
1 altKey Возвращает true если клавиша Alt нажата при происхождения события, возвращает false в обратном случае. Клавиша Alt является Option на клавиатуре Mac.
2 ctrlKey Возвращает true если клавиша Ctrl нажата при происхождения события, возвращает false в обратном случае.
3 data Значение, если есть, передается во второй параметр bind() при обработке.
4 keyCode Используется для событий keyup или keydown, возвращает нажатые клавиши.
5 metaKey Значение true если клавиша Meta нажата при происхождения события, возвращает false в обратном случае. Клавиша Meta является Ctrl на PC и является Command на Mac.
6 pageX Используется для событий мыши, определяет горизонтальные координаты события относительно начальной страницы.
7 pageY Используется для событий мыши, определяет вертикальные координаты события относительно начальной страницы.
8 relatedTarget Для событий мыши, определяющие состояние курсора вышло или зашло при происхождении события
9 screenX Для событий мыши, определяет координаты по горизонтали при происхождении события, относительно к начальной странице.
10 screenY Для событий мыши, определяет координаты по вертикали при происхождении события, относительно к начальной странице.
11 shiftKey Значение true если клавиша Shift нажата при происхождения события, возвращает false в обратном случае.
12 target Определяет элемент из-за которого происходит событие.
13 timeStamp Время (считанное в милисекундах) при создании события.
14 type Для всех событий, определяет вид произошедшего события, например click.
15 which Для событий клавиш, определяет числовой код (numeric code) клавиши создавшей событие, это код нажатого символа, для события мыши определяет какая кнопка была нажата, правая, центральная или левая (1 это левая, 2 это центральная, 3 правая).
Смотрим пример:
event_attribute.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Event attribute example</title>


    <style>
       div {margin : 10px; width: 250px; height: 150px; float: left; }
    </style>
        
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>

    
    <script>
    
        $(document).ready(function() {
        
           $("div").click(function(event) {  
               var s="Type  = "+ event.type+ "<br>"
                    +"pageX = "+ event.pageX+"<br>"
                    +"pageY = "+ event.pageY+"<br>"
                    +"screenX = "+ event.screenX+"<br>"
                    +"screenY = "+ event.screenY+"<br>"
                    +"which = "+ event.which+"<br>"
                    +"target = "+ event.target.innerHTML+"<br>"
                    ;
                    
               $('div#log').html(s);
           });

        });
        
    </script>
    

</head>
<body>
    <h2>jQuery Event attribute example</h2>
    
    
    <div style="background:blue;">
       DIV 1
    </div>
    
    <div style="background:red;">
       DIV 2
    </div>
    
    <hr style="clear:both;"/>
    
    <div id="log" style="border:1px solid #ccc;padding:10px;width:550px;">
  
    
    </div>
</body>
</html>
Запуск примера:

6.4- Методы Event (Event methods)

No. Метод Описание
1 preventDefault() Предотвращает браузер выполнения действий по умолчанию.
2 isDefaultPrevented() Возвращает true при вызове event.preventDefault().
3 stopPropagation() Предотвращает распространения этого события на родительский элемент, предотвращает родительский элемент от уведомления о событии.
4 isPropagationStopped() Возвращает true если event.stopPropagation() был вызван в данном событии.
5 stopImmediatePropagation() Предотвращает остальные части обработки от выполнения.
6 isImmediatePropagationStopped() Возвращает true если event.stopImmediatePropagation() был вызван в данном событии.
Например при нажатии на правую мышь на веб страницу, по умолчанию появится окно popup. Вы можете использовать preventDefault() чтобы предотвратить это действие по умолчанию браузера.

// Hủy hiển thị của sổ contextmenu khi nhấn phải chuột vào thẻ div có id= div2
$("div").bind('contextmenu', function(event) {
   if( $(this).attr('id') == "div2")  {
      event.preventDefault();
   }
});

// Huỷ hành động mặc định khi nhấn vào thẻ <a>
$("a").click(function(event)  {
  event.preventDefault();
  alert("a element not working!!");
});
Смотрите полный пример:
event_preventDefault.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Event preventDefault()</title>


    <style>
       div {margin : 10px; padding:5px; width: 250px; height: 150px; float: left; }
    </style>
        
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>

    
    <script>
    
        $(document).ready(function() {
        
           $("div").bind('contextmenu', function(event) {
               if( $(this).attr('id') == "div2")  {
                   event.preventDefault();
               }
           });
          
           $("a").click(function(event)  {
               event.preventDefault();
               alert("a element not working!!");
           });
            
        });
        
    </script>
    

</head>
<body>
    <h2>jQuery Event preventDefault() example: Disable contextmenu on right click</h2>
    
    <a href="http://jquery.com">Go to jQuery.com (Not working)</a>
    <br>
    
    <div style="background:blue;" id="div1">
       Right-click to show context menu
    </div>
    
    <div style="background:red;" id="div2">
        Disable context menu
    </div>
    
    
    
</body>
</html>
Запуск примера:
event_stopPropagation.html

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Event stopPropagation()</title>


    <style>
       div {margin : 20px; padding:5px; float: left; }
       .outerDiv {background: red; width: 250px; height: 150px; }
       .innerDiv {background: yellow; width: 250px; height: 100px; }
    </style>
        
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>

    
    <script>
    
        $(document).ready(function() {
        
           $("div").click( function(event) {
               if( $(this).attr('id') == "stopDiv")  {
                   event.stopPropagation();
               }
               alert("click "+ $(this).html());
           });
            
        });
        
    </script>
    

</head>
<body>
    <h2>jQuery Event stopPropagation() example</h2>
    
  
    
    <div class="outerDiv">
       Outer Div
       <div class="innerDiv">
          Inner Div
       </div>
    </div>
    
    <div class="outerDiv">
        Outer Div
        <div class="innerDiv" id="stopDiv">
          Inner Div (stopPropagation)
       </div>      
    </div>
    
    
</body>
</html>
Запуск примера:

View more Tutorials: