jQuery总结（五）、on、bind、one、hover、focus、blur、change函数的用法

最新推荐文章于 2022-09-28 17:12:58 发布

菜到不会下载软件

最新推荐文章于 2022-09-28 17:12:58 发布

阅读量1.4k

点赞数

分类专栏：基础文章标签： jquery

本文链接：https://blog.csdn.net/m0_57446284/article/details/120555946

版权

基础专栏收录该内容

28 篇文章 3 订阅

订阅专栏

一、on（event，[selector],[data],fn）

在选择器上绑定一个或者多个事件

events：一个或多个用空格分隔的事件类型名称

fn：事件触发时执行的函数，false值可作为函数的简写，返回false

selector：选择器字符串用于过滤器的触发事件的选择器元素的后代

data：当一个事件被触发时要传递给事件处理函数event.data的数据 event是自定义在处理函数的数据访问名称，用此名称.data（引用关键字）对参数data目标数据进行引用；通常data可以是Map名称值对的形式

示例：

    <div id="fir">点我</div>
    <script>
        var sum = 0
        $('#fir').on('click', {
            'n': 45,
            'm': 34
        }, function(a) {
            sum = a.data.n + a.data.m
            alert("总价为" + sum)
        })
    </script>

结果：当点击“点我”之后，浏览器会弹出总价为：79

二、bind（type，data，fn| false）函数

为匹配的元素提供事件绑定事件处理函数

type：一个或多个由空格分隔多个事件字符串

data：作为event.data属性值传递给事件对象的额外数据对象

fn：事件发生时调用执行的js函数

false：将第三个参数设置为false会使默认的动作失效，多用于表单提交

