jQuery mouse click to change font color

jQuery is a JavaScript library widely used in web development. It provides a simple and easy-to-use API, allowing web developers to develop interactive and dynamic websites more efficiently. Among them, a commonly used function is to change the font color with a mouse click. In this article, I will introduce in detail how to use jQuery to achieve this function.

1. Introducing the jQuery library

First, we need to introduce the jQuery library into the HTML file. It can be directly downloaded and introduced to the local, or it can be accelerated through CDN, such as the following code:

<!-- 通过CDN引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

2. HTML structure

Next, create a div element in the HTML file , and add the text whose font color needs to be changed. For example:

<div class="color-change">
  <p>点击我改变字体颜色！</p>
</div>

3. jQuery implementation

Now let’s use jQuery to implement the function of clicking to change the font color. We need to select the corresponding element and register the "click" event. When the mouse clicks on the element, the font color will be changed. The specific code is as follows:

$(document).ready(function() {
  // 选中需要改变颜色的元素
  var colorChange = $('.color-change');

  // 为元素注册鼠标点击事件
  colorChange.on('click', function() {
    // 获取当前字体颜色
    var color = $(this).css('color');

    // 判断当前字体颜色是否为红色
    if (color === 'rgb(255, 0, 0)') {
      // 如果是红色，则改变为蓝色
      $(this).css('color', '#00f');
    } else {
      // 如果不是红色，则改变为红色
      $(this).css('color', '#f00');
    }
  });
});

The above code uses the basic syntax of jQuery. It first uses the $(document).ready() function and waits for the document to be loaded before executing the internal code. Next, use the $() function to select the element that needs to change the font color, register the mouse click event, when the element is clicked, get the current font color, determine whether it is red, if it is red, change the font color to blue, otherwise change is red.

4. Summary

Using jQuery to implement the function of changing the font color by mouse click is very simple. You only need to select the element whose color needs to be changed and register the mouse click event. The above code is for reference only and can be optimized or modified as needed in actual applications. At the same time, jQuery provides many other mouse events and animation effects, which can make the website more vivid and interactive. I hope this article can be helpful to everyone learning jQuery.

The above is the detailed content of jQuery mouse click to change font color. For more information, please follow other related articles on the PHP Chinese website!