jQuery复习之－－－常用代码
1.换肤。开关。追加样。文本框得到焦点，背景变红
$(document.body).toggleClass("deng");<link href="red.css" rel="stylesheet" type="text/css" id="css"/> <script type="text/javascript"> $(function () { $(":button[value=red]").click(function () { $("#css").attr("href", $(this).attr("name")); }); $(":button[value=Aqua]").click(function () { $("#css").attr("href", $(this).attr("name")); }); }) </script>$(function () { $("input").focus(function () { $(this).addClass("red"); }).blur(function () { $(this).removeClass("red"); }) })
2.去掉面页的标签。设置控件的值。设置标签的内容
3.滑动菜单：子节点。兄弟节点。第一个 .事件，属性 2012.7.9菜单.htm
$(this).css("background-color", "red").siblings().css("background-color", "gray");<script type="text/javascript"> $(function () { $("#parent ul").attr("class", "hide"); $("#parent>li").mouseover(function () { $(this).children("ul:first").attr("class", "show"); }); $("#parent>li").mouseout(function () { var flag = 1; $(this).children("ul:first").mouseover(function () { flag = 0; }); if ($(this).children("ul:first").attr("class") == "show" && flag == 0) { } else { $(this).children("ul:first").attr("class", "hide"); } }) }); </script>
4.工资表->第一行标题，最后一行统计工资 中间隔行颜色不同。鼠标移上去的时候，变色
$("#tab tr:eq(0)").css("font-size", "25px").css("text-align", "center"); $("#tab tr:not(:first):not(:last):even").css("background-color", "yellow"); $("#tab tr:last").css("background-color", "red"); var bgcolor = ""; $("#tab tr:not(:first):not(:last)").mouseover(function () { bgcolor = $(this).css("background-color"); $(this).css("background-color", "#ccc"); }); $("#tab tr:not(:first):not(:last)").mouseout(function () { $(this).css("background-color", bgcolor); }); var $tr = $("#tab tr:not(:first):not(:last)"); var sum = 0; for (var i = 0; i < $tr.length; i++) { sum += parseInt($($tr[i]).children().eq(2).text()); } $("#tab tr:last td:eq(1)").text(sum);
同意按扭10秒钟
$(function () { $(":button").attr("disabled", true).val("同意10"); var n = 9; var tim = setInterval(function () { $(":button").val("同意" + n); n--; if (n == -1) { $(":button").attr("disabled", false).val("同意"); clearInterval(tim); } }, 1000) })
select option移动
$(":button[value=>]").click(function () { $("#all option:selected").removeAttr("selected").appendTo($("#sel")); }); $(":button[value=<]").click(function () { $("#sel option:selected").removeAttr("selected").appendTo($("#all")); }); $(":button[value=>>]").click(function () { $("#all option").removeAttr("selected").appendTo($("#sel")); }); $(":button[value=<<]").click(function () { $("#sel option").removeAttr("selected").appendTo($("#all")); });
radio checkbox 操作
<input type="button" name="name" value="checked" />
<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女<br />
<h1>
【全选/反选</h1>
<input type="checkbox" name="name1" value="cf" />吃饭
<input type="checkbox" name="name1" value="sj" />睡觉
<input type="checkbox" name="name1" value="ddd" />打豆豆
<input type="checkbox" name="name2" value="qs" />全选
<input id="Button1" type="button" value="反选" /><br />
$(function () { //radio $(":button[value=checked]").click(function () { alert($(":radio[name=sex]:checked").val()); }); //全选 $(":checkbox[name=name2]").click(function () { $(":checkbox[name=name1]").attr("checked", $(this).attr("checked")); }); //当一个checkbox发生变化时 $(":checkbox[name=name1]").click(function () { var flag = "checked"; $(":checkbox[name=name1]").each(function () { if ($(this).attr("checked").toString() != "true") { flag = ""; } }); $(":checkbox[name=name2]").attr("checked", flag); }); //反选 $("#Button1").click(function () { $(":checkbox[name=name1]").each(function () { $(this).attr("checked",!$(this).attr("checked")); }); var flag = "checked"; $(":checkbox[name=name1]").each(function () { if ($(this).attr("checked").toString() != "true") { flag = ""; } }); $(":checkbox[name=name2]").attr("checked", flag); }) })
评分控件
<ul id="rating">
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
<li>
☆
</li>
</ul>
$(function () { var flag = true; // $("#rating li").mouseover(function () { // if (flag) { // $("#rating li").css("background-color", "#ccc"); // $(this).nextAll().css("background-color", "White"); // } // }); // $("#rating li").mouseout(function () { // if (flag) { // $("#rating li").css("background-color", "White"); // } // }); //第二种方式用合成事件 $("#rating li").hover(function () { if (flag) { $("#rating li").css("background-color", "#ccc"); $(this).nextAll().css("background-color", "White"); } }, function () { if (flag) { $("#rating li").css("background-color", "White"); } } ); $("#rating li").one("click", function () { flag = false; }); });