jQuery21(文本框为空,球队)

最新推荐文章于 2024-03-17 09:35:00 发布

天赋进行时

最新推荐文章于 2024-03-17 09:35:00 发布

阅读量347

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50641527

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

文本框为空练习

完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        //创建若干个输入文本框,当光标离开文本框的时候,如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色
        $(function () {
            $('input').blur(function () {
                if ($(this).val().length > 0) {
                    $(this).css('backgroundColor', 'red')
                } else {
                    $(this).css('backgroundColor', 'white');
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
</body>
</html>

球队练习.unbind

知识点:unbind,取消事件,另外,style也是一个属性,可以删除.
完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $('ul li').mouseover(function () {
            //                $(this).css('backgroundColor', 'red');
            //            }).mouseout(function () {
            //                $(this).css('backgroundColor', '');
            //            }).click(function () {
            //                $(this).removeAttr('style').unbind().appendTo($('#u2'));
            //                //得删除样式
            //                //取消他的时间 unbind
            //            });
            $('ul li').mouseover(function () {
                $(this).css('backgroundColor', 'red');
            }).mouseout(function () {
                $(this).css('backgroundColor', '');
            }).click(function () {
                $(this).removeAttr('style').appendTo($(this).parent().siblings('ul'));
                //parent() 父亲节点
                //siblings 兄弟节点
                //注意,hr也算他的兄弟节点,所以需要在括号内加上'ul'

            });

        });
    </script>
</head>
<body>
    <ul id='u1'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <hr color='red' />
    <ul id='u2'>
    </ul>
</body>
</html>

天赋进行时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery21(文本框为空,球队)

文本框为空练习完整实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></tit
复制链接

扫一扫