`
sungang_1120
  • 浏览: 322700 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

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 学习与实例Jquery 学习与实例

    Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...

    50 个jQuery 实例(包含各种常用网页效果)

    50 个jQuery 实例,包含各种常用网页效果:选项卡切换,手风琴效果,相片画廊,验证规则,表格等。

    先锋jQuery学习实例

    **jQuery学习实例详解** jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能,使得网页开发变得更加高效和简单。本实例集合是专为初学者设计的,旨在帮助理解并掌握jQuery的核心概念和常见用法。 1. **...

    jQuery实现的动态伸缩导航菜单实例

    通过这个实例,我们能够了解jQuery如何实现动态效果,并且掌握如何使用鼠标事件和动画方法来丰富我们的Web应用交互体验。对于学习和使用jQuery的开发者来说,这是一个实用且简洁的例子,可以作为进一步探索jQuery...

    JqueryApi Jquery实例 Jquery归纳 Jquery学习方法

    这个资源 可以使你全面的掌握 JQuery,里面有我告诉你如何学习Jquery如何使用Jquery,里面还有Jquery的例子,还有Jquery的拓展UI,很好很强大的!!!这绝对是我精心压缩的一个资源,如果没学会,可以给我留言,然后...

    jquery学习ppt和实例

    ### 七、jQuery实例 实例是学习jQuery的最佳方式。通过实际操作,你可以更好地理解和应用jQuery的各种功能。在这个压缩包中,你将找到各种jQuery的实例代码,涵盖了上述的所有知识点,包括选择器的使用、DOM操作的...

    jquery零碎实例和学习心得

    `js-0127-jQuery流行广告效果.rar` 可能包含了一些使用jQuery实现的动态广告效果实例,这对于学习如何利用jQuery创建吸引人的网页元素很有帮助。 `jquery手册.rar` 又一份jQuery的手册,可能包含不同的讲解角度或...

    jquery经典实例60例-动画实例

    《jQuery经典实例60例-动画实例》是学习jQuery库中动画效果的宝贵资源,它涵盖了从基础到高级的各种动画技巧。jQuery库以其简洁、强大的API而闻名,尤其是在处理页面元素的动态展示和动画效果方面。以下将详细介绍...

    jquery实例演示及动态效果

    总结来说,"jQuery实例演示及动态效果"是一份全面的jQuery学习资源,涵盖了基础操作到高级应用,适合初学者和有一定经验的开发者进行实践和提升。通过这些实例,学习者能够深入理解jQuery的强大功能,提升网页动态...

    jQuery学习手册及实例练习

    《jQuery学习手册及实例练习》是一份全面介绍jQuery库的学习资源,旨在帮助开发者深入理解和熟练运用这个强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务,使得前端开发变得更加...

    35个经典Jquery实例方法

    本资源"35个经典Jquery实例方法"为我们提供了一个实用的工具集,包含了开发者在日常工作中可能会用到的jQuery核心功能。下面,我们将详细探讨这些实例方法,帮助你更好地理解和运用jQuery。 1. **选择器(Selectors...

    jQuery学习实例和心得

    总结来说,jQuery的学习包括理解选择器、DOM操作、事件处理、动画制作和Ajax交互等核心概念。通过不断的实践和应用,初学者可以迅速提升技能,成为一名熟练的jQuery开发者。这份"jQuery学习实例和心得"资源将是你...

    JQuery应用实例学习(强烈推荐)

    JQuery应用实例学习(强烈推荐)---无私奉献了!!

    jQuery学习实例大全

    这份压缩包包含了丰富的jQuery实例代码,旨在帮助初学者快速掌握jQuery的核心功能和实用技巧,同时也可作为进阶开发者巩固和深化jQuery知识的工具。 jQuery是一个高效、简洁的JavaScript库,它极大地简化了HTML文档...

    jQuery各类炫酷效果demo

    jQuery的`mouseover`和`mouseout`事件以及DOM操作可以协助实现这一效果。 5. **透明字母**:这是一种视觉效果,使得文本的每个字母具有透明度变化。这可以通过jQuery的动画函数`fadeIn`和`fadeOut`或者CSS3的`...

    jQuery特效和实例集合

    五、jQuery实例 50个JS实例则涵盖了从简单到复杂的应用场景,如表单验证、图片轮播、下拉菜单、时间日期插件、拖放功能、Ajax请求等。这些实例可以帮助学习者将理论知识转化为实际技能,理解如何将jQuery应用于实际...

    jquery基础学习插件实例大全

    在jQuery的学习过程中,首先需要理解jQuery的核心概念,包括选择器(Selector)、DOM操作、事件处理和动画效果。选择器是jQuery的灵魂,它使得选取DOM元素变得极其简单,例如`$("#id")`选取ID为"id"的元素,`$("....

    锋利的jQuery实例

    《锋利的jQuery实例》是人民邮电出版社出版的一本深入浅出的jQuery教程,它以其丰富的实践案例,详尽地介绍了jQuery库的使用方法和技巧。jQuery是一个广泛应用于Web开发的JavaScript库,其核心特性在于它的轻量级...

    jquery 实例教程,包含各种实例

    **jQuery 实例教程** ...通过这个jQuery实例教程,你将能够熟练地运用jQuery进行网页开发,无论是简单的交互还是复杂的动态效果,都能轻松应对。实践是检验理解的最好方式,所以不妨现在就动手尝试一下吧!

    jQuery实例大全

    资源中包含的"jquery实例下载.rar"文件提供了更多的jQuery实践案例,涵盖了各种常见的网页交互功能,如下拉菜单、滑动效果、表单验证等,这些都是现代网页开发不可或缺的部分。 "实例"文件夹可能包含了更多的实战...

Global site tag (gtag.js) - Google Analytics