【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)是一篇关于jQuery实用代码片段的攻略，其中包括了一些可以直接使用的代码片段，可供开发者在开发过程中直接使用，提高开发效率。以下是对该攻略的详细讲解：

一、筛选与搜索

1.1 筛选指定元素

$("selector").filter(expression);

使用该代码片段可以筛选指定元素，其中selector为指定元素的选择器，expression为用于筛选元素的表达式。例如，我们要筛选class为"test"的div元素，可以使用以下代码：

$("div").filter(".test");

1.2 搜索匹配元素

$("selector").find(expression);

使用该代码片段可以搜索匹配元素，其中selector为指定元素的选择器，expression为用于匹配元素的表达式。例如，我们要搜索class为"child"的p元素，可以使用以下代码：

$("p").find(".child");

二、样式操作

2.1 修改元素样式

$("selector").css(propertyName, value);

使用该代码片段可以修改指定元素的样式，其中selector为指定元素的选择器，propertyName为要修改的样式属性名，value为要设置的属性值。例如，我们要修改class为"test"的div元素的背景颜色为红色，可以使用以下代码：

$("div.test").css("background-color", "red");

2.2 切换元素样式

$("selector").toggleClass(className);

使用该代码片段可以切换指定元素的样式，其中selector为指定元素的选择器，className为要切换的样式名。例如，我们要切换class为"test"的div元素的背景颜色，可以使用以下代码：

$("div.test").toggleClass("bg-color");

三、表单操作

3.1 清除表单默认值

$("selector").focus(function(){$(this).val("");});

使用该代码片段可以清除指定表单元素的默认值，其中selector为指定表单元素的选择器。例如，我们要清除id为"test"的输入框的默认值，可以使用以下代码：

$("#test").focus(function(){$(this).val("");});

3.2 实现多选下拉框

<select id="test" multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

使用该代码片段可以实现多选下拉框。在HTML中添加multiple属性即可。例如，我们要实现id为"test"的下拉框为多选，可以使用以下代码：