2016年4月3日
第4章 jq中的事件和动画
4.1 jq中的事件
（1）window.onload、$(documet).ready()的区别：
1.执行时机：window.onload需要整个页面加载完毕后才能运行脚本，而$(documet).ready()只需要dom树加载完毕便可以进行jq操作。
2.使用次数：window.onload只能使用一次，而$(documet).ready()可以使用多次且都可以得到执行。
（2）$(documet).ready() 三种简写方式：
Jquery ready 函数：
$(document).ready(function(){
alert('I am ready. keleyi.com');
}
);
简写为：
$(function(){
alert("I am ready. keleyi.com");
}
);
即
$(document).ready();
等同于
$();
（3）bind绑定事件：
- 可以发现，jq中的事件绑定类型比普通的javascript事件绑定类型少了"on"。
- 常使用简写方式
（4）合成事件
hover()：模拟光标悬停事件。
mouseover与mouseenter
- 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
- 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
- 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
- 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
toggle()：模拟鼠标连续单击事件。
toggle() 方法切换元素的可见状态。
- 表单中event.preventDefault、冒泡事件中的event.stopPropagation()，都可以用return false替换以达到阻止事件冒泡效果。
（6）事件捕获：是与事件冒泡相反的过程，事件捕获是从最顶端往下开始触发。
特别的：
- 并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过javascript来修复。
- jq不支持事件捕获，如果需要，请直接使用原生javascript。
（7）事件对象的属性
- event.type
- event.preventDefault
- event.stopPropagation
- event.target
- event.pageX和event.pageY
- event.which
- event.metaKey
（8）移除事件
$().unbind();
（9）模拟操作
（10）其他用法
4.2 jq中的动画
（1）show()和hide()方法
- show()、hide()是jq中最基本的动画方法。
- 某元素调用该方法会使得该元的display样式改为"none"或者"block"。
- 值得注意的是：hide()会记住元素原先的display属性，当调用show()时，会根据hide()记住的属性值来显示元素。
- show()、hide()方法在不带任何参数的情况下，相当于css("display","none/block/inline")。
$("element").hide(); $("element").css("display","none"); //以上两种方法等效 - show()、hide()方法有一个参数代表动作的耗时：
$("element").show(1000); $("element").hide(1000);
（2）fadeIn()、fadeOut()
- fadeOut()：会在指定的时间内降低透明度，直到元素完全消失("display:none");，fadeIn()方法则相反。
- 即淡入淡出的效果
（3）slideUp()、slideDown()
- slideUp()、slideDown()只会改变元素的高度。
- 如果一个元素的display属性值为"none"，当调用slideDown()时，这个元素将由上至下延伸显示，slideUp()则与之相反。
jQuery中的任何动画效果，都可以指定是种速度参数，即“slow”“normal”和“fast”（事件长度分别为0.6秒、0.4秒、0.2秒）。当使用速度关键字时要加引号，输入使用数字作为事件参数则无需引号。
$("element").show("slow"); $("element").show(10000);
（4）自定义动画方法animate()
由于上述三类动画方法无法满足各种各样的动画需求，于是有了animate()方法来自定义动画，其语法结构如下：
animate( params , speed , callback );
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
详情请访问：http://www.w3school.com.cn/jquery/jquery_animate.asp
（5）p131 动画方法概括
4.3 视频展示效果实例
2016年4月2日
第3章 jq中的dom操作
3.1分类
（1）dom core
（2）html－dom
（3）css－dom
3.2 jq dom具体操作
1."增删改查"api
待实例化：
（1）如果给一个元素添加多个class值，那么就相当于合并了它们的样式
（2）如果有不同的class设定了同一个属性，则后者覆盖前者。
2.p78 attr()和addClass()的区别：
本质：前者会覆盖class值；后者则是是add即添加。
3.设置和获取html、文本和值
（1）html()
（2）text()
（3）val()
4.demo——yahoo邮箱登录框的提示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script type="text/javascript" src="框架/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function() {
//对地址进行操作
$("#address").focus(function() {
var txt_value = $(this).val();
if(txt_value=="请输入邮箱地址");
$(this).val("");
});
$("#address").blur(function() {
var txt_value = $(this).val();
if(txt_value=="");
$(this).val("请输入邮箱地址");
});
//对密码框进行操作
$("#password").focus(function() {
var txt_value = $(this).val();
if(txt_value=="请输入邮箱密码");
$(this).val("");
});
$("#password").blur(function() {
var txt_value = $(this).val();
if(txt_value=="");
$(this).val("请输入邮箱密码");
});
});
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址" />
<input type="text" id="password" value="请输入邮箱密码" />
<input type="button" value="登陆" />
</body>
</html>
3.3 网站的超链接和图片提示效果
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title></title>
7 <script type="text/javascript" src="框架/jquery-1.3.1.js"></script>
8 <script type="text/javascript">
9 $(function() {
10 var x = 10;
11 var y = 20;
12 $("a.tooltip").mouseover(function(e) {
13 this.myTitle = this.title;
14 this.title = "";
15 var imgTitle = this.myTitle?"<br />"+this.myTitle:"";
16 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素
17 $("body").append(tooltip); //追加至文档
18 $("#tooltip")
19 .css({
20 "top":(e.pageY+y) + "px",
21 "left":(e.pageX+x) + "px"
22 }).show("fast");
23 }).mouseout(function() {
24 this.title = this.myTitle;
25 $("#tooltip").remove(); //从文档删除
26 }).mousemove(function(e) {
27 $("#tooltip")
28 .css({
29 "top":(e.pageY+y) + "px",
30 "left":(e.pageX+x) + "px"
31 });
32 });
33 })
34 </script>
35 <style type="text/css">
36 * {margin: 0;padding: 0;font-size: 18px;}
37 /* tooltip */
38 #tooltip{
39 position:absolute;
40 border:1px solid #ccc;
41 background:#333;
42 padding:2px;
43 display:none;
44 color:#fff;
45 }
46 body{
47 margin:0;
48 padding:40px;
49 background:#fff;
50 font:80% Arial, Helvetica, sans-serif;
51 color:#555;
52 line-height:180%;
53 }
54 img{border:none;}
55 ul,li{
56 margin:0;
57 padding:0;
58 }
59 li{
60 list-style:none;
61 float:left;
62 display:inline;
63 margin-right:10px;
64 border:1px solid #AAAAAA;
65 }
66 </style>
67 </head>
68 <body>
69 <ul>
70 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPd" /></a></li>
71 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
72 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
73 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
74 </ul>
75 </body>
76 </html>
2016年4月1日
1.p51 如果你的项目较早的使用了jq代码或插件，若把jq升级到最新后，出错或者不能运行，那么很有可能是因为代码中使用了属性选择器的@符号而引起的。
2.p52 带空格与否的问题
var $t_a = $('.test :hidden');
以上代码是选取class为"test"的元素里面的隐藏元素
var $t_b = $('.test:hidden');
以上代码是选取隐藏的class为"test"的元素
3.$a.click(){return false}; //超链接不跳转（之前在《js dom编程艺术》一书中学到过，再次巩固）
4.其他选择器
jQuery的选择器插件扩展
（1）MoreSelectors for jQuery
（2）Basic XPath
其他使用css选择器的方法
（1）document.getElenmentsBySelector()
（2）cssQuery()
（3）querySelectorAll()
2016年3月31日
1.$=jQuery
2.p13 jq对象和dom对象的转换方法
3.p14 $()函数就是一个jquery对象的制造工厂
4.p27 $("#id")获取的永远是对象，所以不需要担心会出错，仅仅考虑length值，为1时，do something。
5.p50 一系列精准的选择器
6.p51 利用jq来改写前面的例子，然后进行列表效果实现，待练习
春上来 尺八 乐谱
6 .3 .2