Jquery实用小案例，适合初学者练习使用

来源：互联网发布：java怎样创建服务编辑：程序博客网时间：2024/05/16 16:09

1.窗口加载事件。
$(document).ready(function () {
alert("加载完毕！");
});
$(function () { alert("ready!!"); });

2.遍历数组，做函数处理，得到新的数组
var arr = [1, 2, 3];
var arr2 = $.map(arr, function (item) { return item * 2; });
alert(arr2);

3.便利字典（数组）无返回，显示key+value
var dir = { "tom": 20, "jerry": 50, "jim": 30 };
$.each(dir, function (key, value) { alert(key+" is "+value); });

4.便利数组，显示value
var dir = { "tom": 20, "jerry": 50, "jim": 30 };
$.each(dir, function () { alert(this); });

5.便利数组，显示key
var dir = { "tom": 20, "jerry": 50, "jim": 30 };
$.each(dir, function (item) { alert(item); });

6.使用id选择器的时候，如何判断元素是否存在
$(function () {
            var elements = $("#div1");
     //判断元素是否存在
            if (elements.length <= 0) {
                alert("error");
                return;
            }
            elements.mouseover(
                function () {
                    alert("welcome");
                }
            );
        });

7.节点遍历方法
    <head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //$("div").click(function () { alert($(this).nextAll("div").text()); });
            $("div").click(function () {
                $.each($(this).nextAll("div"),function(){
                    $(this).css("background","green")
                });
            });
  //上面的效果简化的代码方式
     $("div").click(function () {
                $(this).nextAll("div").css("background", "red");
            });
  //点击高亮显示
     $("div").click(function () {
                $(this).css("background", "#ccc");
                $(this).siblings("div").css("background", "#FFF");
            });
     $("div").click(function () {
                $(this).css("background", "#ccc").siblings("div").css("background", "#FFF");
            });
        });
    </script>
</head>
<body>
    <div>aa</div>
    <div>bb</div>
    <div>cc</div>
    <div>dd</div>
</body>

8.计时同意
var leftSeconds = 10;
        var intervalId;
        $(function () {
            $("#btn").attr("disabled", true);
            intervalId = setInterval("Count()",1000);
        });
        function Count() {
            if (leftSeconds <= 0) {
                $("#btn").val("同意");
                $("#btn").attr("disabled", false);
                clearInterval(intervalId);
                return;
            }
            leftSeconds--;
            $("#btn").val("请仔细阅读"+leftSeconds+"秒");
        }
<textarea rows="5">
    aaaaaa
</textarea>
<input type="button" id="btn" value="AGREE" />

9.无刷新发帖
    <script type="text/javascript">
        $(function () {
            $("#btnPost").click(function () {
                var title = $("#txtTitle").val();
                var body = $("#txtBody").val();
                var tr = $("<tr><td>" + title + "</td><td>" + body + "</td></tr><br />");
                $("#tb").append(tr);
                $("#txtTitle").val("");
                $("#txtBody").val("");
            });
        });
    </script>
<body>
<p>这是我的第一个帖子！！</p>
<table id="tb">
    <tr><td>匿名</td><td>沙发</td></tr>
</table><br />
<input type="text" id="txtTitle" /><br />
<textarea id="txtBody"></textarea><br />
<input type="button" value="发表评论" id="btnPost" /><br />
</body>

10.点击移动项
$(function () {
            $("#ul1 li").css("cursor", "pointer").mouseover(function () {
                $(this).css("background", "red").siblings().css("background", "white");
            }).click(function () {
                $(this).css("background","white").appendTo("#ul2");
            });
        });

11.打造自己的鼠标指针
$(function () {
$("#ul1").css("cursor", "url('cursor/AppStarting.ani')");
});

12.搜索框获取焦点失去焦点变换效果和文字

