JQuery练习

选择器的使用

  <script type="text/javascript">
        $(function () {
            //$("div:first").css("background", "#bbffaa");
            //$("div:last").css("background","#bbffaa");
            //$("div:not(.one)").css("background", "#bbffaa");
            $("div:eq(3)").css("background", "#bbffaa");
            $("div:gt(3)").css("background", "#bbffaa");
        });
    </script>
 <form id="form1" runat="server">
    <div class="one" id="one">
        id为one，class为one的div
    <div class="mini">calss为mini</div>
    </div>
        <div class="one" id="two" title="text">
            id为two，class为one，Tetley为text的div
             <div class="mini" title="other">calss为mini,titl为other</div>
             <div class="mini" title="text">calss为mini，title为test</div>
        </div>
        <div class="one" >
             <div class="mini" title="other">calss为mini</div>
             <div class="mini" title="text">calss为mini</div>
            <div class="mini" title="other">calss为mini</div>
             <div class="mini" title="text"></div>
        </div>
         <div class="one" >
             <div class="mini" title="other">calss为mini</div>
             <div class="mini" title="text">calss为mini</div>
            <div class="mini" title="other">calss为mini</div>
             <div class="mini" title="texts">calss为mini，title为tests</div>
        </div>
            <div class="one" style="display: none">
                style的display为none的div
                </div>
             <div class="hide" title="other">calss为hide</div>
             <div class="hide" title="text">calss为mini</div>
            <div class="mini" title="other">c包含inputtyp<input type="hidden "size="8"/></div>
             <span id="mover">正在执行动画的span元素</span>
        
    </form>

序列化元素

   <script type="text/javascript">
        $(function () {
            $("#loading").ajaxStart(function () {
                $(this).show();
            });
            $.get("111.html",
                { username: $("#username").val(), content: $("#content").val() },
                //{ "username="  },
                function (data) {
                $("#resText").html(data);
                });
            var fields = $(":checkbox:radio").serializeArray();
            console.log(fields);
        });
    </script>
<form id="form1">
        <div id="loading"></div>
        <p>评论:</p>
        <p>姓名:
            <input type="text" name="username" id="username" /></p>
        <p>内容:
            <textarea name="content" id="content"></textarea></p>
        <p>
            <input type="button" id="send" value="提交" /></p>
    </form>

    <div class='comment'>已有评论：</div>
    <div id="resText">
    </div>

复选框的应用

 <script type="text/javascript">
        $(function () {
            ////全选
            //$("#btnCheckAll").click(function () {
            //    $('[name=item]:checkbox').attr("checked",true);
            //});
            ////全不选
            //$("#btnCheckNo").click(function () {
            //    $("[name=item]:checkbox").attr("checked", false);
            //});
            ////反选
            //$("#btnCheckRev").click(function () {
            //    $("[name=item]:checkbox").each(function() {
            //        //$(this).attr("checked", !$(this).attr("checked"));
            //        this.checked = !this.checked;
            //    });
            //});
            
            $("#add").click(function () {
                var $options = $("#select1 option:selected");
                //var $remove = $options.remove();
                //$remove.appendTo("#select2");
                //直接追加给另外的
                $options.appendTo("#select2");
            });
            $("#add_all").click(function () {
                var $options = $("#select1 option");
                $options.appendTo("#select2");
            });
            //双击添加到右边
            $("#select1").dblclick(function () {
                var $options = $("option:selected", this);
                $options.appendTo("#select2");
            });
        });
    </script>
 <form id="form1" runat="server">
    <div>
    <input type="checkbox" name="item" value="足球"/>足球
        <input type="checkbox" name="item" value="足球"/>篮球球
        <input type="checkbox" name="item" value="玉秒球"/>玉秒球
        <input type="checkbox" name="item" value="阿凡达球"/>阿凡达球
        <input type="checkbox" name="item" value="放大球"/>放大球
        <input type="checkbox" name="item" value="额球"/>额球
        <input type="button" value="全选" id="btnCheckAll"/>
        <input type="button" value="全不选" id="btnCheckNo"/>
        <input type="button" value="全选" id="btnCheckRev"/>
    </div>
        <div class="centent">
            <select multiple="" id="select1" style=" 100px;height:160px">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
                <option value="4">选项4</option>
                <option value="5">选项5</option>
                <option value="6">选项6</option>
            </select>
            <div>
                <span id="add" class="bb">选中添加到右边</span><br/>
                <span id="add_all"class="bb">全部添加到右边</span>
            </div>
        </div>
        <div class="centent1">
            <select multiple="" id="select2" style=" 100px;height: 160px"></select>
             <div>
                <span id="remove"class="bb">选中删除到左边</span><br/>
                <span id="remove_all"class="bb">全部删除到左边</span>
            </div>
        </div>
    </form>