示例：

    <p class="c_1">点我</p>
    <script>
        $('p').bind('click', function() {
                    alert($(this).text())
    </script>

使用bind绑定应用：

    <button class="b_1">按钮三</button>
    <script>
        $(function() {
            $('.b_1').bind('click', function() {
                $(this).text("点击鼠标")
                $(this).css('background-color', 'red')
            }).bind('mouseout', function() {
                $(this).text("移出鼠标")
                $(this).css('background-color', 'pink')
            }).bind('mouseover', function() {
                $(this).text("在鼠标上")
                $(this).css('background-color', 'green')
            });
        })
    </script>

当不想要此效果的时候，我们可以直接解除绑定：

使用unbind（）函数即可：

使用方法： $('元素').unbind('click',fn(){}) //这样的写法默认所有的元素都移除

三、one（type，[data]，fn）函数

为每一个匹配元素的特定事件绑定一个一次性的事件处理函数（某个事件只执行一次可以使用这个函数）

实例：

要求：为按钮1注册一个一次性鼠标单击事件，改变按钮的文本

   <p class="c_1">
        <button>按钮一</button>
        <button>按钮二</button>
        <button class="b_1">按钮三</button>
    </p>
    <script>
        $(function() {
            $('.c_1 button:first').one('click', function() {
                $(this).text("改变了按钮一的值")
            })
        })
    </script>

结果：当点击按钮一之后，按钮一的值会变为“改变了按钮一的值”

四、hover（[overFn],outFn）函数

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象的方法）

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素，会触发指定的第二个函数

overFn：鼠标移到元素上要触发的函数

outFn：鼠标移出元素要触发的函数

示例：

实现一个hover的用法

    <h2>国旗</h2>
    <div>
        <img src="" alt="" style="width: 200px;height: 150px;">
    </div>
    <script>
        var china = "../img/中国.jpg"
        var America = "../img/美国.jpg"
        $(function() {
            $("h2").hover(function() {
                this.innerText = "这是中国国旗"
                $('div img').attr('src', china)
            }, function() {
                this.innerText = "这是美国国旗"
                $('div img').attr('src', America)
            })
        })
    </script>

五、focus（[[data],fn]）;blur([[data],fn])函数

focus控件获取焦点事件绑定函数

blur控件失去焦点事件绑定函数

参数：[data],fn

data:传递到函数的数据

fn：执行函数

实例：当用户名输入不合格时，分别提醒：用户名为空时：用户必须填写；用户字符长度小于3或者大于16时：用户名长度必须位于3-16位字符之间；输入正确：用户名输入正确

    <form action="http://www.baidu.com">
        用户名：<input type="text" name="username" value="请输入用户名" id="username"> &nbsp;
        <label for="" id="usertip"></label><br>
        <input type="submit" value="提交">
    </form>
    <script>
        $(function() {
            $('#username').focus(function() {
                this.value = ""
            }).blur(function() {
                if ($.trim(this.value) == "") {
                    $('#usertip').text("用户名必须填写")
                    $('#usertip').css('color', 'red')
                } else if ($.trim($(this).val()).length < 3 || $.trim(this.value).length > 16) {
                    $('#usertip').text("用户名长度必须位于3-16位字符之间")
                    $('#usertip').css('color', 'red')
                } else {
                    $('#usertip').text("用户名输入正确")
                    $('#usertip').css('color', 'green ')
                }
            })
        })
    </script>

思考：在上述的实例中，当我们点击提交，无论我们用户输入的是正确的，还是错误的，表单都会提交，想到在使用on函数的时候，可以验证绑定输入正确与否，只有当正确后才能提交，所以将两个结合起来，得到下面的实例：

    <form action="http://www.baidu.com">
        用户名：<input type="text" name="username" value="请输入用户名" id="username"> &nbsp;
        <label for="" id="usertip"></label><br>
        <input type="submit" value="提交">
    </form>
    <script>
        $(function() {
            $('#username').focus(function() {
                this.value = ""
            }).blur(function() {
                if ($.trim(this.value) == "") {
                    $('#usertip').text("用户名必须填写")
                    $('#usertip').css('color', 'red')
                } else if ($.trim($(this).val()).length < 3 || $.trim(this.value).length > 16) {
                    $('#usertip').text("用户名长度必须位于3-16位字符之间")
                    $('#usertip').css('color', 'red')
                } else {
                    $('#usertip').text("用户名输入正确")
                    $('#usertip').css('color', 'green ')
                }
            })
        })
        $(function() {
            $('form').on('submit', function() {
                if ($('#usertip').text() !== "用户名输入正确") {
                    return false
                } else
                    return true
            })
        })
    </script>

运行结果：只有当我们输入正确的用户名，点击提交之后才能够提交

六、change（[[data],fn]）

触发每个匹配元素的change事件

此函数会调用执行绑定到 change事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为，change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发

[data],fn

data：change（[data],fn）可传入data供函数fn处理

fn：在每一个匹配元素的change事件中绑定的处理函数

关于change函数的一个应用，在学习js的时候我们做过了省级市等的级联，现在我们使用jQuery来实现这个效果：

    书籍分类：
    <select name="" id="selBookType">
        <option value="">--请选择数据种类--</option>
    </select><br><br> 书籍列表：
    <select name="" id="selBookList">
        <option value="">--请选择书籍--</option>
    </select><br>
    <label for="">用户名称:</label><input type="text" name="" id="username">
    <script>
        var bookData = [{
            "bookType": "java",
            "desc": "java技术",
            "bookList": [{
                "id": "hjks",
                "title": "核心基础"
            }, {
                "id": "hksj",
                "title": "java高级"
            }, {
                "id": "gaoji",
                "title": "框架应用"
            }, {
                "id": "obm",
                "title": "ORM映射"
            }]
        }, {
            "bookType": "dataBase",
            "desc": "数据库技术",
            "bookList": [{
                "id": "mysql",
                "title": "mysql应用"
            }, {
                "id": "db2",
                "title": "db2应用"
            }, {
                "id": "oracle",
                "title": "oracle应用"
            }, {
                "id": "sqlserver",
                "title": "sqlserver基础"
            }]
        }, {
            "bookType": "python",
            "desc": "python技术",
            "bookList": [{
                "id": "sample",
                "title": "python入门"
            }, {
                "id": "hiegh",
                "title": "python高级"
            }, {
                "id": "heigher",
                "title": "python初级"
            }, {
                "id": "highest",
                "title": "python高级工程师"
            }]
        }]
        $(function() {
            //填充书籍类型列表框
            $(bookData).each(function() {
                var bookArr = $("<option></option>")
                bookArr.val(this.bookType)
                bookArr.text(this.desc)
                    //$('#selBookType').append(bookArr)这种添加方式也是可以的
                bookArr.appendTo($('#selBookType'))
            })

            //为书籍列表注册change事件
            $('#selBookType').change(function() {
                var selectedVal = $('#selBookType').val() //获取列表选项的value值
                $('#selBookList')[0].options.length = 1 //清空列表项，只保留一个
                $(bookData).each(function() {
                    if (this.bookType === selectedVal) {
                        var bookArr = this.bookList //获取当前类别下所有书籍
                        $(bookArr).each(function() { //遍历书籍填充列表框
                            var option = $("<option></option>")
                            option.val(this.id)
                            option.text(this.title)
                            $('#selBookList').append(option) //添加列表项
                        })
                        return false
                    }
                })
            })
        })
    </script>

七、click、dblclick函数

click：绑定元素的鼠标单击动作

dblclick：绑定元素的鼠标双击动作

参数：

[data]、fn

data：click可传入data供函数fn处理

fn：在每一个匹配元素的click事件中绑定的处理函数

click函数运用过于熟练，所以在这里不做任何的示范，在这里主要做的dblclick的示范：

切记是dblclick,不是dblcilck，写错了三次：

    <img src="" id="imgsId" alt="加载失败" style="width:450px;height:350px" title="双击显示下一张">
    <script>
        var imgUrl = ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg", "../img/4.jpg"]
        $(function() {
            $("#imgsId").attr('src', imgUrl[0])
            $('#imgsId').dblclick(function() {
                var num = $('#imgsId').attr('src')
                $(imgUrl).each(function(i) {
                    if (imgUrl[i] === num) {
                        if (i === imgUrl.length - 1) {
                            $("#imgsId").attr('src', imgUrl[0])
                        }
                        $("#imgsId").attr('src', imgUrl[i + 1])
                        return false
                    }
                })
            })
        })

八、键盘事件

keydown：按下键盘上某个键时的触发事件函数

keypress：按下键盘上某个键时的触发事件函数

keyup：按下某个键并在释放此键后触发事件函数（支持所有键，包括组合键，小键盘数字无法显示在输出源）

keydown和keypress的区别：

keydown：他支持所有的键，包括组合键，小键盘数字无法显示在输出源

keypress：不支持功能键，支持shift组合键，不能获取所有键keyCode

参数：

[[data],fn]

data：传入data供函数fn处理

fn：在每一个匹配元素的keyup事件中绑定的处理函数

理解即可，实际运用中可能不多

在这里只做一个使用keyup的运用：

    用户名:<input type="password" id="userp">
    <label for="" id="tips"></label>
    <script>
        //按键结束，验证用户的密码长度在3-16位之间
        $(function() {
            $('#userp').keyup(function() {
                if ($('#userp').val().trim().length < 3 || $('#userp').val().trim().length > 16)
                    $('#tips').text("用户密码不合格，密码长度必须在3-16位字符之间")
                else
                    $('#tips').text("用户密码合格")
            })
        })
    </script>

当输入的字符在1-3的时候，其结果截图如下：

当输入在3-16位时，结果截图：

当输入大于16时，其结果截图如下：

九、select函数

select用来为元素绑定被选择事件的函数，通常在选中后鼠标释放激发此事件，此函数通常只适用于可编辑的文本组件，如文本框，文本区，密码框等

参数：

[data],fn

data：传入data数据供函数fn处理

fn：在每一个匹配元素的select事件中绑定的处理函数

一个有意思的复制粘贴：

    诗词信息：<br>
    <textarea name="" id="" cols="30" rows="8">
        人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变。
    </textarea>
    <script>
        $(function() {
            $('textarea').select(function() {
                //获取已经选择的内容
                var selected = window.getSelection().toString()
                    //使用命令方式复制到剪切板
                document.execCommand("Copy")
            })
        })
    </script>

当我们使用鼠标选中文本信息之后，他就会自动复制

菜到不会下载软件

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery总结（五）、on、bind、one、hover、focus、blur、change函数的用法

一、on（event，[selector],[data],fn）在选择器上绑定一个或者多个事件events：一个或多个用空格分隔的事件类型名称fn：事件触发时执行的函数，false值可作为函数的简写，返回falseselector：选择器字符串用于过滤器的触发事件的选择器元素的后代data：当一个事件被触发时要传递给事件处理函数event.data的数据 event是自定义在处理函数的数据访问名称，用此名称.data（引用关键字）对参数data目标数据进行引用；通常data可以是M..
复制链接

扫一扫

专栏目录