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:垂直滚动条距离上边的位置