表单验证

 <script type="text/javascript">
        $(function () {
            $("form :input.required").each(function () {
                var $require = $("<strong class='high'>*</strong>");
                $(this).parent().append($require);
            });
            $("form :input").blur(function () {
                var $parent = $(this).parent();
                //验证用户名：
                $parent.find(".formtips").remove();
                if ($(this).is("#username")) {
                    if (this.value == "" || this.value.length < 6) {
                        var errorMsg = "请输入至少6位用户名";
                        $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");
                    } else {
                        var okMsg = "输入正确";
                        $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
                    }
                }
            });
            $("#send").click(function () {
                alert(1);
                $("form .required:input").trigger("blur");
                var numError = $("form .onError").length;
                alert(numError);
                if (numError) {
                    return false;
                } else {
                    alert("注册成功！");
                }
            });
        });
    </script>
 <form id="form1" method="post" action="" runat="server">
        <div></div>
        <div class="int">
            <label for="username">用户名：</label>
            <input type="text" id="username" class="required" />
        </div>
        <div class="int">
            <label for="email">邮箱：</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="int">
            <label for="personinfo">个人资料：</label>
            <input type="text" id="personinfo" class="required" />
        </div>
        <div class="sub">
            <input type="submit" value="提交" id="send" /><input type="reset" id="res" />
        </div>
    </form>

span点击绑定测试

 <script type="text/javascript">
        $(function () {
            $("span").bind("click", function () {
                alert($(this).html());
            });
            //事件冒泡
            $("span").bind("click", function () {
                alert(123);
                var txt = $("#msg").html("<p>内层span元素被单机</p>");
                $("#msg").html(txt);
            });
            $("#content").bind("click", function () {
                var txt = $("#msg").html("<p>外层span元素被单机</p>");
                $("#msg").html(txt);
            });
            $("body").bind("click", function () {
                var txt = $("#msg").html("<p>body元素被单机</p>");
                $("#msg").html(txt);
            });
        })
    </script>
<form id="form1" runat="server">
    <div>
     <div id="content">
         外层元素
            <span>内层span元素</span>
        </div>
        <div id="msg"></div>
    </div>
    </form>

jQuery中的动画

 <script type="text/javascript">
        //fadein() fandeout() 慢慢 隐藏和消失  sildUP() sildDown()
        //自动以动画  animate()
        $(function () {
            $("#panl").click(function () {
                $(this).animate({left:"+=500px"},3000);
            });
        });
    </script>
    <style>
        #panl {
            position: relative;
             100px;
            height: 100px;
            border: 1px solid #0050d0;
            background: #96e555;
            cursor:pointer;
        }
    </style>

   <form id="form1" runat="server">
    <div id="panl">
    
    </div>
    </form>

Jquery与ajax应用

<script type="text/javascript">
        $(function () {
            //$.getScript()方法和$.getJson()方法
            //在需要那个javascript文件时，动态创建<script>标签
            // $(document.createElement("script")).attr("src", "test.js").appendTo("head");
            //$("#btnOK").click(function () {
            //    $.getScript("script/jquery.color.js", function () {
            //        $(".block").animate({ backgroundColor: "pink" }, 1000)
            //            .animate({ backgroundColor: "blue" }, 1000);
            //    });
            //});
            $("#btnOK").click(function () {
                $.getJSON("script/test.json", function (date) {
                    $("#resText").empty();
                    var html = "";
                    $.each(date, function (commentIndex,comment) {
                        html += "<div class='comment'><h6>"
                            + comment["username"] +
                            "</h6><p class='para'>" +
                            comment["content"] + "</p></div>";
                    });
                    $("#resText").html(html);
                });
            });
        })
    </script>
 <form id="form1" runat="server">
        <p>评论:</p>
        <p>
            姓名:
            <input type="text" name="username" id="username" />
        </p>
        <p>
            内容:
            <textarea id="content"></textarea>
        </p>
        <p>
          <%--  <input type="button" id="send" value="提交" />--%>
        </p>
        <input type="button" id="btnOK" value="提交" />
    </form>

    <div class="block" style=" 300px; height: 300px">
    </div>
    <div class='comment'>已有评论：</div>
    <div id="resText">
    </div>

