Learn more about some common methods in jQuery

As Web front-end developers, we often use the jQuery library, which is one of the most widely used JavaScript libraries in the industry. It can bring us benefits such as simplifying coding and improving development efficiency. Among them, the methods provided in jQuery can help developers quickly process DOM elements in the page, perform animations, perform event binding and other operations. In this article, we will take an in-depth look at some common methods in jQuery and their usage.

Introduction of jQuery method

Just like we introduce other libraries, before using jQuery, we need to introduce it into our project. The most common method is to download jQuery from the official website (http://jquery.com/) and then introduce it into the project:

<script src="jquery.js"></script>

If you are using a CDN service, you can introduce it directly:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

After introduction, we can use the methods provided by jQuery.

Basic Selector

The selector is a very powerful function of jQuery, which can quickly locate elements in the document. The following are some basic selectors:

• Tag selector: Use the tag name as the selector:

$('p') // 选取所有<p>元素

• Class selector: Use the class name as the selector Selector:

$('.my-class') // 选取所有class="my-class"的元素

• ID selector: Use ID as selector:

$('#my-id') // 选取所有id="my-id"的元素

• Attribute selector: Select elements based on their attributes:

$('input[type="checkbox"]') // 选取所有type="checkbox"的<input>元素

• Descendant selector: Select all descendant elements within an element:

$('div p') // 选取所有<div>元素中的所有<p>元素

In addition, there are many more complex selectors, you can Refer to jQuery's official documentation for more details.

Basic DOM operations

In addition to selectors, jQuery also provides some convenient DOM operation methods. The following are some basic DOM operation methods:

• Get element attribute value: Get element attribute value through .attr() method.

$('a').attr('href') // 获取所有<a>元素的href属性值

• Set element attribute value: Set element attribute value through .attr() method.

$('a').attr('href', 'http://www.example.com/') // 设置所有<a>元素的href为http://www.example.com/

• Get the text value of the element: Get the text content in the element through the .text() method.

$('p').text() // 获取第一个<p>元素的文本 content

• Set element text value: Set the text content in the element through the .text() method.

$('p').text('Hello World!') // 设置第一个<p>元素的文本为Hello World!

• Get the HTML content of the element: Get the HTML content of the element through the .html() method.

$('div').html() // 获取第一个<div>元素的HTML内容

• Set the HTML content of the element: Set the HTML content of the element through the .html() method.

$('div').html('<p>Hello World!</p>') // 设置第一个<div>元素的HTML内容为<p>Hello World!</p>

• Add elements: Add new elements at the end of the element through the .append() method.

$('ul').append('<li>New Item 1</li><li>New Item 2</li>') // 在第一个<ul>元素末尾添加两个新的<li>元素

• Remove elements: Remove elements through the .remove() method.

$('p').remove() // 移除所有<p>元素

Event Binding

jQuery provides developers with more convenient event methods than native JavaScript, so we don’t have to worry about browser compatibility and other issues. The following are some basic event binding methods:

• Click event: Bind the click event of the element through the .click() method.

$('button').click(function() {
  console.log('Button clicked!');
});

• Double-click event: Bind the double-click event of the element through the .dblclick() method.

$('div').dblclick(function() {
  console.log('Div double clicked!');
});

• Mouse-in event: Bind the mouse-in event through the .mouseenter() method.

$('div').mouseenter(function() {
  console.log('Mouse entered div!');
});

• Mouse out event: Bind the mouse out event through the .mouseleave() method.

$('div').mouseleave(function() {
  console.log('Mouse left div!');
});

• Input event: Bind the input event of the element through the .keyup() method.

$('input').keyup(function() {
  console.log('Input value changed!');
});

• Submit event: Bind the form's submission event through the .submit() method.

$('form').submit(function() {
  console.log('Form submitted!');
});

Of course, in addition to the events listed above, jQuery also provides many other event methods that developers can use for different needs.

Animation Effect

The last step is the operation of animation effect. Animation effect is an indispensable part of the web development process. It can make the page more interactive and visually attractive.

• Show and hide: Use the .show() and .hide() methods to display and hide elements.

$('div').hide(); // 隐藏第一个<div>元素
$('div').show(); // 显示第一个<div>元素

• Sliding effect: Use the .slideDown() and .slideUp() methods to achieve the horizontal sliding effect of elements.

$('div').slideUp(); // 收起第一个<div>元素
$('div').slideDown(); // 打开第一个<div>元素

• Fade effect: Use the .fadeIn() and .fadeOut() methods to achieve the fade effect of elements.

$('div').fadeOut(); // 隐藏第一个<div>元素
$('div').fadeIn(); // 显示第一个<div>元素

• Animation effect: Use the .animate() method to achieve custom animation effects of elements.

$('div').animate({ // 隐藏第一个<div>元素
  marginLeft: '50px',
  opacity: 0
}, 1000);

Conclusion

This article introduces some common methods in jQuery, covering basic selectors, DOM operations, event binding and animation effects. Although jQuery provides many methods, we can choose the appropriate method according to our needs during use to better meet development needs.

The above is the detailed content of Learn more about some common methods in jQuery. For more information, please follow other related articles on the PHP Chinese website!