首页 > 代码库 > javascript+jQuery补充

javascript+jQuery补充

2024-09-07 06:56:24   220人阅读

一、jQuery事件绑定

                <div class=‘c1‘>
                    <div>
                        <div class=‘title‘>菜单一</div>
                        <div class=‘content‘>内容 一</div>
                    </div>
                    <div>
                        <div class=‘title‘>菜单一</div>
                        <div class=‘content‘>内容 一</div>
                    </div>
                    <div>
                        <div class=‘title‘>菜单一</div>
                        <div class=‘content‘>内容 一</div>
                    </div>
                    <div>
                        <div class=‘title‘>菜单一</div>
                        <div class=‘content‘>内容 一</div>
                    </div>
                </div>
            jQuery事件绑定：
                1. 
                    $(‘.title‘).click(function(){
                        var v = $(this).text();
                        console.log(v);
                        
                    })
                2. 
                    $(‘.title‘).bind(‘click‘,function(){
                        var v = $(this).text();
                        console.log(v);
                    })
                3. 
                    $(‘.c1‘).delegate(‘.title‘,‘click‘,function(){
                        var v = $(this).text();
                        console.log(v);
                    })
                    
                4. 
                    $(‘.c1‘).on(‘click‘,‘.title‘, function () {
                        var v = $(this).text();
                        console.log(v);
                    });

委托绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="txt" type="text"/>
    <input  id="btn" type="button" value="提交"/>
    <ul>
        <li>111</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(‘#btn‘).click(function () {
            var v = $(‘#txt‘).val();
//            var v = $(this).siblings().val();
            var temp = document.createElement(‘li‘);
            temp.innerHTML=v;
            $(‘ul‘).append(temp);
        })
//        绑定委托
        $(‘ul‘).delegate(‘li‘,‘click‘,function () {
            var v = $(this).text();
            v = v+ ‘+1‘;
            $(this).text(v);
        })
    </script>
</body>
</html>

页面框架加载完成：

$(function () {
　　...
})
使用：希望查看页面立即执行的操作

 

阻止默认事件的发生：

$(‘#bd‘).click(function () {
　　var v = $(this).text();
　　alert(v);
　　return false;
})

二、表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="f1" action="http://www.baidu.com" method="GET">
        <p><input type="text" name="username" require="true" /></p>
        <p><input type="password" name="password" require="true" min-len="6" max-len="18" /></p>
        <p><input type="text" name="phone" require="true" phone="true"  /></p>
        <input type="submit" value="提交" />
    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            checkValidate();
        });
        function checkValidate() {

            $(‘#f1‘).find(‘:submit‘).click(function () {
                $(‘#f1‘).find(‘span‘).remove();
                var flag = true;
                $(‘#f1‘).find(‘:text,:password‘).each(function () {
                    // $(this)代指每一个input标签
                    // 每一次执行都是一个标签
                    // 如果有某个标签的某一项不满足，调到下一个标签
                    var value = $(this).val();//获取标签里面的值

                    var require = $(this).attr(‘require‘);//获取属性，看是否是必填
                    if(require){
                        if(value.length == 0){
                            var n = $(this).attr(‘name‘);
                            var errorTag = document.createElement(‘span‘);
                            errorTag.innerHTML = n + ‘输入不能为空‘;
                            $(this).after(errorTag);

                            flag = false;
//                             return true; // continue
                            return false; // break;

                        }
                    }

                    var minLen = $(this).attr(‘min-len‘);
                    if(minLen){
                        var valueLen = value.length;
                        var minLen = parseInt(minLen);
                        if(valueLen < minLen){
                            var n = $(this).attr(‘name‘);
                            var errorTag = document.createElement(‘span‘);
                            errorTag.innerHTML = n + ‘太短了‘;
                            $(this).after(errorTag);

                            flag = false;
//                             return true; // continue
                            return false; // break;
                        }
                    }

                    var phone = $(this).attr(‘phone‘);
                    if(phone){
                        // value: asdfasdf
                        var re = /^\d+$/;//正则匹配^行首$行尾
                        if(!re.test(value)){//查看正则是否匹配
                            var n = $(this).attr(‘name‘);
                            var errorTag = document.createElement(‘span‘);
                            errorTag.innerHTML = n + ‘格式错误‘;
                            $(this).after(errorTag);

                            flag = false;
//                             return true; // continue
                            return false; // break;
                        }
                    }

                });
                return flag;
            })
        }
    </script>
</body>
</html>

 

javascript+jQuery补充


联系
我们