怎么新建MySQL数据库

    这篇文章我们来了解jQuery获得与失去焦点事件的方法，在网站中如果存在一些让用户填写内容的表单元素，那么我们能通过焦点事件和失去焦点事件，来给用户作出一些提示的内容。那么jQuery是如何实现获得与失去焦点事件的呢？接下来就跟随小编来一起学习一下吧！

    本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery focus()获得焦点事件

    focus()方法：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

    语法：

$(selector).focus()

    复制

    例：input 输入框获得焦点时改变其边框的颜色

    示例代码：

<input type="text" name="" id="mochu">
<script>
    $('#mochu').focus(function(){
        $(this).css('border-color','red');
    });
</script>

    复制

    当鼠标移入input中并点击时，input元素会变成如下的形式

    jq focus()事件，会为input加入一个CSS样式

<input type="text" name="" id="mochu" style="border-color: red;">

    复制

    jquery blur()失去焦点事件

    blur()方法：当元素失去焦点时发生 blur 事件

    语法：

$(selector).blur()

    复制

    例：input失去焦点后，弹出输入框中的内容

    示例代码：

<input type="text" name="" id="mochu">
<script>
    $('#mochu').blur(function(){ 
    alert($(this).val());    
    });
 </script>

    复制

    运行结果如图：

    利用jq blur()失去焦点事件来验证用户输入的内容

    JQuery中的blur()失去焦点事件，我们可以用来检查用户在input输入框中输入的内容是否合法，比如以下代码，如果用户输入的内容少于五个字符就给出提示

    示例代码：

<input type="text" name="" id="mochu">
<script>
    $('#mochu').blur(function(){
        if($(this).val().length < 5){
            alert('字数太少了，多输入几个吧');
        }
    });
</script>

    以上就是jQuery获得与失去焦点事件的方法介绍，上述示例具有一定的参考价值，有需要的朋友可以了解看看，希望对大家学习jQuery的使用有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自PHP中文网