JQueryの勉強の終わり
20157 ワード
今日は最后の日JQueryを勉强して、先周私达はJavaScriptをひどく勉强して、それから今周私达はまたJQueryを揺りかごの中で扼杀して、たとえ勉强が速すぎて私达の知识がしっかりしていないとしても、しかし私达はそんなに多くの时间が勉强するのがこんなに详しくなくて、しかしまた多くの知识が私达は学ばなければなりません実は私が最も正しいと感じているのは、勉強の知識がよく使われている私たちが注意しなければならないことを私たちに伝授してくれたことです.勉強の仕方は本当に自分に頼るしかありません.だからうまく身につけることができるかどうかは自分で努力して自分でまじめに練習するしかない.1週間でJavaScriptをマスターするにはもちろんでたらめに聞こえますが、3日間でJQueryをマスターするのは現実的ではありませんが、JavaScriptとJQueryをまず理解しました.これで入門しました.その後、勉強が楽になります.では、今日の勉強の知識をまとめましょう.
一.JQueryのリンク操作
上記のような複数のイベントをリンクして操作してその機能を実現することができるのがチェーン操作である.
二.オプションボックスのオプションとヒント
三.詳細を表示
四.テキストボックスのスタイル設定
今日はここまで书いて、へへ、间もなくwebの学习に入って、兴奋して、それとも兴奋して、ハッハッハッ...
一.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の学习に入って、兴奋して、それとも兴奋して、ハッハッハッ...