jquery库使用二
一、尺寸和位置
1. 获取元素的尺寸
- 盒子内容的尺寸
- width()
- height()
- 盒子内容 + padding 的尺寸
1. innerWidth()
2. innerHeight() - 盒子内容 + padding + border 的尺寸
1. outerWidth()
2. outerHeight() - 盒子内容 + padding + border + margin 的尺寸
outerWidth(true)
outerHeight(true) - 实例演示:
效果:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取元素尺寸</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $div = $('.box'); // 盒子内容的尺寸 console.log($div.width()); console.log($div.height()); // 盒子内容 + padding 的尺寸 console.log($div.innerWidth()); console.log($div.innerHeight()); // 盒子的真实尺寸 : 内容 + padding + border console.log($div.outerWidth()); console.log($div.outerHeight()); // 盒子的真实尺寸 + margin console.log($div.outerWidth(true)); console.log($div.outerHeight(true)); }); </script> <style type="text/css"> .box{ width:300px; height:200px; border:10px solid #000; margin:20px; padding: 20px; background-color: gold; } </style> </head> <body> <div class="box"></div> </body> </html>
2. 获取位置信息
-
获取元素相对页面的绝对位置
- offset()
获取后又两个参数 一个是-
top:距离上方
-
ledft:距离左方
-
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取元素绝对位置</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $div = $('.box'); // 获取元素在页面的绝对位置 .offset() // var oPos = $div.offset(); //返回一个对象 $div.click(function(){ var oPos = $div.offset(); // left :左边的值 top : 上面的值 alert(oPos.left) console.log(oPos); document.title = oPos.left + '|' + oPos.top; }); }); </script> <style type="text/css"> .box{ width:200px; height:200px; background-color:gold; margin:50px auto 0; } </style> </head> <body> <div class="box"></div> </body> </html>
-
- offset()
-
获取可视区信息
- 获取可可视区高度
$(window).height(); - 获取可视区的宽度
$(window).width();
- 获取可可视区高度
-
获取滚动信息
- 滚动距离,距离最上方的高度 – 纵向滚动条
$(document).scrollTop() - 滚动距离,距离最左方的距离 – 横向滚动条
$(document).scrollLeft()
- 滚动距离,距离最上方的高度 – 纵向滚动条
-
页面滚动事件
$(window).scoll(function(){
…
}) -
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸计算</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // 可视区宽度 / 高度 console.log("可视区宽度:"+$(window).width()); console.log("可视区高度:"+$(window).height()); // 文档的宽度 / 高度 console.log("文档宽度:"+$(document).width()); console.log("文档高度:"+$(document).height()); // 获得页面的滚动距离 console.log("页面往上滚动的距离:"+ $(document).scrollTop()); console.log("页面往左滚动的距离:"+ $(document).scrollLeft()); }); </script> </head> <body> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> </body> </html>
3.置顶菜单
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>置顶菜单</title> <style type="text/css"> body{ margin:0; } .banner{ width:960px; height:200px; background-color: cyan; margin:0 auto ; } .menu{ width:960px; height: 100px; background-color: gold; margin:0 auto ; text-align:center; line-height: 100px; } .menu_back{ width: 960px; height:100px; margin:0 auto; display: none; } p{ text-align:center; color:red; } .totop{ width:60px; height:60px; background-color: #000; color:#fff; position: fixed; right:20px; bottom:50px; font-size: 40px; text-align:center; line-height:60px; border-radius: 60px; cursor: pointer; /*变成手*/ display: none; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $menu = $('.menu'); var $menu_back = $('.menu_back'); var $totop = $('.totop'); // 滚动事件 $(window).scroll(function(){ // 滚动距离上面的距离 var iNum = $(document).scrollTop(); // document.title = iNum; // 显示在标题栏 if(iNum>200){ $menu.css({ // 固定定位 "position":"fixed", "left":"50%", "top":0, "marginLeft":-480 }); // 解决出现固定定位时候文档流跳动 $menu_back.show(); // 显示 } else{ $menu.css({ // 设置成默认 "position":"static", "marginLeft":"auto" }) $menu_back.hide(); // 隐藏 } if (iNum>400){ $totop.fadeIn(); // 淡入 }else{ $totop.fadeOut(); // 淡出 } }); // 兼容的写法 回到顶部 $totop.click(function(){ $('html,body').animate({'scrollTop':0}); }); }); </script> </head> <body> <div class="banner"></div> <div class="menu">菜单</div> <div class="menu_back"></div> <div class="totop">↑</div> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> <p>文档内容</p> <br /> <br /> </body> </html>
二、元素属性操作
-
读取属性
.pop(属性) -
设置属性
pop({属性:值}) -
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素的属性操作</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $a = $('.link'); var $img = $('#img01'); var $div = $('#div1'); // 读取 class 属性值 .prop() console.log($a.prop("class")); // 没有设置的就为空的 console.log($a.prop("title")); // 获取的是图片的绝对地址 console.log($img.prop("src")); // 设置属性 $a.prop({ "href":"https://www.baidu.com", // "title":"去到百度网链接" }); // 读取标签内包含的内容 .html() console.log($a.html()); // 往标签中写东西 .html("xxxxx") $div.html("这是一个div") }); </script> </head> <body> <a href="#" class="link" >这是一个链接</a> <img src="images/goods001.jpg" id="img01" alt="水果"> <div id="div1"></div> </body> </html>
三、jquery循环
- 使用each() 第一个参数是索引值
- 使用方法:
$li.each(function(index){
.......
});
-
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery循环</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $li = $('.list li'); // jquery循环 // 里面有几个就执行几次 // index : 第一个参数 索引值 (index 名称可以改) $li.each(function(index){ // 获取索引值 // alert(index); // alert($(this).html()); // alert($(this).index()); if ($(this).index()%2 == 0){ $(this).css({"backgroundColor":"gold"}); } }); }); </script> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
四、 手风琴实例
- 效果图:
-
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴</title> <style type="text/css"> *{ margin:0; padding:0; } .accordion{ width:286px; height:180px; margin:50px auto 0; overflow: hidden; } .accordion ul{ list-style: none; width:1000px; position:relative; } .accordion li{ width:201px; height:180px; color:gold; float:left; } .accordion li span,img{ height:180px; display:inline-block; float:left; } .accordion li span{ width:20px; line-height: 20px; text-align:center; font-size: 16px; color:#000; cursor: pointer; /*变成手*/ border-right:1px solid #666; } .bar01,.bar02,.bar03,.bar04,.bar05{ position: absolute; left:0px; top:0px; } .bar01 span{ background-color: red; } .bar02{ background-color: cyan; left:202px; } .bar03{ background-color: yellowgreen; left:223px; } .bar04{ background-color: yellow; left:244px; } .bar05{ background-color: green; left:265px; </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $li = $('.accordion li'); $li.click(function(){ // alert($(this).html()); $(this).animate({ "left":21*$(this).index() }); // 上面的所有 $(this).prevAll().each(function(){ // $(this) 为每一个循环的li $(this).animate({'left':21*$(this).index()}); }); // 5:286-21 // 4: 286-21*2 // 3: 286-21*3 // 2: 286-21*4 // 1: 286-21*5 $(this).nextAll().each(function(){ $(this).animate({'left':286 - 21*(5-$(this).index())}); }); }); }); </script> </head> <body> <div class="accordion"> <ul> <li class="bar01"><span>图片01</span><img src="images/goods001.jpg" alt="水果"></li> <li class="bar02"><span>图片02</span><img src="images/goods002.jpg" alt="水果"></li> <li class="bar03"><span>图片03</span><img src="images/goods003.jpg" alt="水果"></li> <li class="bar04"><span>图片04</span><img src="images/goods004.jpg" alt="水果"></li> <li class="bar05"><span>图片05</span><img src="images/goods005.jpg" alt="水果"></li> </ul> </div> </body> </html>
五、jQuery事件
1. 事件操作
- 获得焦点和失去焦点
- blur() 元素失去焦点
- focus() 元素获得焦点
- 表单元素的值发生变化
change() - 鼠标事件
- click() 鼠标单击
- dblclick() 鼠标双击
- mouseover() 鼠标进入(进入子元素也触发)
- mouseout() 鼠标离开(离开子元素也触发)
- mouseenter() 鼠标进入(进入子元素不触发)
- mouseleave() 鼠标离开(离开子元素不触发)
- hover() 同时为mouseenter和mouseleave事件指定处理函数
- mouseup() 松开鼠标
- mousedown() 按下鼠标
- mousemove() 鼠标在元素内部移动
- toggle() 根据鼠标点击的次数,依次运行多个函数
- 键盘事件
- keydown() 按下键盘
- keypress() 按下键盘
- keyup() 松开键盘
- 元素加载完毕
load() - DOM加载完成
ready() - 浏览器窗口发生变化
resize() - 滚动条位置发生变化
scroll() - 用户选中文本框中的内容
select() - 用户递交表单
submit() - 用户离开页面
unload()
2. 事件使用
-
获得焦点和失去焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery事件</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // focus() : 获得焦点的时候 // 鼠标点了输入框 /* 获得焦点的时候做什么事情 $('#input01').focus(function(){ alert("获得焦点"); }); */ // 一般这个都这样使用 当用户刚进入的时候输入框多的焦点 // 和 autofocus 样式属性一样 $('#input01').focus(); // 当元素失去焦点的时候做什么事情 $('#input01').blur(function(){ // 获取失去焦点后value的值 用val() var $sVal = $(this).val(); alert("失去焦点"); alert($sVal); }); $('#from1').submit(function(){ alert("提交"); // 阻止默认的提交行为 一般用ajax提交 return false; // 阻止表单提交 }); }); </script> </head> <body> <!-- focus() 一般用来让 input 元素在开始就获得焦点(不能两个同时获得焦点) blur() 元素失去焦点 后做什么事情 在输入两次密码后失去焦点后判断两次输入的是否正确 submit() 提交 表单事件 --> <!-- action:提交地址 提交数据一定要加name属性 seach获取提交属性 return false 可以阻止默认提交行为 --> <form id="from1" action=""> <input type="text" name="" id="input01"> <input type="text" name="" id="input02"> <input type="submit" name="" value="提交"> </form> </body> </html>
-
鼠标移入移出事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出事件</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // 移入里面的子元素也会触发 -- 事件冒泡的原因 $('.con').mouseover(function(){ alert("移入"); }); // 移出里面的子元素也会触发 -- 事件冒泡的原因 $('.con').mouseout(function(){ alert("移出"); }); // 移入/移出 子元素不出触发 // $('.con2').mouseenter(function(){ // alert("移入"); // }); // $('.con2').mouseleave(function(){ // alert("移出"); // }); // 上面两个合并 $(".con2").hover(function(){ alert("移入"); },function(){ alert("移出"); }) }); </script> <style type="text/css"> .con,.con2{ width:200px; height:200px; background-color: gold; } .box,.box2{ width:100px; height:100px; background-color: green; } </style> </head> <body> <!-- // 事件冒泡的原因 mouseover() : 鼠标移入的事件 移入到里面的子元素也算 mouseout() : 鼠标移出的事件 移出子元素也会触发 // 移入/移出子元素不会触发 解决上面两个事件存在的问题 mouseenter() : 鼠标移入事件 mouseleave() : 鼠标移出事件 // 合并 上边两个 hover(移入事件,移出事件) --> <div class="con"> <div class="box"></div> </div> <br /> <br /> <div class="con2"> <div class="box2"></div> </div> </body> </html>
-
resize事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>resize事件</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> // resize() : 当窗口变动的时候执行的操作 // 要绑定在$(windows)上 $(window).resize(function(){ var $w = $(window).width(); document.title = $w; }); </script> </head> <body> </body> </html>
3.绑定事件的方法
-
绑定一个事件
$('#btn').click(function(){});
-
绑定多个事件
$('#btn').bind('click mouseover',function(){ alert("触发事件绑定的函数"); // 按钮 解绑的事件名称 // 第一次移入的时候会触发事件第二次就不会有了 $(this).unbind('mouseover'); });
六、事件冒泡和时间委托
1. 事件冒泡
-
什么是事件冒泡
理解:当一个对象上触发事件的时候(点击,移入、移出等),如果这个对象绑定了这个时间则执行,执行之后就会向父级传递,如果父级绑定了这类事件就执行,然后在往父级传递
简单说就是:子集事件触发 -> 父级(有就执行没有不执行) -> 父级的父级 -> … -
阻止事件冒泡的方法
- event.stopPropagation();
- return false;
-
事件冒泡的作用:
可以做事件的委托,即所有的子元素都由最外层父级元素控制,减少了代码的冗余,减少事件的绑定,提高性能 -
使用验证实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ //可以阻止事件冒泡 $(".son").click(function(event){ alert(1); // 使用event 对象的 stopPropagation() 方法阻止冒泡 // event.stopPropagation(); // 也可以用这个阻止事件冒泡 return false; }); $('.father').click(function(){ alert(2) }); $('.grandfather').click(function(){ alert(3); }); // 所有标签的顶级 最大的 // 整个文档 html $(document).click(function(){ alert("这是顶级"); }) }); </script> <style type="text/css"> .grandfather{ width:300px; height:300px; background-color: green; position: relative; } .father{ width:200px; height:200px; background-color: gold; } .son{ width:100px; height:100px; background-color: red; position: absolute; left:0; top:400px; } </style> </head> <body> <!-- 事件冒泡原理: 通过标签往上传 当子集有触发事件的时候,就会往父级传,如果父级绑定函数了就会执行,父级接着往上传 子集事件触发 -> 父级(有就执行没有不执行) -> 父级的父级 -> ... 阻止事件冒泡: 使用event 对象的 stopPropagation() 可以直接用 return false return false; -- 阻止默认行为 阻止事件冒泡 结束函数 --> <div class="grandfather"> <div class="father"> <div class="son"></div> </div> </div> </body> </html>
-
弹窗实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面弹窗</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#btn').click(function(){ $('.pop_con').fadeIn(); // 动画弹出 // $('.popo_con').show(); // 显示 return false; // 阻止事件冒泡 }); // 出现事件冒泡 将事件传递到了父级 document $(document).click(function(){ $('.pop_con').fadeOut(); }); $('.pop').click(function(){ // 阻止事件冒泡 防止传递到父级 return false; }); $('.close').click(function(){ $('.pop_con').fadeOut(); }); }); </script> <style type="text/css"> .pop{ /*弹框*/ position: fixed; width:500px; height: 300px; background-color: #fff; border:3px solid #000; left:50%; top:50%; margin-left:-250px; margin-top: -150px; z-index:9999; } .mask{ /*弹框背景*/ position: fixed; width: 100%; height:100%; background-color: #000; opacity: 0.3; /*兼容IE*/ filter:alpha(opacity=30); left:0; top:0; z-index:9998; } .pop_con{ /*默认为隐藏*/ display: none; } .close{ float: right; font-size: 30px; text-decoration: none; } </style> </head> <body> <input type="button" name="" value="弹出" id="btn"> <div class="pop_con"> <div class="pop"> 投资金额: <input type="text" name=""> <a href="#" id="close" class="close">×</a> </div> <!-- 弹窗后的背景 --> <div class="mask"></div> </div> </body> </html>
2. 事件委托
-
原理
- 针对多个子元素做的操作
- 对于节点操作新加入的标签不会给反应 – 要重新绑定一次,这个可以使用事件委托来解决
- 父元素做子元素的代理 然后判断操作,然后给子元素响应的设定
-
操作演示实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件委托</title> <style type="text/css"> .list{ background-color: gold; list-style: none; padding: 10px; } .list li{ height:30px; background-color: green; margin:10px; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // 自动绑定了8次 eq(0).click eq(1).click() // 损耗性能 -- 一般用事件委托的方式 // 对于节点操作后新加入的标签不会给反应 /* $('.list li').click(function(){ $(this).css({"backgroundColor":"red"}); }); */ // 事件委托 delegate(x,y,z) x:代理什么 y: 代理事件 z: function() $('.list').delegate('li','click',function(){ // $(this): 代表的是委托的子元素,即那个li元素 $(this).css({"backgroundColor":'red'}); }); // 新建一个li元素 赋值个$li变量 var $li = $('<li>9</li>'); // 将新建的元素 放到ul的子集元素的最后面 -- 节点操作 // 要是不用事件委托的话,要给新加入的li单独绑定样式操作 $('.list').append($li); }); </script> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
七、总结
- return的作用
- 要掌握事件委托,即就想如今的菜鸟驿站一样,由上一级代理操作