jquery事件和动画

 <style>
        .highlight {
            background: #ff3300;
        }
    </style>
    <script type="text/javascript">
        $(function() {

            //$(".panel h5.head").bind("click", function () {
            //    $(this).next().css("display", "display");
            //});
            //加强效果
            // $(this).next()多次使用可以定义成var $content=$(this).next()
            //$("div.content").hide();
            //$("#panel h5.heads").bind("click", function () {
            //    var $content = $(this).next();
            //    if ($content.is(":visible")) {
            //        $content.hide();
            //    } else {
            //        $content.show();
            //    }
            //});
            //改变绑定事件类型//简写绑定事件
            //$("div.content").hide();
            //$("#panel h5.heads").bind("mouseover", function () {
            //    $(this).next().show();
            //}).bind("mouseout", function () {
            //    $(this).next().hide();
            //});
            //合成事件 hover()方法用于模拟光标悬停事件，当光标移动到元素上时会触发指定的第一个函数 当光标移出这个元素的时候会触发指定的第二个函数 toggle()用于模拟鼠标连续单机事件，第一次单机元素，触发指定的第一个函数
            //$("div.content").hide();
            //$("#panel h5.heads").hover(function () {
            //    $(this).next().show();
            //},function()
            //{
            //    $(this).next().hide();
            //});
            //再次加强效果
            //$("#panel h5.heads").toggle(function() {
            //    $(this).addClass("highlight");
            //    $(this).next().show();
            //}, function() {
            //    $(this).removeClass("highlight");
            //    $(this).next().hide();
            //});
            //事件冒泡
            $('span').bind("click", function () {
                alert(123);
                var txt = $("#msg").html()+"<p>内层span元素被单机</p>";
                alert(txt);
                $("#msg").html(txt);
            });
            $("#content").bind("click", function () {
                var txt = $("#msg").html("<p>外层span元素被单机</p>");
                $("#msg").html(txt);
            });
            $("body").bind("click", function () {
                var txt = $("#msg").html("<p>body元素被单机</p>");
                $("#msg").html(txt);
            });
            //事件对象的属性
        });
    </script>
 <form id="form1" runat="server">
        <div>
        <div id="content">
            外层div元素
            <span>内层span元素</span>
            外层div元素
        </div>
        <div id="msg">1</div>
       <%-- <div style="border: 1px solid">
            <div id="panel">
                <h5 class="heads"   >什么事jQuery</h5>
                <div class="content">
                    adlfasdlf手动阀SD卡奥斯陆的卷发了三等奖为欧若破安分的那是咖啡哈桑的经费和可宽容阿罗汉啊打发客家话开大发肯德基
                </div>
            </div>
        </div>--%>
            </div>
    </form>

jquery练习

  <style>
        .level1 
        {

        }
    </style>
    <script src="script/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $().ready(function () {
        
        $(".level1>a").click(function () {
            $(this).addClass("Current")
                .next().show()
                .parent().siblings().children("a").removeClass("current")
                .net().hide();
            return false;
        });
        $("li").show("click");
        $(this).removeClass("mouseout")
            .addClass("mouseover")
            .stop()
            .fadeTo("fast", 0.6)
            .fadeTo("fast", 1)
            .unbind("click")
            .click(function(){
            }) ;
        });
    </script>
 <form id="form1" runat="server">
    <div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">短袖衬衫</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a href="#none">短袖卫衣</a></li>
                <li><a href="#none">短袖卫衣</a></li>
                <li><a href="#none">短袖卫衣</a></li>
                <li><a href="#none">短袖卫衣</a></li>
            </ul>
        </li>
         <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a href="#none">短袖裤子</a></li>
                <li><a href="#none">短袖裤子</a></li>
                <li><a href="#none">短袖裤子</a></li>
                <li><a href="#none">短袖裤子</a></li>
            </ul>
        </li>
    </ul>
    </div>
    </form>

