今天是最后一天学习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的学习，是激动，还是激动那，嘿嘿····
时间： 2024-10-06 09:54:45