<读书笔记>《锋利的jQuery》

原创

箫声远 2021-05-19 13:22:09 ©著作权

文章标签 jQuery教程 jQuery学习 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者箫声远的原创作品，请联系作者获取转载授权，否则将追究法律责任

<读书笔记>《锋利的jQuery》_jQuery教程

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() 方法切换元素的可见状态。

（5）事件冒泡

表单中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>