Jquery对表单的操作

 <script type="text/javascript">
        $(function () {
            //获得焦点 市区焦点
            //$(":input").focus(function () {
            //    $(this).addClass("focus");
            //}).blur(function () {
            //    $(this).removeClass("focus");
            //});
            //高度变化
            //var $commnet = $("#content");
            //$(".bigger").click(function () {
            //    if ($commnet.height()<500) {
            //        //$commnet.height($commnet.height() + 50);
            //        $commnet.animate({ height: "-=50" }, 400);
            //    }
            //});
            //$(".small").click(function () {
            //    if ($commnet.height() > 50) {
            //        //$commnet.height($commnet.height() -50);
            //        $commnet.animate({ height: "+=50" }, 800);
            //    }
            //});
            //滚动条高度的变化
            //var $commnet = $("#content");
            //$(".up").click(function () {
            //    if (!$commnet.is(":animated")) {
            //        $commnet.animate({scrollTop:"-=50"},400);
            //    }
            //});
            //$(".down").click(function () {
            //    if (!$commnet.is(":animated")) {
            //        $commnet.animate({ scrollTop: "+=50" }, 400);
            //    }
            //});
        });
    </script>
    <style>
        /*input:focus,textarea:focus {
            border: 1px solid #f00;
            background-color: #fcc;
        }*/
        .focus {
            border: 1px solid #f00;
            background-color: #fcc;
        }
    </style>
  <form id="form1" runat="server">
        <fieldset>
            <legend>个人信息</legend>
            <div>
                <label for="username">名称：</label>
                <input type="text" id="username" />
            </div>
            <div>
                <label for="pass">密码：</label>
                <input type="password" id="pass" />
            </div>
            <div>
                <label for="msg">详细信息：</label>
                <textarea id="msg"></textarea>
            </div>
        </fieldset>

        <div class="msg">
            <div class="msg_caption">
                <span class="bigger">放大</span>
                <span class="small">缩小</span>
            </div>
            <div >
                <textarea id="content" rows="8" cols="20">
阿萨德飞老卡的阿德拉卡的拉客的劲儿啊地方的开发的老卡的付款阿拉丁发局领导收到了咖啡机
                    阿萨德飞老卡的阿德拉卡的拉客的劲儿啊地方的开发的老卡的付款阿拉丁发局领导收到了咖啡机
                    阿萨德飞老卡的阿德拉卡的拉客的劲儿啊地方的开发的老卡的付款阿拉丁发局领导收到了咖啡机
                    阿萨德飞老卡的阿德拉卡的拉客的劲儿啊地方的开发的老卡的付款阿拉丁发局领导收到了咖啡机
                    阿萨德飞老卡的阿德拉卡的拉客的劲儿啊地方的开发的老卡的付款阿拉丁发局领导收到了咖啡机
                    阿萨德飞老卡的阿德拉卡的拉客的劲儿啊地方的开发的老卡的付款阿拉丁发局领导收到了咖啡机
</textarea>
            </div>
        </div>
    </form>

Jquery表单验证插件

  <script type="text/javascript">
        //$(document).ready(function () {
        //    //$("#commentForm").validate({meta:"validate"});
        //    $("#commentForm").validate({
        //        rules: {
        //            username: {
        //                required: true,
        //                minlength: 2
        //            },
        //            email: {
        //                required: true,
        //                email: true
        //            },
        //            url: "url",
        //            comment: "required"
        //        },
        //        comment: "required",
        //        valcode: { formula: '7+9' }
        //    });
            
        //});
        $(function() {
            $(".btnok").click(function () {
                $('#basic-dialog-ok').modal();
            });
        });
    </script>
 <form class="cmxform" id="commentForm" method="get" action="">
        <fieldset>
            <legend>一个简单的验证带验证提示的评论例子</legend>
            <p>
                <label for="cusername">姓名</label>
                <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true,minilength:2,messages:{required:'请输入姓名',minilength:'请至少输入两个字符'}}}" />
            </p>
            <p>
                <label for="cemail">电子邮件</label>
                <em>*</em><input id="cemail" name="email" size="25" />
            </p>
            <p>
                <label for="curl">网址</label>
                <em></em>
                <input id="curl" name="url" size="25" value="" />
            </p>
            <p>
                <label for="valcode">验证码</label>
                <em></em>
                <input id="valcode" name="valcode" size="25" value="" />=7+9
            </p>
            <p>
                <label for="ccomment">你的评论</label>
                <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="提交" />
                <input type="button" class="btnok" value="确定"/>
            </p>
        </fieldset>
      
    </form>
      <div id="basic-dialog-ok">
            <!-- 普通弹出层 [[ -->
            <div class="box-title show">
                <h2>提示</h2>
            </div>
            <div class="box-main">
                <div class="tips">
                    <span class="tips-ico">
                        <span class="ico-ok">
                            <!-- 图标class可以为： ico-ok , ico-error , ico-info , ico-question , ico-warn , ico-wait -->
                        </span>
                    </span>
                    <div class="tips-content">
                        <div class="tips-title">申请成功，我们将短信通知您！</div>
                        <div class="tips-line"></div>
                    </div>
                </div>
                <div class="box-buttons">
                    <button type="button" class="simplemodal-close">关 闭</button>

                </div>
            </div>
            <!-- 普通弹出层 ]] -->
        </div>

