jQuery温习之－－－常用代码

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;

            });
        });