<读书笔记>《锋利的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 网站的超链接和图片提示效果

 <!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-1.3.1.js"></script>

     <script type="text/javascript">

         $(function() {

             var x = 10;

             var y = 20;

             $("a.tooltip").mouseover(function(e) {

                 this.myTitle = this.title;

                 this.title = "";

                 var imgTitle = this.myTitle?"<br />"+this.myTitle:"";

                 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素

                 $("body").append(tooltip); //追加至文档

                 $("#tooltip")

                     .css({

                         "top":(e.pageY+y) + "px",

                         "left":(e.pageX+x) + "px"

                     }).show("fast");

             }).mouseout(function() {

                 this.title = this.myTitle;

                 $("#tooltip").remove(); //从文档删除

             }).mousemove(function(e) {

                 $("#tooltip")

                     .css({

                         "top":(e.pageY+y) + "px",

                         "left":(e.pageX+x) + "px"

                     });

             });

         })

     </script>

     <style type="text/css">

         * {margin: 0;padding: 0;font-size: 18px;}

         /* tooltip */

         #tooltip{

             position:absolute;

             border:1px solid #ccc;

             background:#333;

             padding:2px;

             display:none;

             color:#fff;

         }

         body{

             margin:0;

             padding:40px;

             background:#fff;

             font:80% Arial, Helvetica, sans-serif;

             color:#555;

             line-height:180%;

         }

         img{border:none;}

         ul,li{

             margin:0;

             padding:0;

         }

         li{

             list-style:none;

             float:left;

             display:inline;

             margin-right:10px;

             border:1px solid #AAAAAA;

         }

     </style>

 </head>

 <body>

     <ul>

         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPd" /></a></li>

         <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>

     </ul>

 </body>

 </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