jQuery的is()方法在选择器中是非常实用的。其中is( focus)是其中一个关键的参数。下面我们来展示一些有趣的例子。
$(document).ready(function(){
$('input').focus(function(){
if($(this).is(':focus')){
$(this).css('background-color','#F5DEB3');
}
});
$('input').blur(function(){
$(this).css('background-color','');
});
});
以上代码中,当输入框获得了焦点,会根据is(:focus)的返回值来改变输入框的背景色。
$(document).ready(function(){
$('button').click(function(){
$('input').each(function(){
if($(this).is(':focus')){
$(this).val('focus');
}
});
});
});
以上代码中,当按钮被点击时,检查每一个输入框是否获得了焦点,并且根据is(:focus)的返回值,如果是,则会将输入框的值修改为'focus'。
is(:focus)还可以结合其他方法使用,比如说is(:focus + :disabled)可以检查获得焦点的元素是否被禁用。
$(document).ready(function(){
$('input').focus(function(){
if($(this).is(':focus + :disabled')){
alert('This is a disabled input field');
}
});
});
以上代码中,当输入框获得了焦点并且被禁用了,会弹出一个提示信息。
这些例子展示了is( focus)在jQuery选择器中的强大功能,可以实现一些有趣的交互效果,同时提高用户操作体验。