Home > Web Front-end > JS Tutorial > body text

Common operation methods of jQuery objects

WBOY
Release: 2024-02-29 09:30:05
Original
456 people have browsed it

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');
Copy after login
  1. Directly pass in DOM elements to create jQuery objects:
var $element = $(document.getElementById('myElement'));
Copy after login

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');
Copy after login
  1. addClass() and removeClass() methods: Class names used to add or remove elements.
// 添加一个新的类
$element.addClass('newClass');

// 移除一个类
$element.removeClass('oldClass');
Copy after login
  1. 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');
Copy after login
  1. val() method: used to set or get the value of the form element.
// 设置 input 元素的值
$('input').val('new value');

// 获取 select 元素的值
var selectedValue = $('select').val();
Copy after login
  1. on() and off() methods: used to bind or unbind event handling functions.
// 绑定点击事件处理函数
$element.on('click', function() {
  alert('Clicked!');
});

// 解绑点击事件处理函数
$element.off('click');
Copy after login
  1. animate() method: used to achieve animation effects of elements.
// 实现元素移动到指定位置
$element.animate({left: '100px', top: '100px'}, 1000);
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template