今天是最后一天学习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>
今天就写到这这里啦，嘿嘿，即将进入web的学习，是激动，还是激动那，嘿嘿····