——杨中科老师.Net视频笔记
在vs中新建一个名为JQuery的解决方案，并在解决方案中添加一个web项目，选择ASP.NET WEB 应用程序，取名：JQuery1，然后在项目中添加文件即可。
文件结构：
01JQuery入门1.htm
<!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>
<title>JQuery入门</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { //这里这个函数的作用是当加载的时候执行代码
$("#btn").click(function() { alert($("#un").val()); });
$("div").click(function() { $(this).hide("slow"); });
});
</script>
</head>
<body>
<input type="text" id="un" />
<input type="button" id="btn" />
<div>
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
维唯为为:http://blog.163.com/luowei505050@126/<br />
</div>
</body>
</html>
02JQuery入门2.htm
<!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" >
<!--
$(document).ready(function() {
? alert(" 加载完毕！ ");
? });// 注册事件的函数，和普通的 dom 不一样，不需要在元素上标记
on * * 这样的事件。
? 当页面 Dom 元素加载完毕时执行代码，可以简写为：
? $(function() {
? alert(" 加载完毕！ ");
? });
? 和 onload 类似，但是 onload 只能注册一次 (window.onload=function...) （
没有 C# 中的 += 机制），后注册的取代先注册的，而 ready 则可以多次注
册都会被执行。
? JQuery 的 ready 和 Dom 的 onload 的区别： onload 是所有 Dom 元素创建完
毕、图片、 Css 等都加载完毕后才被触发，而 ready 则是 Dom 元素创建完
毕后就被触发，这样可以提高网页的响应速度。在 jQuery 中也可以用
$(window).load() 来实现 onload 那种事件调用的时机。
-->
<head>
<title>JQuery入门2</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){alert("加载完毕！");});
$(document).ready(function(){alert("加载完毕2！");});
$(document).ready(myready);
function myready(){
alert("也加载完毕！");
};
window.onload=function(){
alert("onload2");
};
$(function(){alert("ready");});
</script>
</head>
<body>
</body>
</html>
03JQuery函数.htm
<!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" >
<!--
JQuery 提供的函数
? $.map(array,fn) 对数组 array 中每个元素调用 fn 函数逐个进行处理， fn 函数将处理
返回，最后得到一个新数组
例子，得到一个元素值是原数组值二倍的新数组
var arr = [3, 5, 9];
var arr2 = $.map(arr, function(item) { return item * 2; });// 联想 C# 委托的例子。函数
式编程。
$.map 不能处理 Dictionary 风格的数组。
? $.each(array,fn) 对数组 arry 每个元素调用 fn 函数进行处理，没有返回值
var arr = { "tom": " 汤姆 ", "jerry": " 杰瑞 ", "lily": " 莉莉 " };
$.each(arr, function(key, value) { alert(key+"="+value); });
如果是普通风格的数组，则 key 的值是序号。
? 还可以省略 function 的参数，这时候用 this 可以得到遍历的当前元素：
var arr = [3, 6, 9];
$.each(arr, function() { alert(this); });// 能读懂。
普通数组推荐用无参，用 dict 风格的就用 key 、 value 。
-->
<head>
<title>JQuery函数</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
var arr=[3,5,8];
var arr2=$.map(arr,function(item){return item*2;});
alert(arr2);
var dict={"tom":20,"jerry":50,"jim":30};
$.each(dict,function(key,value){alert(key+"的年龄是："+value);});//用for实现就要麻烦很多
var arr=[3,5,8];
$.each(arr,function(key,value){alert(key+"="+value);});
var arr=[3,5,8];
$.each(arr,function(item){alert(item);});
$.each(arr,function(){alert(this);});
var dict={"tom":20,"jerry":50,"jim":30};
$.each(dict,function(){alert(this);});
</script>
</head>
<body>
</body>
</html>
04JQuery对象.htm
<!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" >
<!--
jQuery 对象、 Dom 对象
? jQuery 对象就是通过 jQuery 包装 Dom 对象后产生的对象： alert($('#div1').html())
。 Dom 对象要想通过 jQuery 进行操作，先要转换为 JQuery 对象。
? $('#div1').html() 等价于： document.getElementById("div1").innerHTML;
? $('#div1') 得到的就是 jQuery 对象， jQuery 对象只能调用 jQuery 对象封装的方法，
不能调用 Dom 对象的方法， Dom 对象也不能调用 jQuery 对象的方法，所以
alert($('#div1').innerHTML 是错的，因为 innerHTML 是 DOM 对象的属性。
? Array 是 JS 语言本身的对象，不是 Dom 对象，因此不需要转换为 Jquery 对象才能
用
? （ * ）将 Dom 对象转换为 JQuery 对象的方法， $(dom 对象 ) ；当调用 jQuery 没有封
装的方法的时候必须用 Dom 对象，转换方法： var domobj = jqobj[0] 或者 var
domobj=jqobj.get(0)
? jQuery 修改样式： $("#div1").css("background", "red"); 获得样式
$("#div1").css("background") ；修改 value ： $("#un").val("abc") ，获得 value ：
$("#un").val() ，类似的获得、设置 innerText 、 innerHTML 用 text() 和 html() 。 val 、
html 、 text 等是方法，不是属性， jQuery 中很少有属性的用法，因为属性写法很
难 " 链式编程 " 。
-->
<head>
<title>jQuery 对象</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { alert($("#div1").html()); alert($("#div1").innerHTML); });
$(function() {
var div1 = document.getElementById("div1");
$(div1).html("<a href='http://www.baidu.com'>百度</a>");
var div1_2 = $(div1)[0];
alert(div1_2.innerHTML);
});
$(function() { $("#div1").css("background", "red"); });
$(function() { alert($("#div1").css("background")); });
$(function() { $("#txt1").val(new Date()); });
$(function() { alert($("#txt1").val()); });
$(function() { $("#div1").html("a<font color='red'>b</font>c"); });
$(function() { alert($("#div1").html()); });
$(function() { alert($("#div1").text()); });
</script>
</head>
<body>
<div id="div1">你好呀<font color="red">朋友</font></div>
<input type="text" id="txt1" />
</body>
</html>
05JQurery选择器1.htm
<!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" >
<!--
JQuery 选择器用于查找满足条件的元素，比如可以用 $(" # 控件
Id") 来根据控件 id 获得控件的 jQuery 对象，相当于
getElementById ：
? $(" # div1").html("<font color=red>hello</font>")
? $("TagName") 来获取所有指定标签名的 jQuery 对象，相当于
getElementsByTagName ：
? $(function() {
? $("#btnClick").click(function() {
? $("p").html(" 我们都是 P");
? });
? });
-->
<head>
<title>JQuery选择器1（Id选择器）</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//$("p").click(function() { alert("我是p"); });
//这时候dom元素没有加解析出来，所以$("p")取不到任何元素，和dom中为什么要把裙化事件加到onload=initEvent()一样。
$(function() { //作用是当加载的时候再此函数中的执行代码
$("p").click(function() { alert("我是p"); });//隐式迭代，给所有选择出来的元素添加onclick事件响应
});
</script>
</head>
<body>
<input type="button" value="tagname" id="btnClick" />
<p>aa</p>
<p>12</p>
<p>ww</p>
</body>
</html>
06JQurery选择器2.htm
<!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" >
<!--
CSS 选择器，同时选择拥有样式的多个元素：
? <style type="text/css">
? .test{ background-color:Red}
? </style>
? <script type="text/javascript">
? $(function() {
? $(".test"). click(function() {
? alert($(this).text());
? });
? });
? </script>
? <p class="test">test1</p>
? <p class="test">test2</p>
? <p class="test">test3</p>
-------------------------------------------------
JQuery 选择器 3
? 多条件选择器： $("p,div,span.menuitem") ，同时选择 p 标签、 div
标签和拥有 menuitem 样式的 span 标签元素
? 注意选择器表达式中的空格不能多不能少。易错！
? 层次选择器：
? （ 1 ） $("div li") 获取 div 下的所有 li 元素（后代，子、子的子 …… ）
? （ 2 ） $("div > li") 获取 div 下的直接 li 子元素
? （ 3 ） $(".menuitem + div") 获取样式名为 menuitem 之后的第一个 div
元素（不常用）
? （ 4 ） $(".menuitem ~ div") 获取样式名为 menuitem 之后所有的 div 元
素（不常用）
-->
<head>
<title>JQuery选择器2（CSS选择器）</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".waring").click(function() { alert("这是警告信息！"); });
});
$(function() {
var elements = $("#btn1");
if (elements.length <= 0) {
alert("没有找到指定的按钮");
return;
}
});
</script>
<style type="text/css">
.waring{background-color:Yellow;color:Red;}
</style>
</head>
<body>
<p>欢迎你！</p>
<div class="waring">
请携带证件
</div>
<p class="waring">
请勿触碰！
</p>
<input class="waring" type="button" value="点我呀" />
</body>
</html>
07节点遍历.htm
<!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" >
<!--
节点遍历
? next() 方法用于获取节点之后的挨着的第一个同辈元素，
$(".menuitem").next("div") 、 nextAll() 方法用于获取节点之后的所
有同辈元素， $(".menuitem").nextAll("div")
? prev 、 prevAll 之前的元素。
? siblings() 方法用于获取所有同辈元素，
$(".menuitem").siblings("li") 。 siblings 、 next 等所有能传递选择
器的地方能够使用的语法都和 $() 语法一样。
? 案例：选中的 p 变色 $(this).css();$(this).siblings().css()
? 案例：评分控件。 prevAll,this,nextAll
---------------------------------------------------------------------------
链式编程
? 高亮选中项：给所有有 menuitem 这个样式的元素添加 click 监听事件，当 click 的时
候，向被点击的元素添加 highlight 这个样式，然后从其兄弟节点（ siblings ）中移
除 highlight 风格。 " . " 的时候是针对的上一步的返回值的节点集合的操作。
? <style type="text/css">
? .menuitem{background-color:Yellow; }
? .highlight { background-color: Red;}
? </style>
? $(function() {
? $(".menuitem").click(function() {
? $(this).addClass("highlight").siblings().removeClass("highlight");
? });
? });
? <p class="menuitem">111111</p><br />
? <p class="menuitem">111111</p><br />
? <p class="menuitem">111111</p><br />
-->
<head>
<title>节点遍历_链式编程</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//$("div").click(function() { alert($(this).next().text()); });
//$("div").click(function() { alert($(this).next("p").text()); });
//$("div").click(function() { alert($(this).nextAll().text()); });
//$("div").click(function() { alert($(this).nextAll("div").text()); });
//$("div").click(function() { $.each($(this).nextAll("div"), function() { $(this).css("background", "red"); }); });
//不用这么写，JQuery会自动隐式迭代，用下面方法也一样
//$("div").click(function() { $(this).nextAll("div").css("background","red"); }); ;
//$("div").click(function() { $(this).css("background", "red"); $(this).siblings("div").css("background","white"); });
//$("div").click(function() { $(this).css("background", "red").siblings("div").css("background", "white"); });
/*
$(function() {
$("#ratings td").html("<img src='images/star_off.gif' />")
.mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />"); $(this).nextAll().html("<img src='images/star_off.gif' />"); });
});
*/
$(function() {
$("#ratings td").html("<img src='images/star_off.gif' />")
.mouseover(function() { $("#ratings td").html("<img src='images/star_on.gif' />")
.siblings().html("<img src='images/star_on.gif' />");
$(this).nextAll().html("<img src='images/star_off.gif' />");
});
});
});
</script>
</head>
<body>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<p>p1</p>
<p>p2</p>
<div>dd</div>
<div>ee</div>
<table id=ratings>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
08过滤选择器案例.htm
<!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" >
<!--
基本过滤选择器
? :first 选取第一个元素。 $("div:first") 选取第一个 <div>
? :last 选取最后一个元素。 $("div:last") 选取最后一个 <div>
? :not( 选择器 ) 选取不满足 " 选择器 " 条件的元素，
$("input:not(.myClass)") 选取样式名不是 myClass 的 <input>
? :even 、 :odd ，选取索引是奇数、偶数的元素： $("input:even") 选
取索引是奇数的 <input>
? :eq( 索引序号 ) 、 :gt( 索引序号 ) 、 :lt( 索引序号 ) 选取索引等于、大
于、小于索引序号的元素，比如 $("input:lt(5)") 选取索引小于 5 的
<input>
? $(":header") 选取所有的 h1 …… h6 元素（ * ）
? $("div:animated") 选取正在执行动画的 <div> 元素。 （ * ）— — — — 高级软件人才实作培训专家 高级软件人才实作培训专家 高级软件人才实作培训专家 高级软件人才实作培训专家
案例
? 第一行是表头，所以显示大字体（ fontSize=30 ），最后一行是
汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻
大的字体（ 28 ）表格的奇数行是黄色背景。
-->
<head>
<title>过滤选择器</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#table1 tr:first").css("fontSize", "40");
$("#table1 tr:last").css("color", "red");
$("#table1 tr:gt(0):lt(3)").css("fontSize", "28");
//lt(3)是从gt(0)后得到的新序列中的序号，不要写成lt(4);
$("#table1 tr:gt(0):even").css("background", "red");
//表头不参与"正文表格的奇数行是红色背景",所以gt(0)去掉表头。
});
</script>
</head>
<body>
<table id="table1">
<tr><td>姓名</td><td>成绩</td></tr>
<tr><td>tom</td><td>100</td></tr>
<tr><td>lucy</td><td>99</td></tr>
<tr><td>jim</td><td>95</td></tr>
<tr><td>david</td><td>85</td></tr>
<tr><td>candy</td><td>84</td></tr>
<tr><td>平均分</td><td>90/td></tr>
</table>
</body>
</html>
09相对选择器.htm
<!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" >
<!--
不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，
只要在 $() 指定第二个参数，第二个参数为相对的元素 . $("ul",
$(this)).css("background", "red");
-->
<head>
<title>相对选择器</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#div1").click(function() {
$("ul", $(this)).css("background", "red");
//第二个参数传递一个jquery对象，则相对于这个对象为基准进行相对的选择
});
});
$(function() {
$("#t1 tr").click(function() {
$("td", $(this)).css("background","Yellow") ;
});
});
</script>
</head>
<body>
<div id="div1">
<ul>
<li>维唯为为:http://blog.163.com/luowei505050@126</li>
<li>维唯为为:http://blog.163.com/luowei505050@126</li>
<li>维唯为为:http://blog.163.com/luowei505050@126</li>
</ul>
</div>
<div>
<ul>
<li>维唯为为:http://www.cnblogs.com/luowei010101/</li>
<li>维唯为为:http://www.cnblogs.com/luowei010101/</li>
<li>维唯为为:http://www.cnblogs.com/luowei010101/</li>
</ul>
</div>
<table id="t1">
<tr><td>td</td><td>维唯为为</td></tr>
<tr><td>td</td><td>维唯为为</td></tr>
<tr><td>td</td><td>维唯为为</td></tr>
<tr><td>td</td><td>维唯为为</td></tr>
</table>
</body>
</html>
10属性选择器.htm
<!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" >
<!--
属性过滤选择器：
? $("div[id]") 选取有 id 属性的 <div>
? $("div[title=test]") 选取 title 属性为 " test " 的 <div> ， JQuery 中没有对
getElementsByName 进行封装，用 $("input[name=abc]")
? $("div[title!=test]") 选取 title 属性不为 " test " 的 <div>
? 还可以选择开头、结束、包含等，条件还可以复合。（ * ）
-->
<head>
<title>属性过滤选择器</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("input[value=显示选中项]").click(function() {
alert($("input:checked").val());
//$("input:checked").css("background","red");
});
});
</script>
</head>
<body>
<input type="checkbox" value="北京" />北京<br />
<input type="checkbox" value="南京" />南京<br />
<input type="checkbox" value="东京" />东京<br />
<input type="checkbox" value="西安" />西安<br />
<input type="checkbox" value="开封" />开封<br />
<input type="button" value="显示选中项" /><br />
</body>
</html>
11链式Each.htm
<!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" >
<!--
表单对象选择器（过滤器）：
? $("#form1:enabled") 选取 id 为 form1 的表单内所有启用的元素
? $("#form1:disabled") 选取 id 为 form1 的表单内所有禁用的元素
? $("input:checked") 选取所有选中的元素（ Radio 、 CheckBox ）
? $("select:selected") 选取所有选中的选项元素（下拉列表）
---------------------------------------------------------------------
? jQuery 元素的也可以调用 each 方法，只是对 $.each 的简化调用。
显示选中的复选框信息
$(function() {
$("input[name=names]").click(function() {
var names = $("input[name=names]:checked");
var arr = new Array();
names.each(function(key, value) { arr[key] = $(value).val(); });
$("#msgNames").text(" 共选中 "+names.length+" 条： "+arr.join(","));
});
});
<input type="checkbox" name="names" value="tom" />tom
<input type="checkbox" name="names" value="jim" />jim
<input type="checkbox" name="names" value="lily" />lily
<p id="msgNames"></p>
-->
<head>
<title>表单对象选择器 及 each</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("input[name=names]").click(function() {
var names = $("input[name=names]:checked");
var arr = new Array();
names.each(function(key, value) { arr[key] = $(value).val() });
//$(value)是将Dom对象转化为JQuery对象,即将元素的value值更新到key上
$("#msgNames").text("共选中"+names.length+" 条： "+arr.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="names" value="tom" />tom
<input type="checkbox" name="names" value="jim" />jim
<input type="checkbox" name="names" value="lily" />lily
<p id="msgNames"></p>
</body>
</html>
12JQueryDom操作动态创建节点.htm
<!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>
<title>动态创建节点</title>
<style type="text/css">
.textitem{background-color:Yellow}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var link = $("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
});
$(function() {
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com" };
$.each(data, function(key, value) {
var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
$("#tableSites").append(tr);
});
});
$(function() {
$("#remove").click(function() {
$("ul li.textitem").remove();
});
});
</script>
</head>
<body>
<div>
<table id="tableSites">
</table>
</div>
<ul>
<li>abc</li>
<li class="textitem">abc</li>
<li>abc</li>
<li class="textitem">abc</li>
</ul>
<input type="button" value="删除ul中的一部分" id="remove" />
</body>
</html>
13权限管理界面.htm
<!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" >
<!--
JQuery 的 Dom 操作
? 1 、使用 html() 方法读取或者设置元素的 innerHTML ：
? alert($("a:first").html());
? $("a:first").html("hello");
? 2 、使用 text() 方法读取或者设置元素的 innerText ：
? alert($("a:first").text());
? $("a:first").text("hello");
? 3 、 使用 attr() 方法读取或者设置元素的属性，对于 JQuery 没有封
装的属性（所有浏览器没有差异的属性）用 attr 进行操作。
? alert($("a:first").attr("href"));
? $("a:first").attr("href", "http://www.rupeng.com");
? 4 、使用 removeAttr 删除属性。删除的属性在源代码中看不到，
这是和清空属性的区别。
------------------------------------------------------------------
动态创建 Dom 节点
? 使用 $(html 字符串 ) 来创建 Dom 节点，并且返回一个 jQuery 对象，
然后调用 append 等方法将新创建的节点添加到 Dom 中：
? var link = $("<a href='http://www.baidu.com'> 百度 </a>");
? $("div:first").append(link);
? $() 创建的就是一个 jQuery 对象，可以完全进行操作
? var link = $("<a href='http://www.baidu.com'> 百度 </a>");
? link.text(" 百毒 ");
? $("div:first").append(link); 。
? append 方法用来在元素的末尾追加元素。 //$("#select1
option:selected").remove().appendTo($("#select2")) ;
$("#select1 option:selected").appendTo($("#select2")) ;
? prepend ，在元素的开始添加元素。
? after ，在元素之后添加元素（添加兄弟）
? before ：在元素之前添加元素（添加兄弟）
--------------------------------------------------------------------
删除节点
? （ 1 ） remove() 删除选择的节点
? 案例：清空 ul 中的项，代码见备注。 $("ul li.testitem").remove(); 删
除 ul 下 li 中有 testitem 样式的元素。
? remove 方法的返回值是被删除的节点对象，还可以继续使用被
删除的节点。比如重新添加到其他节点下
? var lis = $("#ulSite li").remove();
? $("#ulSite2").append(lis);
? 权限选择： var items = $("#select1 option:selected").remove();
$("#select2").append(items); 更狠的： $("#select1
option:selected").appendTo($("#select2"))
? （ 2 ） empty() 是将节点清空，不像 remove 那样还可以添加到其
他元素中。
? 案例：选择球队
-->
<head>
<title>权限管理界面</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#moveToRight").click(function() {
var items = $("#select1 option:selected").remove();
items.attr("selected",false); //这要注意
$("#select2").append(items);
});
$("#moveToLeft").click(function() {
var items = $("#select2 option:selected").remove();
items.attr("selected", false);
$("#select1").append(items);
});
$("#AllToRight").click(function() {
var items = $("#select1 option").remove();
$("#select2").append(items);
});
$("#AllToLeft").click(function() {
var items = $("#select2 option").remove();
$("#select1").append(items);
});
});
</script>
</head>
<body>
<select style="float:left;15%;height:100px" id="select1" multiple="multiple">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="float:left;15%">
<input style="float:left;100%;" type="button" id="moveToRight" value=">"/>
<input style="float:left;100%;" type="button" id="moveToLeft" value="<"/>
<input style="float:left;100%;" type="button" id="AllToRight" value=">>"/>
<input style="float:left;100%;" type="button" id="AllToLeft" value="<<"/>
</div>
<select style="float:left;15%;height:100px" id="select2" multiple="multiple"></select>
</body>
</html>
14加法计算器.htm
<!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>
<title>加法计算器</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#eq").click(function() {
var value1 = $("#txt1").val(); //易错，val是方法，不是属性，不能$().val="333";
var value2 = $("#txt2").val();
var value3 = parseInt(value1, 10) + parseInt(value2, 10); //错误说法"JQuery中如何将字符串转换为int"。可笑的说法"JQuery要代替JavaScript"。
$("#txt3").val(value3);
});
});
</script>
</head>
<body>
<input type="text" id="txt1" />
+
<input type="text" id="txt2" />
<input type="button" id="eq" value="=" />
<input type="text" id="txt3" />
</body>
</html>
14全选全不选反选.htm
<!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" >
<!--
CheckBox 的全选、全不选、反选
-->
<head>
<title>CheckBox 的全选、全不选、反选</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#selAll").click(function() {
//$("#playlist input:checkbox").attr("checked", true); //方式一
$("#playlist :checkbox").attr("checked", true); //方式二
});
$("#unselAll").click(function() {
//$("#playlist input:checkbox").attr("checked", false);
$("#playlist :checkbox").attr("checked", false);
});
$("#reverse").click(function() {
//$("#playlist :checkbox").attr("checked", !$("#playlist :checkbox").attr("checked")); //错误，不合迭代的工作过程
$("#playlist input:checkbox").each(function() {
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="playlist">
<input type="checkbox" />MyHybird Sound<br />
<input type="checkbox" />I love propcorn<br />
<input type="checkbox" />维唯为为<br />
<input type="checkbox" />luowei010101<br />
<input type="checkbox" />rowin<br />
</div>
<input type="button" value="全选" id="selAll" />
<input type="button" value="全不选" id="unselAll" />
<input type="button" value="反选" id="reverse" />
</body>
</html>
15倒计时注册页面.htm
<!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" >
<!--
十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等 JQuery 未
封装方法： attr("")
-->
<head>
<title>倒计时注册页面</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
var leftSeconds = 10;
var intervalId;
$(function() {
$("#btnReg").attr("disabled", true); //用attr来设置，取得JQuery没有封装的属性
intervalId = setInterval("CountDown()", 1000);
});
function CountDown() { //给function招一个$()是让他在ready的时候执行
if (leftSeconds <= 0) {
$("#btnReg").val("同意");
$("#btnReg").attr("disabled", false);
clearInterval(intervalId);
return;
}
leftSeconds--;
$("#btnReg").val("请仔细阅读 "+leftSeconds+"秒");
}
</script>
</head>
<body>
<textarea>维唯为为：http://www.blog.163.com/luowei010101@126</textarea>
<input type="button" id="btnReg" value="同意" />
</body>
</html>
15合成事件_hover.htm
<!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" >
<!--
JQuery 中的事件绑定： $("#btn").bind("click",function(){}) ，每次都这么
调用太麻烦，所以 jQuery 可以用 $("#btn").click(function(){}) 来进行简化
? 合成事件 hover ， hover(enterfn,leavefn) ，当鼠标放在元素上时调用
enterfn 方法，当鼠标离开元素的时候调用 leavefn 方法。
-->
<head>
<title>合成事件_hover</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/*
$("p").mouseenter(function() {
$(this).text("客官来了！");
})
.mouseleave(function() {
$(this).text("大爷慢走！");
});
*/
$("p").hover(function() { $(this).text("来了") }, function() { $(this).text("慢走")});
});
</script>
</head>
<body>
<p>你好！</p>
</body>
</html>
16事件冒泡.htm
<!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" >
<!--
事件冒泡： JQuery 中也像 JavaScript 一样是事件冒泡
? 如果想获得事件相关的信息，只要给响应的匿名函数增加一个参
数： e ， e 就是事件对象。 调用事件对象的 stopPropagation() 方法终止
冒泡。 e. stopPropagation();
? $("tr").click(function(e) { alert("tr 被点击 "); e.stopPropagation(); });// 注意
函数的参数是 e
---------------------------------------------------------------------------------------
阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接
、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的
preventDefault() 方法和 window.event.returnValue=false 效果一样。
? $("a").click(function(e) { alert(" 所有超链接暂时全部禁止点击 ");
e.preventDefault(); });
-->
<head>
<title>事件冒泡</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#p1").click(function() { alert("p1被电击了"); });
$("#td1").click(function(e) { alert("td1被电击了"); e.stopPropagation(); });
$("#tr1").click(function() { alert("tr1被电击了"); });
$("#t1").click(function() { alert("t1被电击了"); });
$().click(function(e) { alert("今天link不接客！"); e.preventDefault(); });
$(":submit").click(function(e) {
if ($("#name").val().length <= 0) {
alert("用户名有能为空");
e.preventDefault();
}
});
});
</script>
</head>
<body>
<table onclick="alert('table')">
<tr onclick="alert('tr')">
<td onclick="alert('td')">
<p onclick="alert('p')">维唯为为</p>
</td>
</tr>
</table>
<table id="t1">
<tr id="tr1">
<td id="td1">
<p id="p1">nihao</p>
</td>
</tr>
</table>
<a href="http://www.cnblogs.com/luowei010101">维唯为为</a>
<form action="aaa.aspx">
<input id="name" type="text" />
<input type="submit" value="提交" />
</form>
</body>
</html>
16无刷新评论.htm
<!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>
<title>无刷新评论</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btnPost").click(function() {
var title = $("#title").val();
var body = $("#txtBody").val();
var tr = $("<tr><td>" + title + "</td><td>" + body + "</td></tr>");
$("#tbComment").append(tr);
$("#title").val("");
$("#txtBody").val("");
});
});
</script>
</head>
<body>
<p>第一个帖子，我的第一个帖子，哈哈哈！</p>
<table id="tbComment">
<tr><td>匿名</td><td>还是沙发！</td></tr>
</table>
<input type="text" id="title" /><br />
<textarea id="txtBody"></textarea><br />
<input type="button" value="发表评论" id="btnPost" /><br />
</body>
</html>
17节点操作.htm
<!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" >
<!--
节点操作
? 替换节点：
? $("br").replaceWith("<hr/>");
? 将 <br/> 替换为 <hr/>
? 包裹节点
? wrap() 方法用来将所有元素逐个用指定标签包裹：
? $("b").wrap("<font color='red'></font>") 将所有粗体字红色显示
-->
<head>
<title>节点操作</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#replace").click(function() {
$("br").replaceWith("<hr/>");
$("p").wrap("<font color='red'></font>");
});
});
</script>
</head>
<body>
维唯为为<br />
http://blog.163.com/luowei505050@126<br />
维唯为为<br />
http://blog.163.com/luowei505050@126<br />
<p>维唯为为</p>
<p>rowin</p>
<input type="button" value="ReplaceWith" id="replace" />
</body>
</html>
18样式操作.htm
<!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" >
<!--
样式操作
? 获取样式 attr("class") ，设置样式 attr("class","myclass") ，追加样式
addClass("myclass")( 不影响其他样式 ) ，移除样式 removeClass("myclass") ，切
换样式（如果存在样式则去掉样式，如果没有样式则添加样式）
toggleClass("myclass") ，判断是否存在样式： hasClass("myclass")
? 案例：网页开关灯的效果
? 练习：给 body 设置 body{ filter:Gray; } 这个 style 就可以让网页变为黑白显示，做
切换黑白效果的按钮。
? 点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个
tr 的 click 事件，将点击的背景设置为黄色，其他的设置为白色背景。 颜色定义为
class 样式。
? 练习：聚焦控件的高亮显示。 颜色定义为 class 样式。 $("body * ") ，选择器 * 表示
所有类型的控件。
? 练习：搜索框效果。焦点放入控件，如果文本框中的值是 " 请输入关键词 " ，那么
将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值，
那么将文本框填充为 " 请输入关键词 " ，颜色设置为灰色（ Gray ）。 颜色定义为
class 样式。
-->
<head>
<title>样式操作</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btnAdd").click(function() {
$("#div1").addClass("class2");
});
$("#btnRemove").click(function() {
$("#div1").removeClass("class2");
});
$("#btnToggle").click(function() {
$("#div1").toggleClass("class2");
});
$("#kgd").click(function() {
$(document.body).toggleClass("night");
});
});
</script>
<style type="text/css">
body{filter:Gray;} /*在body上添加灰色的过滤层*/
input{font-size:30px;}
.class1{background-color:Red;}
.class2{font-size:50px;}
/*.night{background-color:White;} 把背景色设置成白色*/
.night{background-color:Black;}
</style>
</head>
<body>
<div id="div1" class="class1">你好</div>
<img src="images/2.jpg" /><br />
<input type="button" value="add" id="btnAdd" />
<input type="button" value="remove" id="btnRemove" />
<input type="button" value="切换" id="btnToggle" />
<input type="button" value="开关灯" id="kgd" />
</body>
</html>
19黑白切换.htm
<!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" >
<!--
给 body 设置 body{ filter:Gray; } 这个 style 就可以让网页变为黑白显示，做
切换黑白效果的按钮。
-->
<head>
<title>黑白切换</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$(document.body).toggleClass("blackwhite");
});
});
</script>
<style type="text/css">
.blackwhite{filter:Gray;}
</style>
</head>
<body>
<input type="button" value="切换" id="btn" /><br />
<img src="images/2.jpg" />
</body>
</html>
20高亮选择行.htm
<!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" >
<!--
点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个
tr 的 click 事件，将点击的背景设置为黄色，其他的设置为白色背景。 颜色定义为
class 样式。
-->
<head>
<title>高亮选择行</title>
<style type="text/css">
.hightlight{background-color:Yellow;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("table tr").click(function() {
$(this).addClass("hightlight").siblings().removeClass("hightlight");
});
});
</script>
</head>
<body>
<table>
<tr><td>维唯为为</td><td>http://blog.163.com/luowei505050@126</td></tr>
<tr><td>维唯为为</td><td>http://blog.163.com/luowei505050@126</td></tr>
<tr><td>维唯为为</td><td>http://blog.163.com/luowei505050@126</td></tr>
</table>
</body>
</html>
21聚集控件高亮.htm
<!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" >
<!--
练习：聚焦控件的高亮显示。 颜色定义为 class 样式。 $("body * ") ，选择器 * 表示
所有类型的控件。
-->
<head>
<title>聚焦控件的高亮显示</title>
<style type="text/css">
.hightlight
{
background-color:Yellow;
}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("body *").click(function() {
$(this).addClass("hightlight").siblings().removeClass("hightlight");
});
});
</script>
</head>
<body>
<input type="text" />
<div>
维唯为为
</div>
<p>
http://www.cnblogs.com/luowei010101
</p>
</body>
</html>
22搜索框效果.htm
<!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" >
<!--
练习：搜索框效果。焦点放入控件，如果文本框中的值是 " 请输入关键词 " ，那么
将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值，
那么将文本框填充为 " 请输入关键词 " ，颜色设置为灰色（ Gray ）。 颜色定义为
class 样式。
-->
<head>
<title>搜索框效果</title>
<style type="text/css">
.waiting{color:Gray}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#kw").val("请输入关键词").addClass("waiting")
.blur(function(){
if($(this).val()==""){
$("#kw").val("请输入关键词").addClass("waiting");
}
})
.focus(function(){
if($("#kw").val()=="请输入关键词"){
$("#kw").val("").removeClass("waiting");
}
});
});
</script>
</head>
<body>
<input type="text" id="kw"/>
</body>
</html>
23RadioButton_CheckBox.htm
<!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" >
<!--
RadioButton 操作
? 取得 RadioButton 的选中值
? $("input[name=gender]:checked").val()
? <input id="Radio2" checked="checked" name="gender"
type="radio" value=" 男 " /> 男 <input
? id="Radio1" checked="checked" name="gender"
type="radio" value=" 女 " /> 女 <input id="Radio3"
? checked="checked" name="gender" type="radio"
value=" 未知 " /> 未知 </p>
? 设置 RadioButton 的选中值：
? $("input[name=gender]").val([" 女 "]);
? 或者
? $(":radio[name=gender]").val([" 女 "]);
? 注意 val 中参数的 [] 不能省略
--------------------------------------------------------------------
RadioButton 操作 2
? 对 RadioButton 的选择技巧对于 CheckBox 和 Select 列表框也适用
? 除了可以使用 val 批量设置 RadioButton 、 CheckBox 等的选中以
外，还可以设定 checked 属性来单独设置控件的选中状态
? $("#btn1").attr("checked",true)
? 练习：权限选择框
? 练习： CheckBox 的全选、全不选、反选
-->
<head>
<title>RadioButton_CheckBox 操作</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#getValue").click(function() {
alert($(":radio[name=gender]:checked").val());
});
$("#setValue").click(function() {
$(":radio[name=gender]").val(["保密"]);
$(":checkbox").val(["篮球","冰球"]);
$(":checkbox[value=羽毛球]").attr("checked",true);
});
});
</script>
</head>
<body>
<input name="gender" type="radio" value="男" />男<br />
<input name="gender" type="radio" value="女" />女<br />
<input name="gender" type="radio" value="保密" />保密<br />
<input type="button" value="设值" id="setValue" />
<input type="button" value="取值" id="getValue" />
<br /><hr />
<input type="checkbox" value="篮球" />篮球<br />
<input type="checkbox" value="足球" />足球<br />
<input type="checkbox" value="羽毛球" />羽毛球<br />
<input type="checkbox" value="冰球" />冰球<br />
</body>
</html>
24事件对象.htm
<!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" >
<!--
事件其他（ * ）
? 属性： pageX 、 pageY 、 target 获得触发事件的元素 ( 冒泡的起始
，和 this 不一样 ) 、 which 如果是鼠标事件获得按键（ 1 左键， 2 中
键， 3 右键）。 altKey 、 shiftKey 、 ctrlKey 获得 alt 、 shift 、 ctrl 是否
按下，为 bool 值。 keyCode 、 charCode 属性发生事件时的
keyCode （键盘码，小键盘的 1 和主键盘的 keyCode 不一样）、
charCode （ ASC 码）。
? 移除事件绑定： bind() 方法即可移除元素上所有绑定的事件，如
果 unbind("click") 则只移除 click 事件的绑定。 bind:+= ； unbind:-=
? 一次性事件：如果绑定的事件只想执行一次随后立即 unbind 可以
使用 one() 方法进行事件绑定：
------------------------------------------------------------------------
鼠标
? 获得发生事件时鼠标的位置
? $(document).mousemove(function(e) {
? document.title = e.pageX + "," + e.pageY;
? });
? 在 mousemove 、 click 等事件的匿名响应函数中如果指定一个参
数 e ，那么就可以从 e 读取发生事件时的一些信息，比如对
mousemove 等鼠标事件来说，就可以读取 e.pageX 、 e.pageY 来
获得发生事件时鼠标在页面的坐标。
-->
<head>
<title>其它事件对象</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#p1").click(function(e) { alert(e.pageX + ":" + e.pageY); });
$("#tr1").click(function(e) { });
$("#p1").click(function(e) { alert("下面是p的："); alert($(this).html()); alert($(e.target).html()); });
$("#tr1").click(function(e) { alert("下面是tr的："); alert($(this).html()); alert($(e.target).html()); });
});
</script>
</head>
<body>
<table id="t1">
<tr id="tr1">
<td id="td1">
<p id="p1">nihao</p>
</td>
</tr>
</table>
</body>
</html>
25一次性事件.htm
<!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>
<title>一次性事件</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(":button").one("click", function() {
alert("点了");
});
});
</script>
</head>
<body>
<input type="button" value="click" />
</body>
</html>
26跟着鼠标飞的图片.htm
<!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" >
<!--
鼠标
? 获得发生事件时鼠标的位置
? $(document).mousemove(function(e) {
? document.title = e.pageX + "," + e.pageY;
? });
? 在 mousemove 、 click 等事件的匿名响应函数中如果指定一个参
数 e ，那么就可以从 e 读取发生事件时的一些信息，比如对
mousemove 等鼠标事件来说，就可以读取 e.pageX 、 e.pageY 来
获得发生事件时鼠标在页面的坐标。
? 练习：跟着鼠标走的图片
? 练习： Tooltips 效果
? 练习：美女图片详细解析层
-->
<head>
<title>跟着鼠标飞的图片</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).mousemove(function(e) {
//body只是元素的显示范围，document是整个文档
$("#fly").css("left",e.pageX).css("top",e.pageY);
});
});
</script>
</head>
<body>
<div id="fly" style="position:absolute">
<img src="images/star_on.gif" />
</div>
</body>
</html>
27点击小图显示详细.htm
<!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>
<title>点击小图显示详细</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
var data = { "images/0001.png": ["images/01.png", "金黄CD", "150"],
"images/0002.png": ["images/02.png", "绿光CD", "200"],
"images/0003.png": ["images/03.png", "蓝光CD", "180"]
};
$(function() {
$.each(data, function(key, value) {
var smallimg = $("<img src='" + key + "'/>");
smallimg.attr("bigmappath", value[0]);
smallimg.attr("personname", value[1]);
smallimg.attr("personheight", value[2]);
smallimg.mouseover(function(e) {
$("#ditailImg").attr("src", $(this).attr("bigmappath"));
$("#detailName").text($(this).attr("personname"));
$("#detailHeight").text($(this).attr("personheight"));
$("#details").css("left", e.pageX).css("top", e.pageY).css("display", "");
});
$("body").append(smallimg);
});
$("#closeDetails").click(function() {
$("#details").css("display","none");
});
});
</script>
</head>
<body>
<div style="display:none;position:absolute;" id="details">
<img id="ditailImg" src="" />
<p id="detailName"></p>
<p id="detailHeight"></p>
<p><input id="closeDetails" type="button" value="关闭" /></p>
</div>
</body>
</html>
28显示隐藏.htm
<!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" >
<!--
画
? show() 、 hide() 方法会显示、隐藏元素。用 toggle() 方法在显示、
隐藏之间切换
? $(":button[value=show]").click(function() { $("div").show(); });
? $(":button[value=hide]").click(function() { $("div").hide(); });
? 如果 show 、 hide 方法不带参数则是立即显示、立即隐藏，如果
指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒
，也可以使用三个内置的速度： fast （ 200 毫秒）、 normal （ 400
毫秒）、 slow （ 600 毫秒）， jQuery 动画函数中需要速度的地方
一般也可以使用这个三个值。
-->
<head>
<title>在显示、隐藏之间切换</title>
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//$("#div1").click(function() { $(this).hide();});
//$("#div1").click(function() { $(this).hide(1000); });
//$("#div1").click(function() { $(this).hide("slow"); });
//$("#div1").click(function() { $(this).toggle(1000); });
$("#div1").click(function() { $(this).toggle("slow"); });
//$("#btn1").click(function() { $(this).toggle("slow"); });
$("#btn1").click(function() { $("#div1").toggle("fast"); });
});
</script>
</head>
<body>
<div id="div1">
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
维唯为为：http://www.cnblogs.com/luowei010101<br />
</div>
<input type="button" value="click" id="btn1" />
</body>
</html>
29QQTab效果.htm
<!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" >
<!--
案例： QQTab 效果
-->
<head>
<title>QQTab 效果</title>
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#qq li:odd").addClass("body"); //偶数行添加 body 样式
$("#qq li:even").addClass("header").click(function() { //奇数行添加 header 样式
$(this).next("li.body").show("fast").siblings("li.body").hide("fast");
});
$("#qq li:first").click(); //模拟点击元素
});
</script>
<style type="text/css">
ul{list-style-type:none;}
.header{background-color:Red;cursor:pointer;border-color:Green;border-style:solid;border-2px;}
.body{background-color:Yellow;border-color:Blue;border-style:solid;border-1px;}
</style>
</head>
<body>
<h1 style="margin-left:50px">QQTab 效果</h1>
<ul id="qq" style="30%">
<li>我的好友</li>
<li>维唯为为<br />rowin<br /></li>
<li>我的同学</li>
<li>拉登<br />小泉<br /></li>
<li>陌生人</li>
<li>张宇<br />刘德华<br /></li>
</ul>
</body>
</html>
30动态添加难题.htm
<!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>
<title>动态添加元素易错点</title>
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var link = $("<a href='http://www.baidu.com' id='link1'>百度</a>");
//$("#link1").text("谷歌"); //必须把动态创建的元素添加到界面上，才能通过选择器选取它
$("body").append(link);
$("#link1").text("谷歌");
});
</script>
</head>
<body>
</body>
</html>
31CookieTest1.htm
<!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" >
<!--
JQuery Cookie 使用
? 使用方法， Cookie 保存的是键值对
? 1 、添加对 jquery.cookie.js
? 2 、设置值， $.cookie(' 名字 ', ' 值 ') 。 cookie 中保存的值都是文本。
? 3 、读取值， var v=$.cookie(' 名字 ')
? alert($.cookie(" 用户名 "));
? $.cookie(" 用户名 ","tom"); 在同域名的另外一个页面中也能读取到。
? 案例：点击登录以后保存用户名，再登录的时候读取上次保存的用户名，帮用户填上
? 设置值的时候还可以指定第三个参数， $.cookie(' 名字 ', ' 值 ', { expires: 7, path: '/',
domain: 'itcast.cn', secure: true }) ， expires 表示要求浏览器保留 Cookie 几天，这个值
只是给浏览器的建议，可能没到时间就已经被清除了。可以实现 " 勾选 【 记录我的用户
名 10 天 】 " 的功能。如果不设定 expires 在浏览器关闭以后就清除， options 参数用哪个
设置哪个。
-->
<head>
<title>Cookie的使用</title>
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="../js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//alert($.cookie("用户名"));
//$.cookie("用户名","tom");
alert($.cookie("UserName"));
if ($.cookie("UserName")) { //读取上次记录的用户名
$("username").val($.cookie("UserName"));
}
$("#btnLogin").click(function() {
$.cookie("UserName", $("#username").val())//用户填写的用户名保存到Cookie中
});
$("#tableColor td").click(function() {
var bgColor = $(this).css("background-color");
$(document.body).css("background-color", bgColor, {expires:2});
$.cookie("LastBgColor", bgColor);
}).css("cursor", "pointer"); //没必要在mouseover的时候再去设cursor
var bgColor = $.cookie("LastBgColor");
if (bgColor) {
$("body").css("background-color", bgColor);
}
});
</script>
</head>
<body>
<input type="text" id="username" />
<input type="button" value="登录" id="btnLogin" />
<table id="tableColor">
<tr><td style="background-color:Red">红色</td><td style="background-color:Green">绿色</td><td style="background-color:Yellow">黄色</td></tr>
</table>
</body>
</html>
32JQueryUI.htm
<!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" >
<!--
JQueryUI的使用
-->
<head>
<title>JQueryUI的使用</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#mydialog").dialog();
$("#testtab").tabs();
});
</script>
</head>
<body>
<div id="mydialog">维唯为为，你好，我是对话框</div>
<div id="testtab">
<ul>
<li><a href="#tabBasic">基本设置</a></li>
<li><a href="#tabAdv">高级设置</a></li>
</ul>
<div id="tabBasic">用户名：<input type="text"/></div>
<div id="tabAdv">刷新频率：<input type="text" /></div>
</div>
</body>
</html>