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

Опубликовано admin - вт, 05/01/2018 - 23:40

[Функция] change(fn)

Раздел "Events"

Связать функцию с событием change для каждого подходящего элемента.

Параметры

change(fn)

1.0

fn: функция обработчик события change

function (eventObject)  { 

	this; // элемент 
}

Описание

Событие change запускается, когда утерян контроль над фокусом поля input и значение поля было изменено с того момента, как получило фокус.

Примеры

Пример:

Привязать событие change к элементу select, которое получает текст каждого выбронного элемента option, и указать данный текст затем в элементе div. Первоначальный вывод текста происходит в результате инициирования события Change.

Пример
Весь код

"jQuery"

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

"HTML"

<select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
  <div></div>

"CSS"

  div { color:red; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
						"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" 
	rel="stylesheet" type="text/css"/>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

	  });
	</script>

	</head>
	<body class="iframe">

	
<select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
  <div></div>


	</body>
	</html>

	
	<style>
	
  div { color:red; }

	</style>

Пример:

Добавить проверочный тест ко всем полям формы, тип которых - text:

"jQuery"

$("input[@type='text']").change( function() {
  // check input ($(this).val()) for validity here
});

"CSS"

div { color:red; }

Метод появился в jQuery 1.0 (http://api.jquery.com/change/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

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

Плагины jQuery UI

Эффекты