Learn how to use the $ symbol in jQuery

jQuery is a popular JavaScript library that simplifies tasks such as HTML document manipulation, event handling, animation effects, and more. In jQuery, the $ symbol is an important identifier, also known as the jQuery symbol. It is actually an alias for jQuery and is used to access functionality provided in the jQuery library. The

$ symbol has many uses in jQuery. Its function and usage will be introduced in detail below, with specific code examples.

1. Selector The most common use of the

$ symbol in jQuery is as a selector. The $ symbol makes it easy to select elements on the page and perform various operations on them. The following is a simple example:

// 选取所有class为example的元素
$('.example').css('color', 'red');

The above code uses the $ symbol to select all elements with class example in the page and sets their text color to red.

2. Event handling

$ symbols can also be used to add event handlers, such as click events, mouseover events, etc. The following is a sample code:

// 点击按钮时显示提示框
$('#btn').click(function() {
    alert('按钮被点击了！');
});

In the above code, the $ symbol selects the button element with the id btn, and adds a click event handler to it. When the button is clicked, a prompt will pop up. frame.

3. DOM operations

$ symbols can also be used to perform various DOM operations, such as adding, deleting, replacing elements, etc. The following is an example:

// 在列表后面添加新的列表项
$('ul').append('<li>New Item</li>');

The above code selects the ul element in the page through the $ symbol and adds a new list item to it.

4. Animation effects

$ symbols can also be used to add animation effects, such as fade in and fade out, sliding, etc. The following is a simple animation effect example:

// 淡入效果
$('#element').fadeIn(1000);

The above code uses the $ symbol to select the element with id element and adds a fade-in effect to it with a duration of 1 second.

In general, the $ symbol in jQuery is a very flexible and powerful tool that can be used to achieve various functions and effects. By learning and mastering its usage, front-end development can become more efficient and convenient. I hope the above introduction can help everyone better understand the role and usage of the $ symbol in jQuery.

The above is the detailed content of Learn how to use the $ symbol in jQuery. For more information, please follow other related articles on the PHP Chinese website!