.focus{color:#000;}

$(function () {
            $("#search").val("请输入要搜索的内容").addClass("blur").focus(function () {
                if ($("#search").val() == "请输入要搜索的内容") {
                    $("#search").val("").removeClass("blur");
                }
            }).blur(function () {
                if ($("#search").val() == "") {
                    $("#search").val("请输入要搜索的内容").addClass("blur");
                }
            });
        });

13.单选框的操作
$(function () {
            $("#btnShow").click(function () {
                alert($("input[name=gender]:checked").val());
            });
            $("#btnSelect").click(function () {
                //$("input[name=gender]").val(["女"]);
                $(":radio[name=gender]").val(["女"]);
            });
        });

14.复选框的操作
$(function () {
$("#select").click(function () {
$(":checkbox").val(["篮球", "乒乓球"]);

                $(":checkbox[value=羽毛球]").attr("checked",true);
            });
        });

15.全选全部选反选
$(function () {
            $("#btn1").click(function () {
                $("#li :checkbox").attr("checked", true); //#li :checkbox之间空格不能省
            });
        });
        $(function () {
            $("#btn2").click(function () {
                $("#li :checkbox").attr("checked", false);
            });
        });
        $(function () {
            $("#btn3").click(function () {
                $("#li :checkbox").each(function () {
                    $(this).attr("checked",!$(this).attr("checked"));
                });
            });
        });
<div id="li">
<input type="checkbox" value="篮球" />篮球<br />
<input type="checkbox" value="足球" />足球<br />
<input type="checkbox" value="乒乓球" />乒乓球<br />
<input type="checkbox" value="羽毛球" />羽毛球<br />
<input type="button" id="select" value="选择" /><br />
<input type="button" id="btn1" value="全选" />
<input type="button" id="btn2" value="不选" />
<input type="button" id="btn3" value="反选" />
</div>

16.阻止事件冒泡
$(function () {
            $("#td").click(function () { alert("td"); });
            $("#tr").click(function (e) { alert("tr"); e.stopPropagation(); });
            $("#tt").click(function (e) { alert("t"); });
        });

<table id="tt"><tr id="tr"><td id="td">aaaaaaaaaaaa</td></tr></table>

17.阻止默认行为，可以用来阻止不合法表单的提交
  $(function () {
            $("a").click(function (e) { alert("aaaa"); e.preventDefault(); });
        });

18.function（e）的属性和方法
e.pageX e.pageY 获取鼠标的x和y坐标
e.target 表示事件源而this表示当前的对象 target始终表示源
e.altKey e.shiftKey e.ctrlKey 获得alt，shift，和ctrl是否被按下
e.which 获取鼠标事件 1.2.3 分别为左中右
e.keyCode 获得键盘码
e.charCode 获取ASC码

19.绑定事件
bind("函数名",function(){。。。})
unbind("函数名",function(){。。。})
one("函数名",function(){。。。}) 一次性事件

20.跟着鼠标走的图片
<script type="text/javascript">
        $(function () {
            $(document).mousemove(function (e) {//document表示整个文档的范围，body只是元素的显示范围
                $("#fly").css("left", e.pageX).css("top", e.pageY);
            });
        });
    </script>

21.鼠标放上显示提示效果
$(function () {
            $("#btn").hover(function (e) {
                //alert("aaa");
                $("#div").css("left", e.pageX).css("top", e.pageY);
                $("#div").text("上来了");
            }, function () {
                $("#div").text("");
            });
        });
<input type="text" id="btn" />
<div id="div" style="position:absolute;"></div>

22.鼠标放上图片放大，显示详细信息，鼠标离开自动消失
var data = {
            "img/1.jpg":["img/1.jpg","一号","185cm"],
            "img/2.jpg":["img/2.jpg","二号","185cm"],
            "img/3.jpg":["img/3.jpg","三号","185cm"],
            "img/4.jpg":["img/4.jpg","四号","185cm"],
            "img/5.jpg":["img/5.jpg","五号","185cm"],
            "img/6.jpg":["img/6.jpg","六号","185cm"],
            "img/7.jpg":["img/7.jpg","七号","185cm"]
        };

        $(function () {
            $.each(data, function (key, val) {
                var smalling = $("<img src='" + key + "' />");
                smalling.attr("bigmappath", val[0]);
                smalling.attr("personname", val[1]);
                smalling.attr("personheight", val[2]);
                smalling.css("width", "100px");
                smalling.css("height", "200px");

                smalling.mouseover(function (e) {
                    $("#detailImg").attr("src", $(this).attr("bigmappath"));
                    $("#detailHeight").text($(this).attr("personheight"));
                    $("#detailName").text($(this).attr("personname"));
                    $("#details").css("top", e.pageY).css("left", e.pageX).css("display", "");
                });
                smalling.mouseleave(function () {
                    $("#details").css("display", "none");
                });

$("body").append(smalling);
});

            $("#details").mouseover(function () {
                $(this).css("display", "");
            }).mouseleave(function () {
                $(this).css("display", "none");
            });
        });

23.模拟qq点击菜单的效果
     $(function () {
                $("#qq li:even").addClass("header");
                $("#qq li:odd").addClass("body");
                $("#qq li:even").click(function () {
                    $(this).next("li.body").show("fast").siblings("li.body").hide("400");
                });
                $("#qq li:first").click();
            });

24.动态创建人和节点
var link = $("<a href='http://www.baidu.com'>aaaa</a>");
$("body").append(link);

25.cookie实现下次登录自动输入用户名
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        if ($.cookie("UserName")) {
            $("#username").val($.cookie("UserName"));
        }
        $("#btnLogin").click(function () {
            $.cookie("UserName",$("#username").val());
        });
    </script>
</head>
<body>
<input type="text" id="username" />
<input type="button" value="登陆" id="btnLogin" />
</body>

26.cookie其他参数
$.cookie('名字','值',{参数：值});
expires 表示要保留cookie几天
path 控制虚拟目录路径哪里可以共享cookie
domain 控制可共享cookie的域名
secure 安全性选项

27.cookie记录上次访问时间
$(function () {
            $("#time").text($.cookie("date"));
            $.cookie("date", new Date().toDateString());
        });

</div>

28.cookie实现记住网站背景风格
$(function () {
            $("body").css("background-color", $.cookie("bgcolor"));
            $("#tb td").click(function () {
                $("body").css("background-color", $(this).css("background-color"));
                $.cookie("bgcolor", $(this).css("background-color"));
            });
        });

29.JQuery实现个性对话框和tab控件
<head>
    <title></title>
    <link href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#mydialog").dialog();
            $("#tab").tabs();
        });
    </script>

</head>
<body>
<div id="mydialog">hello world</div>
<div id="tab">
    <ul>
        <li><a href="#tab1">TAB1</a></li>
        <li><a href="#tab2">TAB2</a></li>
    </ul>
    <div id="tab1">用户名：<input type="text" /></div>
    <div id="tab2">密码：<input type="text" /></div>
</div>
</body>