Common operation methods of jQuery objects

jQuery is a JavaScript library widely used in front-end development. It provides a wealth of operation methods to simplify tasks such as DOM operations, event processing, and animation effects. In this article, we will introduce some common jQuery object manipulation methods, and attach specific code examples for reference.

1. Create a jQuery object

In jQuery, you can create a jQuery object in several different ways:

1. Select elements through a selector:

// 选取所有 class 为 .myClass 的元素
var $elements = $('.myClass');

// 选取 id 为 #myId 的元素
var $element = $('#myId');

2. Directly pass in DOM elements to create jQuery objects:

var $element = $(document.getElementById('myElement'));

2. Common jQuery object operation methods

1. css () method: used to set or get the style attributes of the element.

// 设置元素背景色为红色
$element.css('background-color', 'red');

// 获取元素宽度
var width = $element.css('width');

2. addClass() and removeClass() methods: Class names used to add or remove elements.

// 添加一个新的类
$element.addClass('newClass');

// 移除一个类
$element.removeClass('oldClass');

3. attr() and prop() methods: used to set or get the attributes of the element.

// 设置元素的 src 属性
$element.attr('src', 'newImage.jpg');

// 获取元素的 value 属性
var value = $element.prop('value');

4. val() method: used to set or get the value of the form element.

// 设置 input 元素的值
$('input').val('new value');

// 获取 select 元素的值
var selectedValue = $('select').val();

5. on() and off() methods: used to bind or unbind event handling functions.

// 绑定点击事件处理函数
$element.on('click', function() {
  alert('Clicked!');
});

// 解绑点击事件处理函数
$element.off('click');

6. animate() method: used to achieve animation effects of elements.

// 实现元素移动到指定位置
$element.animate({left: '100px', top: '100px'}, 1000);

These are common object manipulation methods in jQuery, through which you can quickly and easily operate on page elements. I hope the above code examples can help readers better understand how to use jQuery.

The above is the detailed content of Common operation methods of jQuery objects. For more information, please follow other related articles on the PHP Chinese website!