How to lose focus and change span content in jquery

With the continuous development of web technology, more and more web page functions are realized no longer through back-end program development, but through front-end JS libraries such as JavaScript and jQuery. Among them, page interaction is a relatively common function, and form interaction is the most common. This article will introduce how to use jQuery to automatically change the content of the corresponding tag when the form input box loses focus.

1. Pre-knowledge

Before introducing how to use jQuery to change the content of the tag, we need to understand some basic knowledge.

1. jQuery version

The latest version of jQuery is 3.x, and the official has stopped maintaining 1.x and 2.x. Therefore, this article will use the latest version of jQuery, jQuery 3.x.

2. Selector

Selector is one of the very important concepts in jQuery. It can select elements based on their tag name, class name, ID and other attributes. For example, the selector $('input[type="text"]') can select all text input boxes on the page.

3. Events

In JavaScript, events are a very common concept. It refers to the behavior triggered by a certain operation in the DOM (Document Object Model), such as clicks, mouse movements, etc. In jQuery, events can be bound using the on() method, for example: $('button').on('click', function(){ alert('Button clicked'); }).

2. How to implement the

1. HTML part

In HTML, we need to define the text input box and tag in advance. For example:

<input type="text" id="txtName" />
<span id="spnName"></span>

The input tag is used to receive user input, and the span tag is used to display the content entered by the user. Its initial value can be empty.

2. jQuery part

In the jQuery code, we need to select the text input box first, and then use the on() method to bind the blur event. When the text input box loses focus, the callback function in the code can be executed. The specific code is as follows:

$(function() {
    $('#txtName').on('blur', function() {
        $('#spnName').text($(this).val());
    });
});

Among them, the $(this).val() method is used to obtain the value in the text input box, while the $('#spnName').text() method is used to set < The text content of the ;span> tag.

3. Summary

Through the above introduction, I believe everyone can clearly grasp the method of using jQuery to automatically change the content of the corresponding tag when the form input box loses focus. . Of course, in addition to using the text() method to set the content of the tag, we can also use the html() method to set the HTML content, or use the append() method to append new content to the tag.

Finally, it should be noted that although jQuery provides many convenient methods to operate the DOM, in actual development, you also need to pay attention to optimizing code performance to avoid being too bloated and affecting page performance.

The above is the detailed content of How to lose focus and change span content in jquery. For more information, please follow other related articles on the PHP Chinese website!