软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> 10分钟 -> 正文阅读

[Web前端]10分钟


1.使用bind()方法绑定元素的事件


bind()方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以,它的绑定格式如下:
$(selector).bind(event,[data] function)

参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
例:使用bind()方法绑定单击(click)和鼠标移出(mouseout)这两个事件,触发这两个事件中,按钮将变为不可用:
<h3>bind()方法绑多个事件</h3>
        <input id="btntest" type="button" value="点击或移出就不可用了" />

        <script type="text/javascript">
            $(function () {//此句代码见下面第2点
                $("#btntest").bind("click mouseout",function () {
                    $(this).attr("disabled", "true");
                });
            });
        </script>

[img]http://img.blog.csdn.net/20160402163454471

2.页面加载时触发ready()事件


ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。此外,下列写法是相等的:
$(document).ready(function(){})等价于$(function(){});

例:在ready()事件中,绑定一个按钮的单击事件:
<h3>页面载入时触发ready()事件</h3>
        <div id="tip"></div>
        <input id="btntest" type="button" value="点下我" />

        <script type="text/javascript">
            $(document).ready(function(){
                $("#btntest").bind("click", function () {
                    $("#tip").html("我被点击了!");
                });
            });
        </script>

点击按钮后:[img]http://img.blog.csdn.net/20160402163053438

3.使用hover()方法切换事件


hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切换效果,调用格式如下:
$(selector).hover(over,out);

over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
例:调用hover方法实现元素背景色的切换:
div
{
    width: 160px;
    border: solid 1px #ccc;
    padding:8px;
    text-align:center;
}
.orange
{
    background-color: Orange;
    color:White;
}
 <h3>hover()方法切换事件</h3>
        <div>别走!你就是土豪</div>

        <script type="text/javascript">
            $(function () {
                $("div").hover(
                function () {
                    $(this).addClass("orange");
                },
                function () {
                    $(this).removeClass("orange")
                });
            });
        </script>

[img]http://img.blog.csdn.net/20160402163841582[img]http://img.blog.csdn.net/20160402163851551

4.使用toggle()方法绑定多个函数


toggle()方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式如下:
$(selector).toggle(fun1(),fun2(),funN(),...)

其中,fun1,fun2就是多个函数的名称


例:使用toggle()方法控制元素的显示与隐藏属性:
<h3>toggle()方法绑定多个函数</h3>
        <input id="btntest" type="button" value="点一下我" />
        <div>我是动态显示的</div>

        <script type="text/javascript">
            $(function () {
                $("#btntest").bind("click", function () {
                    $("div").show();
                })
                   $("div").toggle(
                       function(){
                           $(this).hide();
                       },
                       function(){
                           $(this).show();
                       }
                       )
            });
        </script>

[img]http://img.blog.csdn.net/20160402164531241

6.使用unbind()方法移除元素绑定的事件


unbind()方法可以移除元素已绑定的事件,它的调用格式如下:
$(selector).unbind(event,fun)

其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。
例:使用unbind()方法移除已绑定的全部事件:
div
{
    width: 160px;
    border: solid 1px #ccc;
    padding: 8px;
    text-align: center;
}
.color
{
    color: Orange;
}
.backcolor
{
    background-color: Orange;
    color: White;
}
 <h3>unbind()移除绑定的事件</h3>
        <input id="btntest" type="button" value="移除事件" />
        <div>土豪,咱们交个朋友吧</div>

        <script type="text/javascript">
            $(function () {
                $("div").bind("click",
                function () {
                    $(this).removeClass("backcolor").addClass("color");
                }).bind("dblclick", function () {
                    $(this).removeClass("color").addClass("backcolor");
                })
                $("#btntest").bind("click", function () {
                    $("div").unbind("click");
                    $(this).attr("disabled", "true");
                });
            });
        </script>

点击按钮前:单击:[img]http://img.blog.csdn.net/20160402165421916 双击:[img]http://img.blog.csdn.net/20160402165430338
点击按钮后无效:[img]http://img.blog.csdn.net/20160402165448119