jQuery

 <script type="text/javascript">
        $(function () {
            ////css-dom操作  与attr（）方法一样css（）也可以设置多个样式
            //$("p").css("color", "red");
            //$("p").css({ "fontSize": "30px", "backgroundColor": "#888888" });
            ////透明度使用
            //$("p").css("opacity", "0.5");
            //alert($("p").css("height"));
            //$("p").height(100);
            //offset()方法
            //var offset = $("p").offset();
            //alert(offset.left + "-" + offset.top);//获得左上偏移
            //position()方法
            //var position = $("p").position();
            //alert(position.left + "-" + position.top);
            //scrollTop()和scrollLeft()方法 获取元素的滚动条距顶端和左侧的距离
            //var $p = $("p");
            //$("p").scrollTop(300)；
            //$("p").scrollLeft(300)；
            //alert($p.scrollTop() + "-" + $p.scrollTop());
            $("a.tooltip").mouseover(function (e) {
                //位置没有成功
                this.MyTitle = this.title;
                this.title = "";
                var tooltip = "<div id='tooltip'>" + this.MyTitle + "</div>";
                $("body").append(tooltip);
                var x = 10;
                var y = 20;
                $("#tooltip").css({
                    "top": (e.pageY+y)+"px" ,
                    "left": (e.pageX+x) + "px"
                }).show("fast");
            }).mouseout(function () {
                this.title = this.MyTitle;
                $("#tooltip").remove();
            });
        })
    </script>

 <form id="form1" runat="server">
    <div>   
        <p><a href="#" class="tooltip" title="这个是我的超链接提示1.">提示.1</a></p>
        <p><a href="#" class="tooltip"  title="这个是我的超链接提示2.">提示.2</a></p><br/>
        <p><a href="#" title="这个是我的超链接提示">自动提示1.</a></p><br/>
        <p><a href="#" title="这个是我的超链接提示">自动提示2.</a></p><br/>
    </div>
    </form>

JQuery 聊天室

<script type="text/javascript">
        $(function () {
            var timestamp = 0;
            updateMsg();
            $("#chatform").submit(function () {
                $.post("JQuery 聊天室.html",
                 {
                     message: $("#msg").val(),
                     name: $("#author").val(),
                     action: "postmsg",
                     time: timestamp
                 }, function (xml) {
                     $("#msg").val("");
                     addMessages(xml);
                 });
                return false;
            });
        });

        function updateMsg() {
            $.post(
                "JQuery 聊天室.html",
                {
                    time: timestamp
                },
                function(xml) {
                    $("#loading").remove();
                    addMessages(xml);
                });
            setTimeout("updateMsg()",4000);
        }
        function addMessages(xml) {
            if ($("status", xml).text() == "2") {
                return;
            }
            timestamp = $("time", xml).text();
            $("message".xml).each(function () {
                var author = $("author", this).text();
                var content = $("text", this).text();
                var htmlcode = "<strong>" + author + "</strong>:" + content + "<br/>";
                $("#messagewindow").prepend(htmlcode);
            });
        }
    </script>
  <div id="wrapper">
        <p id="messagewindow"><span id="loading">加载中……</span></p>
        <form id="chatform">
            姓名：<input type="text" id="author" size="50" /><br />
            内容：<input type="text" id="msg" size="50" /><br />
            <input type="submit" value="发送" />
        </form>
    </div>

jquery cookie

 <script src="script/jquery.js"></script>
    <script src="lib/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function() {
            var cookie_name = "username";
            if ($.cookie(cookie_name)) {
                $("#username").val($.cookie(cookie_name));
            }
            $("#check").click(function() {
                if (this.checked) {
                    $.cookie(cookie_name,$("#username").val(),{path:'/',expires:10});
                } else {
                    $.cookie(cookie_name,null,{path:'/'});
                }
            });
        });
    </script>
 <form id="form1" runat="server">
    <div>
    用户名：<input type="text" name="username" id="username"/><br/>
        <input type="checkbox" name="check" id="check"/>记住用户名
    </div>
    </form>