jquery
/*==========jquery基础=========*/
------------js和jquery互转--------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hello_jquery</title>
<meta name="author" content="Administrator" />
<style type="text/css">
.bg {
background: #f00;
color:#fff;
}
</style>
<!-- Date: 2013-01-15 -->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//目前是一个javascript的对象，对于该对象而言，无法使用jquery的方法
var hello = document.getElementById("hello");
//是js的对象，不能使用jquery的方法
// hello.css("color","#f00");
//使用$(xx)就可以把xx这个节点封装为jquery的节点
$(hello).css("color","#f00");
//每一个jquery节点都是一个数组，只要取出数组中的值，这个值就是js的节点，就只能用js的方法
//当转换为js节点之后，就无法使用jquery的方法，如果要使用jquery的方法在通过$()进行封装就可以了
($("li.abc")[0]).innerHTML = "abccdd";
var lis = $("#hello ul li");
for(var i=0;i<lis.length;i++) {
//目前的li是js的节点
var li = lis[i];
// li.innerHTML = "["+(i+1)+"]"+li.innerHTML;
//$(li)就变成了JQuery节点
//xx.html()读取内容，xx.html("abc")：把节点的内容完成替换
$(li).html((i+1)+"."+$(li).html());
}
});
</script>
</head>
<body>
<div id="hello">
<ul>
<li>aaaaaaaaaaaaa</li>
<li>vbbbbbbbbbbbb</li>
<li class="abc">ccccccccccccc</li>
<li>ddddddddddddd</li>
<li>eeeeeeeeeeeee</li>
</ul>
</div>
</body>
</html>
------------------jquery选择器----------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//取li中的所有a
//$("li a").css("color","#f00");
//取class为.myList这个标签的下一级标签li的下一级标签为a的节点
// $(".myList>li>a").css("color","#f00");
//去li的节点其中li中的href属性是以http://为开头
// $("a[href^='http://']").css("background","#00f").css("color","#fff");
//取.myList的ul中的包含有a标签的li标签
//$(".myList ul li:has('a')").css("background","#ff0");//
//获取页面中所有以pdf结尾的超级链接
// $("a[href$='pdf']").css("background","#ff0").css("color","#f00");
//取id为li1的下一个兄弟节点li,仅仅只会去一个节点,
//仅仅只会取相邻的节点，如果相邻的节点不是li就什么都取不出去
//$("#li1+li").css("background","#ff0");
//取id为li的下面的所有满足条件的兄弟节点
// $("#li1~li").css("background","#ff0");
// $("a[title]").css("color","#0f0");
//页面中最先匹配的某个元素
//alert($("li:first").html());
//页面中最后匹配的元素
//alert($("li:last").html());
//获取满足要求的第一个li
// $(".myList>li li:first-child").css("background","#f00");
//获取没有兄弟节点的ul
//alert($("ul:only-child").length);
});
</script>
</head>
<body>
<ul class="myList">
<li>
<a href="http://jquery.com">JQuery site</a>
<ul>
<li><a href="css1.txt" title="mycss">CSS1</a></li>
<li id="li1"><a href="css2.pdf" title="css2">CSS2</a></li>
<li><a href="css3.html" title="this is my">CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>
<li>JQuery also supports
<ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>
</body>
</html>
////////////////////////////////////高级选择器/////////////////////////////////////
此部分代码没有 0.0
////////////////////////////////////////包装集/////////////////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//获取tr的元素个数
//alert($("tr").length);
//当执行了get之后得到的结果是一个js的元素
//$($("tr").get(1)).css("color","#f00");
//判断id为abc的tr在包装集的位置
// alert($("tr").index($("tr#abc")));
//在表达式中通过,可以分割多个包装集，
//但是如果包装集太多，而且有时候可以变动的时候，使用这种方式就不好操作
//$("tbody tr:eq(2),tr#abc").css("color","#f00");
/*
* 可以为包装集使用add方法，可以将新加入的元素添加到包装集中
*/
// $("tbody tr:eq(2)").add("thead tr td:eq(2)")
// .add("tr td:contains('3')").css("color","#f00");
//not方法可以将包装集中的元素取消掉
//$("tr").not("tr#abc").css("color","#f00");
//获取tr中位置小于3的元素
//$("tr").filter("tr:lt(3)").css("color","#f00");
//获取tr中的1,3形成一个新的包装集，返回的值就是新的包装集
// $("tr").css("background","#00f").slice(1,3).css("color","#f00");
//从包装集的内部获取相应的元素，返回的值也是新包装集
//$("table").find("tr#abc").css("color","#f00");
//is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
//alert($("table").is("td:contains('用户')"));
//获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集
//$("tbody").children("tr:eq(3)").css("color","#f00");
//找到下一个子元素，只是一个元素，返回新包装集
// $("tr#abc").next().css("color","#ff0");
//找到下一个组兄弟元素，所有元素，返回新包装集
// $("tr#abc").nextAll().css("color","#0f0");
//parent仅仅只是返回上一级的div，返回新包装集
// $("#s1").parent("div").css("color","#0f0");
//返回所有满足条件的父类节点，返回新包装集
// $("#s1").parents("div").css("color","#f00");
//返回第3个tr的所有兄弟节点，返回新包装集
var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");
alert(a);
});
</script>
</head>
<body>
<div id="d1">
cdd
<div>
<span id="s1">abc</span>
</div>
</div>
<table width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
---------------------------深入包装集合以及链式编程-----------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//使用end可以返回上一个包装集
// $("tr:eq(2)").siblings("tr")
// .css("background","#00f").css("color","#fff")
// .end().css("background","#f00").css("color","#00f");
// $("#users tbody").clone().appendTo("#tus").find("tr:even").css("color","#f00")
// .end().end().find("tr:odd").css("color","#00f");
//andSelf表示把所有的包装集合并在一起
//$("#users tbody").clone().appendTo("#tus").andSelf().find("td:contains('3')").css("color","#f00");
//查询出了两个包装集，一个为tus的table一个为users的table，此时可以过滤得到users这个table
//无法使用filter(tr)
$("table").filter("table#users").css("color","#f00");
//从users这个id的元素中过滤tr为2的元素
$("#users").find("tr:eq(2)").css("background","#00f");
});
</script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
/**============map/each函数==========**/
----map--
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//$("tbody td:nth-child(1)").css("color","#f00");
/*
* 通过map可以有效的将某个包装集中的元素转换为数组
*/
var ps = $("tbody td:nth-child(1)").map(function(){
var n = $(this).next("td");
var p = {"id":$(this).html(),"name":n.html()};
return p;
}).get();
for(var i=0;i<ps.length;i++) {
alert(ps[i].name);
}
});
</script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
-----has---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//获取存在有ul的li，返回的是新包装集
$("li").has("ul").css("color","#f00");
$("div").has("span").css("color","#f00");
});
</script>
</head>
<body>
<div>
<span class="s1">ssssssssssssssssss</span>
</div>
<div>
<span>
2222222222222222222
</span>
</div>
<div>
<ul class="u1">
<li>aaaaaaaaaaaaa</li>
</ul>
</div>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>
<ul>
<li>cccccccc1</li>
<li>cccccccc2</li>
</ul>
</li>
<li>
dddddd
</li>
</ul>
</body>
</html>
------each1-----
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
var ns = $("tbody td:nth-child(2)");
/**
* 使用以下方法进行遍历基本上是基于js进行操作
* 对于jquery有自己的一套遍历方法，可以直接通过
* each函数进行遍历
*/
/*for(var i=0;i<ns.length;i++) {
var nn = ns[i];//nn已经是js的节点
var id = $(ns[i]).prev("td").html();
var age = $(ns[i]).next("td").html();
nn.innerHTML = id+">>"+nn.innerHTML+"("+age+")";
}*/
/**
* 对于JQuery而言，可以用each遍历所有的数组对象
* each中的匿名函数n表示的是数组的下标,从0开始
*/
ns.each(function(n){
$(this).html($(this).prev("td").html()+
"."+$(this).html()+
"("+$(this).next("td").html()+")");
});
});
</script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
------each2---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
var ids = $("tbody td:nth-child(1)");
var persons = ids.map(function(){
var idn = $(this);
var nexts = idn.nextAll();
var namen = $(nexts[0]);
var agen = $(nexts[1]);
var pwdn = $(nexts[2]);
var p = {"id":idn.html(),"name":namen.html(),"age":agen.html(),"password":pwdn.html()};
return p;
}).get();
$(persons).each(function(n){
alert(this.id+","+this.name+","+this.age+","+this.password);
});
});
</script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
/**========jquery设置属性=======**/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("tbody tr").each(function(n){
//使用attr只加入一个参数可以获取属性值
//alert($(this).attr("id"));
//通过attr()设置两个参数，可以完成对某个节点的属性的设置
// $(this).attr("title",$(this).children("td:eq(1)").html());
//可以基于json的格式来设置属性,甚至可以设置一些非html的属性，通过这些属性来做一些特殊处理
//但是设置特殊属性的这种方式在jquery1.4之后就基本不使用，因为在1.4之后提供data方法
$(this).attr({
"title":$(this).children("td:eq(1)").html(),
"id":$(this).children("td:eq(0)").html(),
"personId":n
});
//可以移除属性
// $("tr#2").removeAttr("personid");
});
});
</script>
</head>
<body>
<a href="jquery_basic01.html">basic01</a>
<a href="jquery_basic02.html">basic02</a>
<a href="jquery_basic03.html">basic03</a>
<a href="http://www.zttc.edu.cn">zttc</a>
<a href="http://zjc.zttc.edu.cn:8080">zjc</a>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
-----------------设置属性2-----------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//设置所有a中以http为链接开头的超链接在新窗口打开
$("a[href^='http://']").attr("target","_blank");
//设置tbody中的tr的title属性，让属性的值为第几个tr
$("tbody tr").attr("title",function(n){
return "这是第"+(n+1)+"个tr";
});
});
</script>
</head>
<body>
<a href="jquery_basic01.html">basic01</a>
<a href="jquery_basic02.html">basic02</a>
<a href="jquery_basic03.html">basic03</a>
<a href="http://www.zttc.edu.cn">zttc</a>
<a href="http://zjc.zttc.edu.cn:8080">zjc</a>
<table width="700" border="1" align="center" id="users">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
///////////////////dome//////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
var all = $("*");
all.each(function(){
var rel = this;
this.onclick = function(event) {
//1、获取事件发生的目标
//需要根据不同的浏览器进行判断，微软的只知道window.event
event = event?event:window.event;
//IE不知道target而是使用srcElement来代替
var target = event.target?event.target:event.srcElement;
print("事件源:"+target.id+","+target.tagName+",事件对象:"+this.id+"-->"+this.nodeType);
//模式的DOM0，会产生事件冒泡，可以通过event.stopPropagation()来取消事件的冒泡机制
event.stopPropagation();
//IE是通过这个变量来取消冒泡
event.cancelBubble = true;
//DOM0模型不支持事件捕获，而且DOM0带来的第二个问题是
}
});
// for(var i=0;i<all.length;i++) {
// all[i].onclick = function(event) {
// //1、获取事件发生的目标
// //需要根据不同的浏览器进行判断，微软的只知道window.event
// event = event?event:window.event;
// //IE不知道target而是使用srcElement来代替
// var target = event.target?event.target:event.srcElement;
// alert(this.id);
// print("事件源:"+target.id+","+target.tagName+",事件对象:"+this.id);
// }
// }
function print(txt) {
$("#content").append(txt+"<br/>");
}
});
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点了看一下
</div>
</div>
<div id="content"></div>
</body>
</html>
///////////////////////demo2//////////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//DOM0模型带来最大的问题是，事件会被覆盖
$("#child")[0].onclick = function(){
print("abc");
}
$("#child")[0].onclick = function(){
print("bcd");
}
$("#child")[0].onclick = function(){
print("efg");
}
$("#child")[0].onclick = function(){
print("hijk");
}
function print(txt) {
$("#content").append(txt+"<br/>");
}
});
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点了看一下
</div>
</div>
<div id="content"></div>
</body>
</html>
---------------jquery 事件冒泡和事件阻止---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("*").bind("click",function(event){
print(event.currentTarget.id+"--"+event.target.id);
//对于JQuery依然存在事件，可以使用以下函数取消事件冒泡
event.stopPropagation();
//如果对于form或者a可能不希望继续提交或者继续访问超链接，
//可以通过event.preventDefault阻止事件继续向下走
//特别注意：这个和事件冒泡没有任何的关系
event.preventDefault();
})
function print(txt) {
$("#content").append(txt+"<br/>");
}
});
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点了看一下
</div>
</div>
<a href="ccc">abc</a>
<div id="content"></div>
</body>
</html>
------------------绑定一次---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//仅仅只会执行一次
$("*").one("click",function(event){
print(event.currentTarget.id+"--"+event.target.id);
})
function print(txt) {
$("#content").append(txt+"<br/>");
}
});
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点了看一下
</div>
</div>
<a href="ccc">abc</a>
<div id="content"></div>
</body>
</html>
------triggert---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//仅仅只会执行一次
$("*").bind("click",function(event,a,b){
print(event.currentTarget.id+"--"+event.target.id+":"+(a+b));
});
$("a[href='ccc']").bind("click",function(event){
/*
* 使用trigger带来的好处有两个
* 1、可以在其他的对象中调用另外一个事件
* 2、可以为事件传递参数
* 使用trigger依然也存在事件冒泡
*/
$("#child").trigger("click",[2,3]);
event.preventDefault();
});
function print(txt) {
$("#content").append(txt+"<br/>");
}
});
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点了看一下
</div>
</div>
<a href="ccc">abc</a>
<div id="content"></div>
</body>
</html>
----------trrigert函数的好处----
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//仅仅只会执行一次
$("*").not("a[href='ccc']").bind("click",function(event,a,b){
print(event.currentTarget.id+"--"+event.target.id+":"+(a+b));
});
$("a[href='ccc']").bind("click",function(event){
/*
* 使用triggerHandler带来的好处是可以直接让调用的事件
* 不冒泡，不提交，带来的好处就是
* 写事件我们可以完全按照最正常的方式来写，不用考虑事件传递
* 在特殊的使用通过triggerHandler来调用就会阻止事件传递
*/
$("#child").triggerHandler("click",[2,3]);
event.preventDefault();
});
/**
* JQuery中的其他很多事件多可以直接通过名称来完成调用
*/
$("#child").mouseover(function(event){
$(this).css("color","#f00");
});
function print(txt) {
$("#content").append(txt+"<br/>");
}
});
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点了看一下
</div>
</div>
<a href="ccc">abc</a>
<div id="content"></div>
</body>
</html>
