首页 > 代码库 > JQuery学习的尾声
JQuery学习的尾声
今天是最后一天学习JQuery，上周我们在狠狠的学习JavaScript，然后在这周我们又把JQuery扼杀在了摇篮里面，纵然学习的太快我们导致我们知识不牢固，可是我们没有那么多的时间学习的如此详细，但是又有好多的知识我们不得不学，其实这样说我感觉最正确的是：学习的知识经常用的我们需要注意的都传授给我们啦，学习的怎么样真的只能依靠自己。所以是否能够很好地掌握这些只有自己努力自己认真地练习。要想在一周的时间内学好JavaScript当然听起来很荒谬，想在三天的时间里学好JQuery的确也不现实，但是我们首先了解了JavaScript和JQuery，这样我们入门啦，之后学习起来还是会轻松很多的，好啦，来总结一下今天学习的知识吧。
一.JQuery的链接式操作
<script src=http://www.mamicode.com/"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=http://www.mamicode.com/"#none">衬衫</a> <ul class="level2" style="display:none"> <li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li><li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li><li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li> </ul> </li> <li class="level1"> <a href=http://www.mamicode.com/"#none">衬衫</a> <ul class="level2" style="display:none"> <li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li><li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li><li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li> </ul> </li> <li class="level1"> <a href=http://www.mamicode.com/"#none">衬衫</a> <ul class="level2" style="display:none"> <li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li><li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li><li><a href=http://www.mamicode.com/"#">短袖衬衫</a></li> </ul> </li> </ul> </div></body>
像上面的多个事件可以链接在一起操作实现其功能，就是链式操作。
二.选项框的选项与提示
<script src=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"#">佳能</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">索尼</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">富士</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">拍得丽</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">佳能</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">索尼</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">拍得丽</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">佳能</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">拍得丽</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">索尼</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">佳能</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">索尼</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">拍得丽</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">索尼</a><i>(30440)</i></li> <li><a href=http://www.mamicode.com/"#">其他品牌相机</a></li> </ul> <div class="showmore"> <a href=http://www.mamicode.com/"more.html"><span>显示全部品牌</span></a> </div> </div></body>
四.文本框的样式设置
<script src=http://www.mamicode.com/"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=http://www.mamicode.com/"请输入邮箱地址" /><br /><br /> <input type="text" name="name" id="password" value=http://www.mamicode.com/" 请输入邮箱密码" /><br /><br /> <input type="button" name="name" value=http://www.mamicode.com/"登录 " /> </form></body>
今天就写到这这里啦，嘿嘿，即将进入web的学习，是激动，还是激动那，嘿嘿····
JQuery学习的尾声
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。