JQuery常用函数与方法汇总

介绍

jQuery是一个非常流行的JavaScript框架，通过它可以简化JavaScript编程，提高编程效率。在jQuery框架中，有许多常用的函数与方法，掌握它们对于jQuery编程是非常重要的，本文将对一些常用的函数与方法进行详细介绍。

常用函数

$函数

$函数是jQuery的核心函数，通过$函数可以快速选择HTML元素。

常用选择器

• $('#id') 通过ID选取元素
• $('.class') 通过class选取元素
• $('标签名') 选取标签名为指定值的元素

示例： 选取id为test的元素，并将其背景色修改为红色。

$('#test').css('background-color', 'red');

css函数

css函数可以设置或获取HTML元素的单个或多个CSS属性的值。

语法

css(propertyName)
css(propertyName, value)
css(propertyNames)
css(map)

• propertyName CSS属性名
• value CSS属性值
• propertyNames 数组，包含CSS属性名
• map 对象，键为CSS属性名，值为CSS属性值

示例： 修改id为test的元素的背景色为红色

$('#test').css('background-color', 'red');

attr函数

attr函数可以获取或设置HTML属性的值。

语法

attr(attributeName)
attr(attributeName, value)

• attributeName 属性名
• value 属性值，可选

示例： 修改id为test的元素的src属性值

$('#test').attr('src', 'test.jpg');

常用方法

hide方法

hide方法可以隐藏选择的元素。

语法

hide();

示例：点击按钮隐藏id为test的元素

HTML代码：

<button id="hide">隐藏</button>
<div id="test">这是一个测试元素</div>

JavaScript代码：

$('#hide').click(function(){
    $('#test').hide();
});

slideUp方法

slideUp方法可以将选择的元素向上滑动收起。

语法

slideUp();

示例：点击按钮收起id为test的元素

HTML代码：

<button id="slideUp">收起</button>
<div id="test">这是一个测试元素</div>

JavaScript代码：

$('#slideUp').click(function(){
    $('#test').slideUp();
});

总结

本文介绍了jQuery框架中的常用函数与方法，包括$函数、css函数、attr函数、hide方法和slideUp方法。掌握这些函数与方法，可以提高jQuery编程的效率。