jq基础

最新推荐文章于 2024-05-24 13:39:19 发布

weixin_30823833

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量57

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/popeyesailorman/p/7381718.html

版权

1.表单校验： 

<style type="text/css">
    .outline{
        outline: #00FF00 dotted thick;
    }
</style>

<form id="form" action="./post.php" method="post">
    用户名：<input id="username" name="username" required="">
    密码： <input type="password" name="password" pattern="^\w{6,20}$">
    <input id="submit" type="submit" value="登录" disabled>
</form>

<script type="text/javascript">
$(document).ready(function(){
    "use strict";
    var console = window.console;
    var $ = window.$;

    $("#submit").removeAttr('disabled');
    console.log('1.已经取消登录按钮的禁用状态');


    var arrInput = $("input[name='username'],input[name='password']");
    arrInput.focus(function() {
        $(this).addClass('outline');
    });
    arrInput.blur(function() {
        $(this).removeClass('outline');
    });


    $("input[name='password']").blur(function() {
        var strPassWord = $("input[name='password']").val();
        var rePattern = $("input[name='password']").attr("pattern");
        var re = new RegExp(rePattern);
        if (re.test(strPassWord)) {
            console.log('3.密码符合条件');
        } else {
            console.log('3.密码不符合条件');
        }
    });


    $("#submit").before('4.我是新加的input框' + '<input type="text" name="xixi">');


    $("#submit").submit(function(event) {
        $.ajax({
            type: 'post',
            url: './post.php',
            data: $("#form").serialize(),
            dataType:'json', 
            success: function(data) {
                console.log(data);
            }
        });
        event.preventDefault(); 
    });


});
</script>

2.判断body背景色是否透明，鼠标放下，body背景色变红：

<html>
<head>
    <title>杨帆jq2</title>
</head>
<style type="text/css">
    .red {
        background-color: red;
    }
</style>
<body style="background:transparent;">
<div style="height:100px;background-color: grey;"></div>
<script src="https://qidian.gtimg.com/yuewen/v1/js/jquery.min.js"></script>
<script type="text/javascript">
     "use strict";
    var console = window.console;
    var $ = window.$;

    console.log('1.body的背景色为：' + $("body").css('backgroundColor'));

    $.fn.isBackgroundColorTransparent = function(){
        var color = $(this).css('backgroundColor');

        if(color == 'transparent') {
            console.log('2.body的背景色是透明的');
        } else if(color.split(',').length > 3 && color.split(',')[3].split(')')[0] == 0) {
            console.log('2.body的背景色是透明的');
             return true;
        } else {
            console.log('2.body的背景色不是透明的');
             return false;
        }
    }; 
    $("body").isBackgroundColorTransparent();

    if($("body").isBackgroundColorTransparent()) {
        $("body").css('backgroundColor','pink');
        console.log('3.body的背景色是透明的，现在设置成粉色了');
    } else {

    }

    var color = $("body").css('backgroundColor');
    $(document).on('mousedown', function (event) {
        var elTarget = event.target;
        if(elTarget.tagName.toLowerCase() == 'body') {
            $("body").css('backgroundColor','red');
            console.log('4.鼠标放下，body背景色变红');
        }    
    });
    $(document).on('mouseup', function (event) {
        var elTarget = event.target;
        if(elTarget.tagName.toLowerCase() == 'body') {
            $("body").css('backgroundColor',color);
            console.log('4.鼠标抬起，body背景色恢复');
        }    
    });

    // $(document).on({
    //     mousedown: function(event) {
    //         var elTarget = event.target;
    //         if(elTarget.tagName.toLowerCase() == 'body') {
    //             $("body").css('backgroundColor','red');
    //             console.log('4.鼠标放下，body背景色变红');
    //         }    
    //     }, mouseup: function(event) {
    //         var elTarget = event.target;
    //         if(elTarget.tagName.toLowerCase() == 'body') {
    //             $("body").css('backgroundColor','yellow');
    //             console.log('4.鼠标放下，body背景色变黄');
    //         }    
    //     }
    // });


    // 若body上没有内联样式
    // $("body").on("mousedown mouseup", function(event) {
    //     var elTarget = event.target;
    //     if(elTarget.tagName.toLowerCase() == 'body' && $(this).attr('style') == '') {
    //         $("body").toggleClass("red");
    //         console.log('4.鼠标放下，body背景色变红');
    //     }
    // });
</script>
</body>
</html>

3.获取标签内的文本内容

<body>
<p>呜呜呜<em>111.1111</em><cite> 万 字 </cite><i>|</i><em>2323.2323</em><cite> 万 字<span>*</span>sssss</cite><i>|</i><!-- 注释 --></p>
<script src="http://qidian.gtimg.com/lulu/theme/modern/js/plugin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    "use strict";
    var console = window.console;
    var $ = window.$;



    var childs = [].slice.call(document.querySelector('p').childNodes);
    var arr = [];
    function getText(obj) {
        obj.forEach(function(item,i){
            if (item.nodeType == 3) {
                arr.push(item.textContent || item.innerText);
            } else if (item.childNodes.length) {
                getText([].slice.call(item.childNodes));
            }
        });
    }
    getText(childs);
    console.log(arr);

    // childNodes 属性返回节点的子节点的集合，
    // nodeType一共有12种类型
    // TEXT_NODE  == 3 文本节点的nodeType == 3 
    // innerText 兼容IE，textContent只支持IE8+以上。

});  
</script>
</body>

4.序列化表单值

<body>
<div>
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
<input type="checkbox" name="vehicle" value="Car"/> 
<input type="checkbox" name="vehicle" value="Car2"/> 
<input type="file" name="文件名称"/>
密码:<input type="password" name="密码" />
Male:<input type="radio" name="性别" value="male" />
Female: <input type="radio" name="性别" value="female" /> 
</div>

<button>序列化表单值</button>
<p></p>
<script src="https://qidian.gtimg.com/yuewen/v1/js/jquery.min.js"></script>
<script type="text/javascript">
    "use strict";
    var console = window.console;
    var $ = window.$;

    $.fn.serialize = function(){
        var msgObject = [];
        $(this).find('input').each(function(){
            var self = this;
            var key = $(this).attr('name');
            var value = $(this).val();
            var type = $(this).attr('type');

            if (type == 'checkbox' && $(this).is(':checked') == false) {

            } else if (type == 'radio' && $(this).is(':checked') == false) {
                
            } else if (value == '') {
                
            } else {
                msgObject.push(key + '=' + value);
            }    
        });
         return msgObject.join('&');
    };


    $("button").click(function(){
        $("p").text($("div").serialize());
    });
</script>
</body>

转载于:https://www.cnblogs.com/popeyesailorman/p/7381718.html

weixin_30823833

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq基础

1.表单校验： <style type="text/css"> .outline{ outline: #00FF00 dotted thick; }</style><form id="form" action="./post.php" method="post"> 用户名：<input i...
复制链接

扫一扫

jq基础

“相关推荐”对你有帮助么？