📅 最后修改于: 2023-12-03 15:02:14.329000 🧑 作者: Mango
在 jQuery 中，模糊（.blur()）方法被用于移除 focus 事件的焦点。但有时需要模糊一个元素以模拟模糊效果或处理模糊效果相关操作。
以下示例展示了如何使用 jQuery 的 blur() 方法：
<!DOCTYPE html>
<html>
<head>
<title>jQuery | 模糊()与示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>点击按钮移除 focus 焦点：</h1>
<input type="text" />
<button onclick="removeFocus()">移除焦点</button>
<script>
function removeFocus() {
$('input').blur();
}
</script>
</body>
</html>
在这个示例中，当用户点击按钮时，输入框将失去焦点。
如果想要在页面上实现模糊效果，可以使用 CSS3 的 filter:blur() 函数，结合 jQuery 的 css() 方法便可轻松完成。
<!DOCTYPE html>
<html>
<head>
<title>jQuery | 模拟模糊效果与示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.blured {
filter: blur(5px);
}
</style>
</head>
<body>
<h1>模糊效果示例：</h1>
<button onclick="addBlur()">模糊</button>
<button onclick="removeBlur()">取消模糊</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet eros</p>
<script>
function addBlur() {
$('p').addClass('blured');
}
function removeBlur() {
$('p').removeClass('blured');
}
</script>
</body>
</html>
在这个示例中，当用户点击“模糊”按钮时，blur() 方法被用于移除焦点，同时 CSS 的 filter:blur() 被用于实现模糊效果。当用户点击“取消模糊”按钮时，removeClass() 方法被用于移除模糊效果。
本文介绍了 jQuery 中模糊（.blur()）方法的用法和示例，包括利用 blur() 方法实现失去焦点，以及结合 CSS3 的 filter:blur() 函数实现模糊效果。