7.使用one()方法绑定元素的一次性事件


one()方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次,它的调用格式如下:
$(selector).one(event,[data],fun)

参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
例:使用one()方法绑定<div>元素的单击事件,在事件中,获取点击数值,来改变显示内容的字体大小:
<div>请点击我一下</div>

        <script type="text/javascript">
            $(function () {
                var intI = 0;
                $("div").one("click", function () {
                    intI++;
                    $(this).css("font-size", intI + "px");
                })
            });
        </script>

点击前:[img]http://img.blog.csdn.net/20160402165828824点击多次后:[img]http://img.blog.csdn.net/20160402165842090并不会再变化。

8.调用trigger()方法手动触发指定的事件


trigger()方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件,总之,该事件必须能执行,它的调用格式为:
$(selector).trigger(event)

其中event参数为需要手动触发的事件名称。
例:调用trigger()方法手动触发一个绑定在<div>元素中的自定义事件:
.color
{
    color: Orange;
}
<div>土豪,咱们交个朋友吧</div>

        <script type="text/javascript">
            $(function () {
                $("div").bind("change-color", function () {
                    $(this).addClass("color");
                });//自定义事件
                $("div").trigger("change-color");
            });
        </script>

当页面加载完成后,div字体的颜色就变了。
[img]http://img.blog.csdn.net/20160402170351435

9.文本框的focus和blur事件


focus事件在元素获取焦点时触发,如点击文本框时,触发该事件;而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件。
例:绑定文本框的blur事件,并在该事件中检测文本框的内容是否为空,如果为空,则在<div>元素中提示相应信息:
<h3>表单中文本框的focus和blur事件</h3>
        <input id="txtest" type="text" value="" />
        <div></div>

        <script type="text/javascript">
            $(function () {
                $("input")
                .bind("focus", function () {
                    $("div").html("请输入您的姓名!");
                })
                $("input").bind("blur", function () {
                    if ($(this).val().length == 0)
                        $("div").html("你的名称不能为空!");
                })
            });
        </script>

聚焦时:[img]http://img.blog.csdn.net/20160402170748468为空时:[img]http://img.blog.csdn.net/20160402170802562

9.下拉列表框的change事件


当一个元素的值发生变化时,将会触发change事件,例如在选择下拉列表框中的选项时,就会触change事件。
例:使用bind()方法change事件,在该事件中,根据所选择项的不同,改变下拉列表框的背景色:
<h3>下拉列表的change事件</h3>
        <select id="seltest">
            <option value="葡萄">葡萄</option>
            <option value="苹果">苹果</option>
            <option value="荔枝">荔枝</option>
            <option value="香焦">香焦</option>
        </select>

        <script type="text/javascript">
            $(function () {
                $("#seltest").bind("change", function () {
                    if ($(this).val() == "苹果")
                        $(this).css("background-color", "red");
                    else
                        $(this).css("background-color", "green");
                })
            });
        </script>

[img]http://img.blog.csdn.net/20160402171139829[img]http://img.blog.csdn.net/20160402171147079

10.调用live()方法绑定元素的事件


与bind()方法相同,live()方法与可以绑定元素的可执行事件,除此相同功能之外,live()方法还可以绑定动态元素,即使用代码添加的元素事件,格式如下:
$(selector).live(event,[data],fun)

参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
例:使用live()方法绑定按钮元素的click和mouseout两个事件,在这两个事件中,按钮将设置为不可用状态:
 <h3>live()方法绑多个事件</h3>

        <script type="text/javascript">
            $(function () {
                $("#btntest").live("click mouseout", function () {
                    $(this).attr("disabled", "true");
                })
                $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
            });
        </script>

[img]http://img.blog.csdn.net/20160402171726909
注意:从 jQuery 1.7 开始,不再建议使用 .live() 方法。1.9不支持.live(),本次代码里的js引用版本改为了1.8。
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-02 20:54:21  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-25 20:38:17
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --