<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="text2.aspx.cs" Inherits="Jquery_t.text2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>

    <script  type="text/javascript">

        $(document).ready(function () {

            var x = 10;

            var y = 20;

            var $mytitle = "";

            $("#biaoji").mouseover(function (event) {

                $mytitle = this.title;

                this.title = "";

                //var tooltip = "<div id='tooltip'>" + $mytitle + "</div>";

                var tooltip = "<div id='tooltip'><img src='Images/2.jpg' />"+"<br/>"+$mytitle+"</div>";

                $("body").append(tooltip);

                $("#tooltip").css

                (

                    {

                        "top": (event.pageY+y) + "px",

                        "left": (event.pageX+x) + "px"

                    }

                ).show("fast");

            }).mouseout(function () {

                $("#tooltip").remove();

                this.title = $mytitle;

            }).mousemove(function (e) {

                $("#tooltip").css

                ({

                        "top": (event.pageY+y) + "px",

                        "left": (event.pageX+x) + "px"

                });

            });

            $("#content").hide();//隐藏div

            //绑定click事件,如果id为的content的内容为空则让它显示，否则就隐藏

            //$("h3").bind("click", function () {

            //    if ($("#content").is(":visible")) {

            //        $(this).next("div #content").hide();

            //    }

            //    else {

            //        $(this).next("div #content").show();

            //    }

            //});

            //下面这个hover是jquery的合成事件，光标划进和划出分别会执行的两个函数，还有一个合成函数是toggle，是点击

            $("h3").hover(function () {

                  $(this).next("div #content").show(3000);

               }, function(){

                  $(this).next("div #content").hide(3000);

               })

            //toggle里面可以有多个方法，会依次执行完，然后重新开始执行第一次，如此循环

            $("h3").toggle(function () {

                alert("第一次哦！");

            }, function () {

                alert("第二次哦！");

            }, function () {

                alert("第三次哦！");

            }, function () {

                alert("第四次哦！");

            });

            //id为btn的按钮绑定了一个myclick的自定义事件,s1,s2两个自定义参数

            $("#btn").bind("myclick", function (event,s1,s2) {

                alert("my 自定义事件");

                $("body").append("<p>" + s1 + s2 + "</p>");

                //$("#content1").toggle();

            })

            //页面加载完之后自动触发事件

            //$("#btn").trigger("myclick",["下雨","刮风"]);

            $("#bigger").click(function () {

                if (!$("bigtext").is(":animated")) {//判断是否处于动画

                    if ($("#bigtext").height() < 500) {

                        $("#bigtext").animate({ height: "+=50" }, 400);//scrolltop这里属性可以控制多行文本框的滚动条的位置

                    }

                }

        });

            $("#smaller").click(function () {

                if (!$("bigtext").is(":animated")) {

                    if ($("#bigtext").height() > 50) {

                        $("#bigtext").animate({ height: "-=50" }, 400);

                    }

                }

        });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <p><a href="#" id="biaoji" title="我的标记">标dsadsadsadsadas记</a></p>

    </div>

        <div id="content1" style="border: thin double #800000; background-color: #FFFFFF; width: 300px; height: 200px;" >

            <h3>what it's this?</h3>

            <div id="content"  style="border-style: double none none none; border-width: thin; border-color: #800000; background-color: #FFFFFF; " >

                this's jQuery,a funtastic javascript tool<br/>

                this's jQuery,a funtastic javascript tool<br/>

                this's jQuery,a funtastic javascript tool<br/>

                this's jQuery,a funtastic javascript tool<br/>

                this's jQuery,a funtastic javascript tool<br/>

            </div>

        </div>

        <input type="button" id="btn" value="button" /><br/>

        <span id="bigger">bigger</span>

        <span id="smaller">smaller</span>

        <div>

            <textarea id="bigtext" rows ="8" cols ="20">

                wewewewewewewewewewe

                ewwewewewewewewewewe

                ewwewewewewewewewewe

                ewwewewewewewewewewe

                ewwewewewe

                ewwewewewe

            </textarea>

        </div>

    </form>

</body>

</html>










<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="text3.aspx.cs" Inherits="Jquery_t.text3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript" >

        $().ready(function () {

            $("#add").click(function () {//把左边的选中项添加到右边

                var $option = $("#select1 option:selected");

                $option.remove().appendTo("#select2");

            });

            $("#add_all").click(function () {//把左边的全部项添加到右边

                var $option = $("#select1 option");

                $option.remove().appendTo("#select2");

            });

            $("#select1").dblclick(function () {//左边的选中项双击添加到右边

                var $option = $("#select1 option:selected");

                $option.remove().appendTo("#select2");

            });

            $("#remove").click(function () {

                var $option = $("#select2 option:selected");

                $option.remove().appendTo("#select1");

            });

            $("#remove_all").click(function () {

                var $option = $("#select2 option");

                $option.remove().appendTo("#select1");

            });

            $("#select2").dblclick(function () {

                var $option = $("#select2 option:selected");

                $option.remove().appendTo("#select1");

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <div  style="top:100px;left:100px;width :200px;">

        <select multiple id="select1" style="width:100px;height:160px">

            <option value="1">一号</option>

            <option value="2">二号</option>

            <option value="3">三号</option>

            <option value="4">四号</option>

            <option value="5">五号</option>

            <option value="6">六号</option>

            <option value="7">七号</option>

            <option value="8">八号</option>

        </select>

        <div style="top:100px;left:300px;">

            <span id="add">选中项添加到右边&gt;&gt;</span><br/>

            <span id="add_all">全部添加到右边&gt;&gt;</span>

        </div>

    </div>

        <div  style="top:100px;left:300px;width :200px;">

            <select multiple id="select2" style="width:100px;height:160px;">

            </select>

            <div style="top:100px;left:300px;">

                <span id="remove">&lt;&lt;选中项移到左边</span><br/>

                <span id="remove_all">&lt;&lt;全部移到左边</span>

            </div>

        </div>

    </div>

    </form>

</body>

</html>






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test4.aspx.cs" Inherits="Jquery_t.test4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        .right {

            color:green;

        }

        .wrong {

            color:red;

        }

    </style>

    <script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var err="";

            $("form :input").blur(function () {

                var $parent = $(this).parent();

                $parent.find(".right").remove();//移除添加上去的提示，按照class查找

                $parent.find(".wrong").remove();

                if($(this).is("#username"))

                {

                    if (this.value == "" || this.value.length < 6) {

                         err = "请至少输入6位的用户名";

                        $parent.append("<span class='wrong'>" + err+ "</span>");

                    }

                    else {

                        $parent.append("<span class='right'> " + "用户名输入成功" + "</span>");

                    }

                }

                if ($(this).is("#email"))

                {

                    if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {

                         err = "请输入正确的邮箱";

                        $parent.append("<span class='wrong'>" + err + "</span>");

                    } else {

                        $parent.append("<span class='right'> " + "邮箱输入成功" + "</span>");

                    }

                }

            });

            $("#send").click(function () {

                if (err !="" || $("#username").attr("value") == "" || $("#email").attr("value")=="" )//判断错误值是否为空，还有用户名和邮箱是否为空

                {

                    return false;

                }

                alert("成功！");

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <label for="username">用_户_名：</label>

            <input type="text" id="username" />

        </div>

        <div>

            <label for="email">邮____箱：</label>

            <input type="text" id="email" />

        </div>

        <div>

            <label for="personinfo">个人资料：</label>

            <input type="text" id="personinfo" />

        </div>

        <div>

            <input type="submit" value="提交" id="send" />

            <input type="reset" id="res" />

        </div>

    <div>

    </div>

    </form>

</body>

</html>






<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    <div>

        已有评论：

    </div>

    <div>

        <h5>张三;</h5>

        <p>沙发</p>

    </div>

    <div>

        <h5>李四;</h5>

        <p>板凳</p>

    </div>

    <div>

        <h5>王五;</h5>

        <p>桌子</p>

    </div>

</body>

</html>







<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajax_test1.aspx.cs" Inherits="Jquery_t.ajax_test1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript">

        $().ready(function () {

            $("#send").click(function () {

                $("#load_text").load("ajax_test.html");

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <input type="button" id="send" value="Ajax获取" />

        <div id="load_text"></div>

    </div>

    </form>

</body>

</html>




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="Jquery_t.test1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script  type ="text/javascript" src="../Scripts/jquery-1.8.2.js" ></script>

    <script  type ="text/javascript" >

$(document).ready(function(){

$("button").click(function(){

    $("p").hide();

    $(".panel").slideToggle(100);

});

$("#sure").click(function () {

    if ($("#sure").is(":checked"))

    {

        alert("感谢您的支持.");

    }

})

$("#selectall").click(function () {//全选控制单选

    $('[name=items]:checkbox').attr("checked", this.checked);//把所有的checkbox的checked状态都等于这个全选的状态

});

    //属性name等于items的checkbox元素

$('[name=items]:checkbox').click(function () {//单选控制全选

    var $temp = $('[name=items]:checkbox');//把所有单选的checkbox保存到变量，避免使用同一个选择器变量，提高程序运行的效率

    $("#selectall").attr('checked', $temp.length == $temp.filter(':checked').length);//attr('checked',true/false)原型

})

    //过滤表格里行的文本内容

$("#filter").keyup(function () {

    $("table tbody tr")

        .hide()

        .filter(":contains('" + ($("#filter").val()) + "')")

        .show();

});

var $cat = $('ul li:gt(5):not(:last)');

$cat.hide();

//$("#more").click(function () {

//    if ($cat.is(":visible")) {

//        $cat.hide();

//    }

//    else {

//        $cat.show();

//    }

    //});

    //上面注释的方法和这个是等价的，下面的toggle这种方式，会切换的执行下面两个函数

$("#more").toggle(function () {

    $cat.hide();

},

    function() {

        $cat.show();

    }

);

    //当idweiaddress的文本框得到焦点时，如果文本框的内容是“请输入地址”，则把文本框的值置为空

$("#address").focus(function () {

    var $vall = $(this).val();

    if ($vall == "请输入地址")

    {

        $(this).val("");

    }

});

    //当id为address的文本框失去焦点时触发，如果文本框的内容为空，则把文本框的值置为“请输入地址”

$("#address").blur(function () {

    var $vall = $(this).val();

    if ($vall == "")

    {

        $(this).val("请输入地址");

    }

})

$("#address").css("color", "#ff00cc");

$("#address").css("opacity", "0.4");

    //单机li元素会在ul尾部插入li元素的复制品

//$("ul li").click(function () {

//    $(this).clone().appendTo("ul");

    //});

$("#panel").toggle(function () {

    $(this).animate({ left: "500px",height:"200px" ,top:"300px"}, 3000);

    },function(){

        $(this).animate({ left: "10px", height: "-=100px" ,top:"100px"}, 3000,function(){$(this).css("background" ,"#ffcc33");});

});

});

    </script>

    <title></title>

    <style type="text/css">

 #panel{

       position:relative;

       width:100px;

       height:100px;

       border:1px solid #66a997;

       background :#ff0000;

       cursor:pointer;

}

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <h2>This is a heading</h2>

    <p>This is a paragraph.</p>

    <p>This is another paragraph.</p>

    <button type="button">Click me</button>

    <div>

        <input  type ="checkbox" id="sure" /><label for="sure" >我已经阅读完上面的规章制度了.</label>

    </div>

    </div>

        <div class="panel">

    <p>W3School - 领先的 Web 技术教程站点</p>

    <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

    </div>

        <div>

            <input type ="checkbox" id="selectall" />全选/全不选<br />

             <input type ="checkbox" name="items" value ="足球" />足球

             <input type ="checkbox" name="items" value ="篮球" />篮球

             <input type ="checkbox" name="items" value ="网球" />网球

             <input type ="checkbox" name="items" value ="羽毛球" />羽毛球

             <input type ="checkbox" name="items" value ="乒乓球" />乒乓球

        </div>

        <div>

<br/>

筛选：

<input id="filter" />

<br/>

</div>

        <div>

<table>

    <thead>

        <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>

    </thead>

    <tbody>

        <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

        <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>

        <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>

        <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>

        <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>

        <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

        <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>

        <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>

        <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>

    </tbody>

</table>

         </div>

        <div>

            <ul>

                <li>bmw<i>2333</i></li>

                <li>benz<i>2333</i></li>

                <li>aodi<i>2333</i></li>

                <li>suzuki<i>2333</i></li>

                <li>luhu<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

                <li>sony<i>2333</i></li>

            </ul>

        </div>

        <input type ="button" id="more" value ="more"  />

        <input type="text" id="address" value="请输入地址" />

        <div id="panel"></div>

    </form>

</body>

</html>


												


											
jquery - 实例1的更多相关文章
	

    
						
  1. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined
		
    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...
    
		
    2. 
						
  2. 值得 Web 开发人员学习的20个 jQuery 实例教程
		
    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
    
		
    3. 
						
  3. jQuery使用（十一）：jQuery实例遍历与索引
		
    each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...
    
		
    4. 
						
  4. 基础 jQuery 实例
		
    基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...
    
		
    5. 
						
  5. 三种动态加载js的jquery实例代码另附去除js方法
		
    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
    
		
    6. 
						
  6. JSON和JSONP （含jQuery实例）（share）
		
    来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...
    
		
    7. 
						
  7. jQuery实例属性和方法
		
    jQuery.fn = jQuery.prototype = {  //添加实例属性和方法   jquery : 版本   constructor : 修正指向问题   init() : 初始化和参数 ...
    
		
    8. 
						
  8. JSONP 含jquery 实例
		
     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...
    
		
    9. 
						
  9. 【前端】:jQuery实例
		
    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...
    
		
    10. 
						
  10. :jQuery实例【DEMO】
		
    前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面:   二. ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. URL 编码规则
			
    规则: 1.将空格转换为加号(+) 2.对0-9.a-z.A-Z之间的字符保持不变 3.对于所有其他的字符,用这个字符的当前当前字符集编码在内存中的十六进制格式表示,并在每一个字节前加上一个百分号(% ...
    
			
    2. 
						
  2. [2018国家集训队][UOJ449] 喂鸽子 [dp+组合数学]
			
    题面 传送门 思路 首先,这道题是可以暴力min-max反演+NTT做出来的......但是这个不美观,我来讲一个做起来舒服一点的做法 一个非常basic的idea:我们发现在一只鸽子吃饱以后再喂给它 ...
    
			
    3. 
						
  3. 洛谷 P3521 [POI2011]ROT-Tree Rotations 解题报告
			
    P3521 [POI2011]ROT-Tree Rotations 题意:递归给出给一棵\(n(1≤n≤200000)\)个叶子的二叉树,可以交换每个点的左右子树,要求前序遍历叶子的逆序对最少. 大体 ...
    
			
    4. 
						
  4. [CodeVs1227]方格取数2(最大费用最大流)
			
    网络流24题的坑还没填完,真的要TJ? 题目大意:一个n*n的矩阵,每格有点权,从(1,1)出发,可以往右或者往下走,最后到达(n,n),每达到一格,把该格子的数取出来,该格子的数就变成0,这样一共走 ...
    
			
    5. 
						
  5. adb 进入 recovery adb 进入 bootloader
			
    重启到Recovery界面 adb reboot recovery重启到bootloader界面 adb reboot bootloader adb wait-for-device #等待设备 adb ...
    
			
    6. 
						
  6. mysql jdbc 连接url
			
    jdbc url连接地址格式: jdbc:mysql://[host][,failoverhost...][:port]/[database] [?propertyName1][=propertyVa ...
    
			
    7. 
						
  7. [lottery anayliser]lottery anayliser
			
    抓取网页,获得获奖信息 #!/usr/bin/python import urllib2 import re import time def spider(url): ""&quo ...
    
			
    8. 
						
  8. dns随笔(部分转载)
			
    1.allow-notify allow-notify 定义了一个匹配列表并且只应用于从dns区域(slave zone),比如,这个列表是一个ip列表,它 2. 触发同步的过程 http://www ...
    
			
    9. 
						
  9. Moodle安装图解
			
    Moodle安装图解 一．    Moodle运行环境搭建 Moodle主要是在Linux上使用Apache, PostgreSQL/MySQL/MariaDB及 PHP 开发(LAMP平台). 1. ...
    
			
    10. 
						
  10. 让ie8、ie9支持媒体查询
			
    <!-- 让IE8/9支持媒体查询,从而兼容栅格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfi ...
    
			
    11.