jquery text input 不能为空_jQuery事件

最新推荐文章于 2023-01-06 19:56:36 发布

篝火营地

最新推荐文章于 2023-01-06 19:56:36 发布

阅读量387

点赞数

文章标签： jquery text input 不能为空

本文链接：https://blog.csdn.net/weixin_33622555/article/details/113084577

版权

Ⅰ 绑定事件的两种方式

第一种

$('#d1').click(function () {
     alert('别说话 吻我')
});

第二种

(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
    alert('借我钱买草莓 后面还你')
})

Ⅱ 克隆事件

this // 指代的永远是当前被操作的对象
$(this).coloe().insertAfter($('body')) // 克隆文本及标签
$(this).coloe(true).insertAfter($('body')) // 克隆文本标签及事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆事件</title>
    <script src='jquery.min.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        #d1 {
            height: 50px;
            width: 150px;
            border: 1px solid #00ff88;
        }
    </style>
</head>
<body>
<button id="d1">屠龙宝刀,点击就送</button>
<script>
    $('#d1').on('click',function(){
        // console.log(this)
        $(this).clone(true).insertAfter($('body'))
    })
</script>
</body>
</html>

Ⅲ 自定义模态框

模态框内部本质就是给标签移除或者添加上hide属性

    <style>
        .cover {position:fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(128,128,128,0.5);z-index: 99;}
        .modal {position: fixed;height: 400px;width: 600px;background-color: white; /*top: 50%;*/ /*left: 50%;*/margin-left: 100px;margin-top: 100px;z-index: 100;}
        .hide {display: none;}
    </style>

<div>我是最下面的</div>
<button id="d1">给我出来</button>
<div class="cover hide"></div>
<div class="modal hide">
    <p>username: <input type="text"></p>
    <p>password: <input type="text"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>
<script>
    let $coverEle = $('.cover')
    let $modalEle = $('.modal')
    $('#d1').click(function () {
        // 将两个div标签的hide的属性移除
        $coverEle.removeClass('hide')
        $modalEle.removeClass('hide')
    })
    $('#d2').on('click',function () {
        $coverEle.addClass('hide')
        $modalEle.addClass('hide')
    })
</script>

Ⅳ 左侧菜单栏

    <style>
        .left {float: left;background-color: darkgray;width: 20%;height: 100%;position: fixed;}
        .title {font-size: 36px;color: white;text-align: center;}
        .items {font-size: 24px;background-color: blueviolet;}
        .hide {display: none;}
    </style>

<div class="left">
    <div class="title">菜单一
        <div class="items">鲨齿</div>
        <div class="items">墨眉</div>
        <div class="items">残虹</div>
    </div>
    <div class="title">菜单二
        <div class="items">阴阳</div>
        <div class="items">罗网</div>
        <div class="items">纵横</div>
    </div>
    <div class="title">菜单三
        <div class="items">鸩羽千夜</div>
        <div class="items">花开荼蘼</div>
        <div class="items">牡丹花下</div>
    </div>
</div>
<script>
    $('.title').click(function () {
        $('.items').addClass('hide')  // 不管三七二十一将所有标签加上hide
        $(this).children().removeClass('hide')  // 在将操作的标签的内部标签全部去掉hide
    })
</script>

Ⅴ 返回顶部

    <style>
        .hide {display: none;}
        #d1 {right: 50px;bottom: 50px;width: 50px;height: 50px;background-color: white;position: fixed;}
    </style>

<a href="" id="d1"></a>
<div style="height: 700px;background-color: brown"></div>
<div style="height: 600px;background-color: aqua"></div>
<div style="height: 500px;background-color: chartreuse"></div>
<a href="#d1" class="hide">回到顶部</a>
<script>
    $(window).scroll(function () {if($(window).scrollTop() > 300){
        $('#d1').removeClass('hide')
    }else{
        $('#d1').addClass('hide')
    }})
</script>

Ⅵ 自定义登录校验

在获取用户的用户名和密码的时候用户如果没有填写应该给用户展示提示信息

<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){          $userName.next().text("用户名不能为空")      }
        if (!passWord){            $passWord.next().text('密码不能为空')       }    })
    $('input').focus(function () {       $(this).next().text('')    })
</script>

Ⅶ input实时监控

<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)  
    })
</script>

Ⅷ 鼠标悬浮

    <style>
        #d1 {          font-size: 36px;      }
    </style>

<div id="d1">莱茵武器运载车</div>

<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开 alert(123)})
    $('#d1').hover(       function () {           alert('我来了')  // 悬浮    },
        function () {         alert('我溜了')  // 移开      }    )
</script>

Ⅸ 键盘按键按下事件

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){alert('你按了shift键')}
        if (event.keyCode === 65){alert('你按了a键')}
        if (event.keyCode === 66){alert('你按了b键')}
        if (event.keyCode === 67){alert('你按了c键')}
        if (event.keyCode === 68){alert('你按了d键')}
        if (event.keyCode === 69){alert('你按了e键')}
        if (event.keyCode === 70){alert('你按了f键')}})
</script>

篝火营地

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery text input 不能为空_jQuery事件

Ⅰ 绑定事件的两种方式第一种$('#d1').click(function () { alert('别说话吻我')});第二种(功能更加强大还支持事件委托)$('#d2').on('click',function () { alert('借我钱买草莓后面还你')})Ⅱ 克隆事件this // 指代的永远是当前被操作的对象$(this).coloe().i...
复制链接

扫一扫