M

E

N

U

 

 

атрибуты

attr() изменяет значение атрибута
removeAttr() удаляет атрибут
addClass() добавляет класс
removeClass() удаляет класс
hasClass() проверяет наличие класса у элемента
toggleClass() переключает классы
val() изменяет значение атрибута val
prop() изменяет значения атрибута
removeProp() удаляет атрибут
 
 

attr()

Функция изменяет значение атрибута.
В этом примере, будет изменено значение атрибута class.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #00F;
   font-size: 20px;
  }
  .b {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <p id="p1" class="a">Hello World!</p>
 <p id="p2" class="a">Привет Мир!</p>
 <script>
  $(document).ready(function () {
   $('#p1').attr('class', 'b');
 
   $('#p2').attr('class', function () {
    $('#p2').css({ 'color': '#0F0', 'font-size': '30px' });
   });
  });
 </script>
</body>
</html>
 
 
 

removeAttr()

Функция удаляет атрибут.
В этом примере будет удален атрибут class.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #00F;
   font-size: 20px;
  }
 </style>
</head>
<body>
 <p id="p1" class="a">Hello World!</p>
 <p id="p2" class="a">Привет Мир!</p>
 <script>
  $(document).ready(function () {
   $('#p1, #p2').removeAttr('class');
  });
 </script>
</body>
</html>
 
 
 

addClass()

Функция добавляет класс.
В этом примере элементу будет добавлен класс a.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <p id="p1">Hello World!</p>
 <script>
  $(document).ready(function () {
   $('#p1').addClass('a');
  });
 </script>
</body>
</html>
 
 
 

removeClass()

Функция удаляет класс.
В этом примере будет удален класс.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <p id="p1" class="a">Hello World!</p>
 <script>
  $(document).ready(function () {
   $('#p1').removeClass('a');
  });
 </script>
</body>
</html>
 
 
 

hasClass()

Функция проверяет наличие класса у элемента.
В этом примере функция будет проверять, если элементы с определенным именем класса. Если такие есть и они содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
 
  }
  .b {
 
  }
  .c {
 
  }
 </style>
</head>
<body>
 <p class="a">Hello World!</p>
 <p class="b">Привет Мир!</p>
 <p class="c">To be or not to be?</p>
 <script>
  $(document).ready(function () {
   var className = 'b';
   if($('p').hasClass(className)) {
    $('.' + className).css({'color': '#F00', 'font-size': '24px'});
   }
  });
 </script>
</body>
</html>
 
 
 

toggleClass()

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

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 
  .b {
   color: #0F0;
   font-size: 24px;
  }
 
  .c {
   color: #00F;
   font-size: 24px;
  }
 
  .d {
   color: #000;
   font-size: 14px;
  }
 
  button {
   cursor: pointer;
  }
 </style>
</head>
<body>
 <p id="p1">Hello World!</p>
 <br />
 <button id="change1">CHANGE</button>
 <br />
 <br />
 <br />
 <p id="p2">Привет Мир!</p>
 <br />
 <button id="change2">CHANGE</button>
 <script>
  $(document).ready(function () {
   $('#change1').click(function () {
    $(this).toggleClass('a');
    $('#p1').toggleClass('a');
   });
 
   var count = 0;
   $('#change2').click(function () {
    count++;
    $(this).toggleClass('a', count % 1 === 0);
    $('#p2').toggleClass('a', count % 1 === 0);
    $(this).toggleClass('b', count % 2 === 0);
    $('#p2').toggleClass('b', count % 2 === 0);
    $(this).toggleClass('c', count % 3 === 0);
    $('#p2').toggleClass('c', count % 3 === 0);
    $(this).toggleClass('d', count % 4 === 0);
    $('#p2').toggleClass('d', count % 4 === 0);
   });
  });
 </script>
</body>
</html>
 
 
 

val()

Функция изменяет значение атрибута val.
В этом примере при нажатии на кнопку Text, в текстовом поле появится одна запись, после следующего нажатия, появится другая запись, и так до бесконечности. При нажатии на кнопку Clean, текстовое поле будет очищено от записи.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  button {
   cursor: pointer;
   width: 50px;
  }
 </style>
</head>
<body>
 <input type="text" />
 <br />
 <br />
 <button id="b1">Text</button>
 <br />
 <br />
 <button id="b2">Clean</button>
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('#b1').click(function () {
    counter++;
    if(counter % 2 !== 0) {
     $('input').val('Hello World!');
    }
    else {
     $('input').val('Привет Мир!');
    }
   });
 
   $('#b2').click(function () {
    $('input').val('');
   });
  });
 </script>
</body>
</html>
 
 
 

prop()

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

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <input type="checkbox" />
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type="checkbox" />
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type="checkbox" />
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <br />
 <br />
 <br />
 <input id="change1" type="button" value="checked" />
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <button id="b1">checked</button>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <button id="b2">unchecked</button>
 <script>
  $(document).ready(function () {
   /*универсальная кнопка*/
   var counter = 0;
   $('#change1').click(function () {
    counter++;
    if(counter % 2 !== 0) {
     $('#change1').val('unchecked');
    }
    else {
     $('#change1').val('checked');
    }
    $('input:checkbox').prop('checked', function (i, val) {
     return !val;
    });
   });
 
   /*кнопка выбирает все флажки*/
   $('#b1').click(function () {
    $('input:checkbox').prop('checked', true);
   });
 
   /*кнопка снимает все флажки*/
   $('#b2').click(function () {
    $('input:checkbox').prop('checked', false);
   });
  });
 </script>
</body>
</html>
 
 
 

removeProp()

Функция удаляет атрибут.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
  <input type="text" disabled="disabled" />
 <script>
  $(document).ready(function () {
   $('input').removeProp('disabled');
  });
 </script>
</body>
</html>