随笔- 126 文章- 0 评论- 1307 阅读- 28万

JQuery学习的尾声

今天是最后一天学习JQuery，上周我们在狠狠的学习JavaScript，然后在这周我们又把JQuery扼杀在了摇篮里面，纵然学习的太快我们导致我们知识不牢固，可是我们没有那么多的时间学习的如此详细，但是又有好多的知识我们不得不学，其实这样说我感觉最正确的是：学习的知识经常用的我们需要注意的都传授给我们啦，学习的怎么样真的只能依靠自己。所以是否能够很好地掌握这些只有自己努力自己认真地练习。要想在一周的时间内学好JavaScript当然听起来很荒谬，想在三天的时间里学好JQuery的确也不现实，但是我们首先了解了JavaScript和JQuery，这样我们入门啦，之后学习起来还是会轻松很多的，好啦，来总结一下今天学习的知识吧。

一.JQuery的链接式操作

<script src="jquery-1.7.1.min.js"></script>
    <style>
        .current {
            background-color:pink;
        }
    </style>
    <script>
        $(function () {
            $(".level1>a").click(function () {
                $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
                //addClass():添加一个current样式,在这里使用的是JQuery的链接式操作。
            });
        });
    </script>
<body>
    <div class="box">
         <ul class="menu">
            <li class="level1">
              <a href="#none">衬衫</a>
                <ul class="level2" style="display:none">
                     <li><a href="#">短袖衬衫</a></li><li><a href="#">短袖衬衫</a></li><li><a href="#">短袖衬衫</a></li>
                </ul>
            </li>
             <li class="level1">
                <a href="#none">衬衫</a>
                <ul class="level2" style="display:none">
                    <li><a href="#">短袖衬衫</a></li><li><a href="#">短袖衬衫</a></li><li><a href="#">短袖衬衫</a></li>
                </ul>
            </li>
             <li class="level1">
                <a href="#none">衬衫</a>
                <ul class="level2" style="display:none">
                    <li><a href="#">短袖衬衫</a></li><li><a href="#">短袖衬衫</a></li><li><a href="#">短袖衬衫</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

像上面的多个事件可以链接在一起操作实现其功能，就是链式操作。

二.选项框的选项与提示

<script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $("#chk").click(function () {
                if ($(this).is(":checked")) {       //利用input标签中的checked属性来判断
                    alert("谢谢您的支持");
                }
            });
        });
    </script>
<body>
    <form>
        <input type="checkbox" id="chk" name="name" /><label>我已经阅读上述条款</label>
    </form>
</body>

三.显示详细内容

 <script src="jquery-1.7.1.min.js"></script>
    <style>
    .pro {
        background-color:red;
        }
    </style>
    <script>
        $(function () {
            var linodes = $("ul li:gt(4):not(:last)");
            linodes.hide();
            $("div .showmore>a").click(function (e) {
                if (!linodes.is(":visible")) {
                    linodes.show();
                    $(this).find("span").text("精简显示品牌");      //find直接寻找子标签
                    $("ul li").filter(":contains('富士'),:contains('索尼')").addClass("pro");                    
                    return false;                                   //阻止冒泡事件                
                }
                else {
                    linodes.hide();
                    $(this).find("span").text("显示全部品牌");
                    return false;
                }
            });
        });
    </script>
<body>
     <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(30440)</i></li>
            <li><a href="#">富士</a><i>(30440)</i></li>
            <li><a href="#">拍得丽</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(30440)</i></li>
            <li><a href="#">拍得丽</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">拍得丽</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(30440)</i></li>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(30440)</i></li>
            <li><a href="#">拍得丽</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(30440)</i></li>
            <li><a href="#">其他品牌相机</a></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </div>
</body>

四.文本框的样式设置

 <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $("#email").focus(function () {
                if ($(this).val('请输入邮箱地址')) {       
                    $(this).val('');
                }
            }).blur(function () {
                $("#email").val('请输入邮箱地址');
            });
            $("#password").focus(function () {
                if ($(this).val('请输入邮箱密码')) {
                    $(this).val('');
                }
            }).blur(function () {
                $("#password").val('请输入邮箱密码');
            });
        })
    </script>
<body>
    <form>
       <input type="text" name="name" id="email" value="请输入邮箱地址" /><br /><br />
       <input type="text" name="name" id="password" value=" 请输入邮箱密码" /><br /><br />
       <input type="button" name="name" value="登录 " />
   </form>
</body>