jQuery-day02

事件
change 改变，单选复选按钮状态改变，下拉列表框切换选项

$(selector).事件(匿名函数)

bin绑定只能绑定已经存在的元素，对于动态添加的元素无法绑定
$(selector).bind(事件名,匿名函数)
$(selector).bind(事件名事件名2,匿名函数)

on 可以用于动态添加的元素绑定事件，推荐使用
详情看on.html 中注释

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9     <div>test</div>
10 
11     
12     <input type="button" value="添加span" onclick="addSpan()"/>
13 </body>
14 </html>
15 <script src="../jquery-3.2.1.min.js"></script>
16 <script>
17     function addSpan(){
18         $("body").append("<span>abc</span>");    
19     }
20 
21     /*
22     绑定一个事件
23     $("div").on('click',function(){
24         alert(123);    
25     });
26     
27     对动态添加的元素绑定事件
28     $(document).on('click','span',function(){
29         alert(456);    
30     })
31     多个事件绑定多个函数，调用同一个函数
32     $("div").on("click mouseover",function(){
33         alert(123);
34     });
35     同时给多个元素绑定多个事件
36     $(document).on({
37         mouseover:function(){
38             alert("over中");
39         },
40         click:function(){
41             alert("单击中");
42         },
43         dbclick:function(){
44             alert("双击中");
45         }
46     },"div,span,#test");
47     
48     绑定自定义事件，并且传参
49     $("div").on('click',{username:"老王",age:18},showName);
50     function showName(dataList){
51         alert("名字为"+dataList.data.age);
52     }
53 */
54 
55 
56 
57 
58 
59 </script>

动画
show() 显示隐藏的元素，可以指定速度，
hide() 隐藏显示的元素

slideDown()
slideUp()

不希望内容溢出当前容器，就给当前容器添加滚动条
overflow:滚动条属性 scroll可见 hidden隐藏
overflow-x:设置水平滚动条
overflow-y:设置垂直滚动条

javascript中设置滚动条的位置
scrollLeft:水平滚动条距离左边的位置
scrollTop:垂直滚动条距离上边的位置