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;            });        });