Home > Web Front-end > JS Tutorial > Example analysis of change() usage in jquery_jquery

Example analysis of change() usage in jquery_jquery

WBOY
Release: 2016-05-16 16:15:31
Original
1128 people have browsed it

This article analyzes the usage of change() in jquery with examples. Share it with everyone for your reference. The specific analysis is as follows:

change() When the value of an element changes, the change event occurs. This event only applies to text fields, and textarea and select elements.
When used on a select element, the change event occurs when an option is selected. When used with a text field or text area, this event occurs when the element loses focus.

1. How to use change

1. Trigger change event: Trigger change event of selected element

Syntax: $(selector).change()

2. Bind the function to the change event: Specify the function to be run when the change event of the selected element occurs.

Syntax: $(selector).change(function)

2. Example of change() in jquery

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
 $("button").click(function(){
  $("input").change();
 });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>
Copy after login
<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时,它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>
Copy after login

I hope this article will be helpful to everyone’s jQuery programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template