<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SpringDemo.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>JavaScript事件与事件对象</title> <style type="text/css"> .outer { background-color: Red; } .inner { background-color: Green; } </style> <script src="JS/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> function showMsg() { alert('Hi!!!'); } //$(function () { //点击之后才会执行 //document.getElementById("div2").onclick = showMsg; //页面加载即执行，点击后却无效了，但是上下调换位置(把上面不带括号的换下来之后)又会执行了。 //document.getElementById("div2").onclick = showMsg(); //}); // $("#div2").bind("click", showMsg); // $("#div2").bind("click", function () { alert('Emmanuel!!!'); }); // $("#div2").bind("click", function (event) { alert("one"); }); // $("#div2").bind("click", function (event) { alert("two"); }); // $("#div2").bind("click", function (event) { $(this).text(); }); // $("#div2").one("click", showMsg); // $("#div2").one("click", function () { alert('Emmanuel!!!'); }); // $("#div2").one("click", function (event) { alert("one"); }); // $("#div2").one("click", function (event) { alert("two"); }); // $("#div2").one("click", function (event) { $(this).text(); }); // $("#div2").click(function (event, a, b) { // }).trigger("click", ["a", "b"]); // function handler(event) { // alert(event.data.foo); // }; // $("#div2").bind("click", { foo: "bar" }, handler); // $("#div2").bind("click", function (event) { alert($(event.target).attr("emmanuel")); }); // $("#div2").bind("click", { emmanuel: "amen" }, function (event) { alert($(event.data.emmanuel)); }); // $("#div2").one("click", { foo: "bar" }, handler); // $("#div2").one("click", function (event) { alert($(event.target).attr("emmanuel")); }); // $("#div2").one("click", { emmanuel: "amen" }, function (event) { alert($(event.data.emmanuel)); }); // $(function () { // $("#old").click(function () { // $("#divResult").html(""); // $("input").trigger("focus"); // }); // $("#new").click(function () { // $("#divResult").html(""); // $("input").triggerHandler("focus"); // }); // $("input").focus(function () { // $("<span>Focused!</span>").appendTo("#divResult"); // }) // $("#old").click(); // $("#old").trigger("click"); //与上面等效 // $("#new").click(); // $("#new").trigger("click"); //与上面等效 // }) // function report(event) { // $("#console").append('<div>' + event.type + '</div>'); // } // $(function () { // $("#outer1").bind("mouseover", report).bind("mouseout", report); // $("#outer2").hover(report, report); // }) // $(function () { // $("li").toggle( // function () { // $(this).css({ "list-style-type": "disc", "color": "red" }); // }, // function () { // $(this).css({ "list-style-type": "square", "color": "yellow" }); // }, // function () { // $(this).css({ "list-style-type": "none", "color": "green" }); // } // ); // }) // $("li").click(function (event) { // alert(event.type); // }); // $("a[href=http://www.zanmeishi.com]").click(function (event) { // alert(event.target.href); // }); // $("a").each(function (i) { // $(this).bind("click", { index: i }, function (e) { // alert('Current Index is:' + e.data.index); // alert('Current Mouse X Position:'+e.pageX+',Current Mouse Y Position:'+e.pageY); // }); // }); // $("#div2").html($.toJson($("form").serializeArray())); // $(function () { // $("div2").bind("click", function (event) { // $.get("../data/AjaxGetMethod.aspx"); // }); // $("div2").ajaxComplete(function (evt, request, settings) { $(this.append("<div>ajaxComplete</div>")) }); // }) //本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。 //其实在实际设计中较少遇到此问题，你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。 function openWin(url) { window.open(url); } //设置全局默认options对象 $(function () { $.ajaxSetup({ url: "../data/AjaxGetMethod.aspx", data: { "param": "gawking" }, global: false, type: "post", success: function (data) { $("#div2").html(data); } }); //设置弹出层显示和隐藏速度 var speed = 500; $("#spShow").click(function (event) { //取消事件冒泡，以免重复调用 event.stopPropagation(); //获取目标按钮的位移，可便于以下用来取得按钮上端和左端离页面顶端和左端的距离 var offset = $(event.target).offset(); //设置弹出层的显示位置：按钮离页面顶端的高度+按钮本身的高度正好是弹出层的顶端出现位置， //弹出层离页面左边的距离正好等于按钮离左边的距离 $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //按设定速度弹出该层，然后弹出消息 $("#divPop").show(speed); //$("#divPop").show(speed, function (event) { alert("hi!Emmanuel！！"); }); $("#divPop").toggle(speed); //$("#divPop").toggle(speed, function (event) { alert("hi!Emmanuel！！"); }); $("#divPop").slideDown(speed); //$("#divPop").slideDown(speed, function (event) { alert("hi!Emmanuel！！"); }); $("#divPop").slideUp(speed); //$("#divPop").slideUp(speed, function (event) { alert("hi!Emmanuel！！"); }); $("#divPop").slideToggle(speed); //$("#divPop").slideToggle(speed, function (event) { alert("hi!Emmanuel！！"); }); $("#divPop").fadeIn(2000); $("#divPop").fadeOut(2000); $("#divPop").show(speed); $("#divPop").fadeTo(2000, 0.66); $("spStop").click(function () { $("#divPop").stop(); }); $("#divPop").animate( { "opacity": "hide", "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top }, 600, function () { $("#divPop").hide(); } ); jQuery.fx.off = true; $("#divPop").show(1000); }); $("#divPop").animate( { "opacity": "hide", "width": $(window).width() - 100, "height": $(window).height() - 100 }, 500 ); //点击空白区域按照设定速度隐藏弹出层 $(document).click(function (event) { $("#divPop").hide(speed); }); //点击弹出层自身隐藏 $("#divPop").click(function (event) { $(this).hide(speed); }); }); /*==========用户自定义方法==========*/ /*==========事件绑定==========*/ $(function () { //静态提示类弹出层 $("span[id^=spanShowTip]").css("cursor", "pointer").click(function (event) { $("*").stop(); event.stopPropagation(); var top = $(event.target).offset().top + 20; var left = $(event.target).offset().left; $("#divTip").dialog("option", "position", [left, top]); $("#divTip").dialog("open"); }); //动态提出类弹出层 $("span[id^=spanShowDataTip]").css("cursor", "pointer").click(function (event) { $("*").stop(); $("#divTip").dialog("close"); event.stopPropagation(); var top = $(event.target).offset().top + 20; var left = $(event.target).offset().left; $("#divTip").html($(event.target).attr("data")); $("#divTip").dialog("option", "position", [left, top]); $("#divTip").dialog("open"); }); //遮罩类弹出层 $("#btnShowIframe").click(function (event) { event.preventDefault(); event.stopPropagation(); $("#divIframe").dialog("open"); }); //单击自身取消冒泡 $("#divTip, #divIframe").bind("click", function (event) { event.stopPropagation(); }); //document对象单击隐藏所有弹出层 $(document).bind("click", function (event) { $("#divTip").dialog("close"); $("#divIframe").dialog("close"); }); }); /*==========加载时执行的语句==========*/ $(function () { //初始化提示类弹出层 $("#divTip").dialog({ show: null, bgiframe: false, autoOpen: false }); //初始化遮罩类弹出层 $("#divIframe").dialog({ show: null, bgiframe: false, autoOpen: false, 500, height: 300, draggable: true, resizable: false, modal: true }); }); $("#things1").bind("click.editMode", OtherListener); $(":checkbox:checked:enabled").addClass("ClassName") $("img").each(function (n) { this.alt = "I'm the [" + n + "] img"; }); var ary = new Array(); $("img").each(function () { ary.push(this.alt); }); $("#img1").attr("imgClass"); $("*").attr("title", function (n) { return "I'm the [" + n + "] control!"; }); $("input").attr({ title: "I'm here", value: "3333" }); //筛选以“http://”开头的链接指定到空白页面 $("a[href^='http://']").attr("target", "_blank"); //表单提交过后禁止重复提交，选择器筛选提交控件（比如button）进行禁用 $("form").submit(function () { $(":submit",this).attr("disabled","disabled"); }); //给每行添加样式 function swap() { $("tr").toggleClass("striped"); } $("div.expentable").css("width", function () { return $(this).width() + 20 + "px"; }); $("div.expentable").width(150); $("div.expentable").css("width", "150px"); function report() { $("#div").html( $("#div1").width() + "X" + $("div2").height() ); } //判断第一个段落是否拥有某个样式类 $("p:first").hasClass("expentable"); $("p:first").is(".expentable"); //获取第一个段落的样式类，并按照空格来分割 $("p:first").attr("class").split(" "); //在段落后面追加内容 $("p").append("<h1>追加内容<h1>"); //在段落前面追加内容 $("p").prepend("<h1>追加内容<h1>"); //在样式类为pClass的段落后面追加样式类为aClass的链接； $("p.pClass").append($("a.aClass")); //在样式类为pClass的段落前面追加样式类为aClass的链接； $("p.pClass").prepend($("a.aClass")); //targets的每个段落后追加flower,相当于复制 $("#flower").appendTo("#targets p"); //targets的每个段落前追加flower,相当于复制 $("#flower").prependTo("#targets p"); //targets的第一个段落后追加car，相当于移动 $("#car").appendTo("#targets p:first"); //targets的第一个段落前追加car，相当于移动 $("#car").prependTo("#targets p:first"); //其他还有before,insertBefore，after，insertAfter //在每个段落的图片后面追加一段文字段落 $("<p>I'm here!</p>").insertAfter("p img"); //往一个没有内容的样式类为amen的div里包进一个样式类为aClass的链接 $("a.aClass").wrap("<div class='amen'></div>"); //疑问：不理解为什么有了first，还要[0]，是语法使然么？ $("a.aClass").wrap($("div:first")[0]); //样式类为dElement的div后追加段落，然后删除这个div元素 $("div.dElement").after("<p>I'm p!</p>").remove(); //封装一个扩展包装集 $.fn.replaceWith(function (html) { return this.after(html).remove(); }); //调用被扩展过的包装集 $("div.dElement").replaceWith("<p>I'm p!</p>"); //克隆所有的图片元素追加到样式类为Photo的fieldset内 $("img").clone().appendTo("fieldset.Photo"); //获取名称为chk的单选按钮的值 $("[name=chk]:checked").val(); //匹配页面中控件值为1或2或3的单选或复选控件，然后选中它们； $("input,select").val(["1", "2", "3"]); //为页面图片元素绑定一个单击事件，弹出消息 $("img").bind("click",function(event) { alert("hi!"); }); //移除页面中的图片元素的单击事件 $("img").unbind("click"); //基数次点击图片imgToggle时改变其透明度为0.4，偶数时为0.6 $(function () { $("#imgToggle").toggle( function (event) { $(event.target).css("opacity", 0.4); }, function (event) { $(event.target).css("opacity", 0.6); }); }); $(":checked").click(function () { var checked = this.checked; $("div", $(this).parents("div:first")).css("display", checked ? "block" : "none"); $("input[type=text]", $(this).parents("div:first")) .attr("disabled", !checked) .css("color", checked ? "black" : "green") .val(1) .change() .each(function () { if (checked) this.focus(); }); }); $(function () { $("button").css("position", "left"); $("#apply").click(function () { $(this).show(); }); }) (function ($) { $.say = function (t) { alert("到了下车！这话他们不明白，意思乃是隐藏的：" + t); } })(jQuery); $(function () { $("#btnTestButton").click(function (event) { var slt = $("#sltTestSubject")[0]; slt.add( new option("2½", "2.5"), $.browser.msie ? 2 : slt.options[2] ); }); }) //就绪处理函数 jQuery(function ($) { alert("Jesus Christ said that:'I'm comming soon!'"); }); var $ = "Emmanuel!"; jQuery(function () { alert("$:" + $); }); jQuery(function ($) { alert("$:" + $); }); $.trim($("#someField").val()); $("#someField").val($.trim($("#someField").val())); //循环读取数组每个元素，然后按照函数处理来输出其值 var noArray = ["1", "2", "3"]; $.each(noArray, function (n, value) { alert(n+":Hi!Emmanuel!"+value); }); var noArray = {one:1,two:2, three:3}; $.each(noArray, function (no, value) { alert(no + ":Hi!Emmanuel!" + value); }); //收集大于1的数字重新组合数组，结果为["2","3"],{two:2,three:3} $.grep(noArray, function (value) { return value <= 1; }, true); //收集大于1的数字重新组合数组，结果为["2","3"],{two:2,three:3} $.map(noArray, function (value) { return value > 1; }, true); //收集是数字的重新组合成数组，结果为["1", "2", "3", "4", "6"] var strings = ["1", "2", "3", "4", "S", "6"]; var values = $.map(strings, function (value) { var no = new Number(values); return isNaN(no) ? null : no; }); //收集按照空格分隔的单个字母元素，重新组合成数组，结果为：["G","o","d","L","o","v","e","s","T","h","e","","W","o","r","l","d"] var strArray = ["God","Loves","The World"]; var string = $.map(strArray, function (value) { return value.split(' '); }); //返回第一个值在第二个值（数组）中出现的索引，结果为1 var index = $.inArray(2, [1, 2, 3, 4, 5]); //收集表单中的图片元素组合成数组 var imgsArray = $.makeArray("img"); //var value = $.unique(DOM数组); var target = { a: 1, b: 2, c: 3 }; var source1 = { c: 4, d: 5, e: 6 }; var source2 = { e: 7, f: 8, g: 9 }; //将source1，source2追加到target后面（相同字母取优先级高的值,后面的覆盖前面的），扩展出一个新的数组 $.extend(target, source1, source2); $(function () { $("#loadButton").click(function () { $.getScript("stuff.js", function () { $("#inspectButton").click(); }); }); $("#inspectButton").click(function () { //.... }); }) //自定义工具函数 (function ($) { $.say(function (value) { alert("I say:"+value); }) })(jQuery); (function ($) { $.fn.makeItBlue = function (value) { return value.css("color","blue"); } })(jQuery); (function ($) { $.fn.setReadOnly = function (readonly) { return this.filter("input.text") .attr("readonly", "readonly") .css("opacity", readonly ? 0.5 : 1.0); } })(jQuery); $(function () { $("#divPhoto img").photomatic({ photoElement: "#photoElement" //.. }); }); //带着数组参数向test.jsp发送get请求，返回到回调函数里弹出消息 $(function () { $("#btnTest").click(function () { $.get( "test.jsp", { a: 1, b: 2, c: 3 }, function (data) { alert(data); } ); }); }); $(function () { $("#styleDroppDown").change(function () { var styleValue = $(this).val(); $("#styleDisplay").load( "getDetails.jsp", { style: styleValue } ); adjustColorDropdown(); }).change(); $("#colorDropdown").change(adjustSizeDropdown); }) function adjustColorDropdown() { var styleValue = $("#styleDropdown").val(); var dropdownSet = $("#colorDropdown"); if (styleValue.length == 0) { dropdownSet.attr("disabled", true); dropdownSet.emptySelect(); adjustSizeDropdown(); } else { dropdownSet.attr("disabled", false); $.getJSON( "getColors.jsp", { style: styleValue }, function (data) { dropdownSet.loadSelect(data); adjustSizeDropdown(); } ); } } function adjustSizeDropdown() { var styleValue = $("#styleDropdown").val(); var colorValue = $("#colorDropdown").val(); var dropdownSet = $("#sizeDropdown"); if (styleValue.length == 0 || colorValue.length == 0) { dropdownSet.attr("disabled", true); dropdownSet.emptySelect(); } else { $.getJSON( "getColors.jsp", { style: styleValue, color: colorValue }, function (data) { dropdownSet.loadSelect(data); } ); } } $.fn.emptySelect = function () { return this.each(function () { if (this.name = "select") this.options.length == 0; }); } $.fn.loadSelect = function (optionsDataArray) { return this.emptySelect().each(function () { if (this.tagName = "select") { var selectElement = this; $.each(optionsDataArray, function (index, optionData) { var option = new Option(optionData.caption, optionData.value); if ($.browser.msie) { selectElement.add(option); } else { selectElement.add(option,null); } }); } }); } $.ajaxSetup({ type: "post", timeout: 5000, datatype: "html", error: function (xhr) { $("#errDiaplay").html("Error:"+xhr.status+" "+xhr.statusText); } }); </script> </head> <body> <form id="form1" runat="server"> <%--<div id="div1" onclick="showMsg();"> 单击事件1 </div> <div id="div2" emmanuel="amen"> 单击事件2 </div> <button id="old"> .trigger("focus")</button> <button id="new"> .triggerHandler("focus")</button><br /> <br /> <input type="text" value="To Be Focused" /> <div id="divResult"> </div> <div class="outer" id="outer1"> Outer 1 <div class="inner" id="inner1"> Inner 1</div> </div> <div class="outer" id="outer2"> Outer 2 <div class="inner" id="inner2"> Inner 2</div> </div> <div id="console"> </div> <ul> <li style="cursor: pointer">click me</li> </ul> <a id="aPraiseNet">赞美诗网</a> <div onclick="openWin('http://www.zanmeishi.com')" id="outSide" style=" 100px; height: 100px; background: #000; padding: 50px"> </div> <div onclick="openWin('http://www.fuyin.tv')" id="inSide" style=" 100px; height: 100px; background: #CCC"> </div> <div onclick="openWin('http://www.zanmeishi.com')" id="Div3" style=" 100px; height: 100px; background: #000; padding: 50px"> <div onclick="openWin('http://www.fuyin.tv')" id="Div4" style=" 100px; height: 100px; background: #CCC"> </div> </div>--%> <div> <br /> <br /> <span id="spStop">停止动画</span> <br /> <span id="spShow">显示提示文字</span> </div> kanyikanqiaoqiao<br /> <br /> <br /> <br /> <!-- 弹出层 --> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display: none; 300px; height: 100px;"> <div style="text-align: center;"> 弹出层</div> </div> <div class="ui-widget ui-widget-content ui-corner-all" style=" 700px; padding: 5px;"> <h3> Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3> <div> <span id="spanShowTip1">显示提示</span> <span id="spanShowTip2">显示提示</span> <span id="spanShowTip3">显示提示</span> <span id="spanShowTip4">显示提示</span> </div> </div> <br /> <br /> <!-- Demo 动态提示类弹出层 --> <div class="ui-widget ui-widget-content ui-corner-all" style=" 700px; padding: 5px;"> <h3> Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3> <div> <span id="spanShowDataTip1" data="颜色是红色">红色</span> <span id="spanShowDataTip2" data="颜色是绿色">绿色</span> </div> </div> <br /> <br /> <!-- Demo 遮罩类弹出层 --> <div class="ui-widget ui-widget-content ui-corner-all" style=" 700px; padding: 5px;"> <h3> Demo. 弹出IFrame </h3> <div> <input type="button" id="btnShowIframe" name="btnShowIframe" value="显示弹出层" /> </div> </div> <!-- 提示类弹出层 --> <div id="divTip" title="自定义标题"> <p> 弹出层</p> </div> <!-- 遮罩类弹出层 --> <div id="divIframe" title="iFrame弹出层" style="text-align: center;"> <iframe src="http://www.zanmeishi.com" width="450px" height="230px"></iframe> </div> <!--Demo. 可折叠的Tab --> <div id="tabs2" style=" 300px;"> <ul> <li><a href="#tabs2-1">One</a></li> <li><a href="#tabs2-2">Two</a></li> <li><a href="#tabs2-3">Three</a></li> </ul> <div id="tabs2-1"> <p> Tab1内容</p> </div> <div id="tabs2-2"> <p> Tab2内容</p> </div> <div id="tabs2-3"> <p> Tab3内容</p> </div> </div> <select id="sltTestSubject" multiple="multiple" size="5"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <div> <button type="button" id="btnTestButton">Click Me</button> </div> </form> </body> </html>