Jquery学习(四)—Jquery 常用事件方法实例效果

 Jquery学习(四)—Jquery 常用事件方法实例效果

<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
    $(function() {
        //当输入域获取焦点 (focus) 时改变其颜色
        $("#input1").focus(function() {
            $("#input1").css("background-color", "#FFFFCC");
        });
        //当输入域失去焦点 (blur) 时改变其颜色
        $("#input1").blur(function() {
            $("#input1").css("background-color", "#D6D6FF");
        });
        
        //当输入域发生变化 、被操作时改变其颜色
        $(".field").change(function(){
            $(this).css("background-color","#FFFFCC");
          });
        //当双击按钮时,隐藏或显示元素:dblclick
        $("#button1").dblclick(function(){
            $("#p1").slideToggle(1000,function(){
                alert("双击按钮 隐藏 或显示结束了");
            });
        });
        //当按下按键时,改变文本域的颜色keydown()  keyup()
        $("#input2").keydown(function(){
            $("#input2").css("background-color","#FFFFCC");
        });
        //当键盘弹起
        $("#input2").keyup(function(){
            $("#input2").css("background-color","#D6D6FF");
        });
        //当按下鼠标按钮时,隐藏或显示元素
        $("#button2").mousedown(function(){
            $("#p2").slideToggle(1000,function(){
                alert("鼠标事件执行结束了...")
            });
        });
        //当鼠标指针进入(穿过)元素时,改变元素的背景色
        $("#p3").mouseenter(function(){
            $("#p3").css("background-color","yellow");
        });
        //鼠标离开时
        $("#p3").mouseleave(function(){
            $("#p3").css("background-color","#E9E9E4");
          });
        //获得鼠标指针在页面中的位置
        $(document).mousemove(function(e){
            $("#span1").text(e.pageX + ", " + e.pageY);
          });

    });
</script>

 

</head>
<body>
    <h2>jQuery 事件</h2>
    <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
    INPUT NAME:
    <input type="text" id="input1"/>
    <p>在某个域被使用或改变时,它会改变颜色</p>
    INPUT NAME:
    <input type="text" class="field"/>
    <p>Car:
    <select class="field" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
</p>
    <p id="p1">This is a paragraph.</p>
    <button id="button1">Double-click to Toggle</button><br>
    <p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p>
    INPUT NAME:
    <input type="text" id="input2"/><p></p>
    
    <p id="p2">This is a paragraph.</p>
    <button id="button2">mousedown to Toggle</button><br>
    
    <p style="background-color:#E9E9E4" id="p3">请把鼠标指针移动到这个段落上。</p>
    
    <p>鼠标位于坐标: <span id="span1"></span>.</p>
   

 

你可能感兴趣的:(jquery)