jQuery练习-JavaScript事件与事件对象
2013-03-04 15:39
357 查看
<%@ 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,
width: 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="width: 100px;
height: 100px; background: #000; padding: 50px">
</div>
<div onclick="openWin('http://www.fuyin.tv')" id="inSide" style="width: 100px;
height: 100px; background: #CCC">
</div>
<div onclick="openWin('http://www.zanmeishi.com')" id="Div3" style="width: 100px; height: 100px;
background: #000; padding: 50px">
<div onclick="openWin('http://www.fuyin.tv')" id="Div4" style="width: 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; width: 300px; height: 100px;">
<div style="text-align: center;">
弹出层</div>
</div>
<div class="ui-widget ui-widget-content ui-corner-all" style="width: 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="width: 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="width: 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="width: 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript练习:8-7设置对象事件的方法
- JavaScript之jQuery-10 T-Query(T-Query、基本选择器、T-Query对象、操作方法、创建元素、事件绑定)
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
- javascript事件之：jQuery事件中实例对象和拓展对象之间的通信
- JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)
- javascript jquery插入元素后事件会被注销
- js 与 jquery 事件对象 比较(转)
- jQuery 对象与 JavaScript DOM 对象
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
- JavaScript 事件对象Event的工具类
- JavaScript第六章知识点总结——JavaScript常用DHTML对象 Document相关对象 事件处理
- JQuery一个对象绑定多个事件
- 在JavaScript中重写jQuery对象的方法实例教程
- jquery对象和javascript对象即DOM对象相互转换
- jquery技巧总结-jQuery对象,集合,方法扩展,事件处理,特效,解决冲突
- JQuery 事件对象的属性与方法
- jQuery入门（3）事件与事件对象
- jquery 根据样式获取对象子元素的第一个并添加触发事件
- 一个实用的 Javascript XML to JSON Object 对象的转换 （JQuery）
- jquery对象和javascript对象相互转换