主要内容:
1、jQuery的位置属性及实例
(1)位置属性
(2)实例 --- 仿淘宝导航栏
2、jQuery的筛选方法及实例
(1)筛选方法
(2)实例一:嵌套选项卡
(3)实例二:小米官网滑动
(4)实例三:焦点轮播图
(5)实例四:动态实现轮播图
一、jQuery的位置属性及实例
1、位置属性
HTML部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery的位置属性</title> <style type="text/css"> *{ padding:0; margin:0; } #box{ position:relative; width:300px; height:200px; border:1px solid darkorange; padding:10px 5px; } p{ position:absolute; left: 50px; top:50px; } .box2{ width:200px; height:200px; margin:100px auto; border:1px solid mediumspringgreen; } </style> </head> <body style="height:2000px;width:2000px"> <div id="box"> <p>我是一个小小段落</p> </div> <button id="btn">动画</button> <div class="box2"></div> </body> <!-- 此处为jquery代码 --> </html>
jQuery部分
<script type="text/javascript"> $(document).ready(function(){ // 1、获取匹配元素的相对父元素的偏移 position console.log($("p").position().left); // 50 console.log($("p").position().top); // 50 var offsetTop = $("p").position().top + 50 +"px"; var offsetLeft = $("p").positon().left + 30 + "px"; $("#btn").click(function(){ $("p").animate({top:offsetTop,left:offsetLeft},1000); }) // 2、获取匹配元素,相对滚动条卷起的位置信息 scrollTop scrollLeft $(document).scroll(function(){ console.log("滚动条向右:"+$(document).scrollLeft()); console.log("滚动条向下:"+$(document).scrollTop()); }); // 3、offset 获取匹配元素在当前视图的相对偏移(浏览器) console.log($('#box').offset()); //{top: 0, left: 0} console.log($('#box').offset().top); console.log($('#box').offset().left); console.log($('#btn').offset().top); // 4、获取元素的宽高 console.log("宽"+$("#box").width()); // 300 console.log("高"+$("#box").height()); // 200 // 5、设置宽高 $("#box").width(600); // 6、获取内部宽度和外部宽度 // innerWidth:width + 2*padding 不包括边框,获取匹配元素的内部宽度 console.log("内部宽度:"+$("#box").innerWidth()); // 610 // outerWidth:width + 2*padding+2*boder 获取的匹配元素的外部宽度 console.log("外部宽度::"); }) </script>
2、实例
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 100%; } div img{ width: 100%; } .nav{display: none;} </style> </head> <body> <div class="top"> <img src="./img/top.jpg" alt="" /> </div> <div class="nav"> <img src="./img/nav.jpg"/> </div> <div class= 'taobao'> <img src="./img/taobao1.png"/> </div> <script src="../jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ var h = $('.top').height(); $(document).scroll(function(){ var scrolltop = $(document).scrollTop(); if(scrolltop>h){ $('.nav').css({display:'block',position:'fixed',top:0}); } else{ $('.nav').css({display:'none',position:'static',top:0}); } }) } ) </script> </body> </html>
二、jQuery的筛选方法及实例
1、jQuery筛选方法
实例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的常用筛选方法</title> <style type="text/css"> li.active{ font-size: 30px; } </style> </head> <body> <ul> <li class="List">1</li> <li >2</li> <li class="List">3</li> <li >4</li> <a href="https://www.cnblogs.com/schut/">暮光微凉</a> <a href="#" id="another">百度一下</a> </ul> <p class="p1">段落1</p> <p class="p2">段落2</p> <p class="p3">段落3</p> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ console.log($('li')); // jquery的遍历方法 .each() $('ul').children().each(function(index,ele){ console.log(index); // 索引 console.log(ele); // 值(element) var isList = $(this).hasClass('List'); if(isList){ $(this).css('color','orange'); } else{ // $(this).css('font-size','12px'); } }); // eq(index) 获取第n个元素 console.log($("p").eq(1)); // first() 获取第一个元素 console.log($("p").first()); // last() 获取最后一个元素 console.log($("p").last()); // children() 获取当前元素的所有子元素 console.log($('ul').children('.List')); console.log($('li')); // 获取选中元素的父元素 console.log($('a').parent()); // 获取选中元素的前一个同辈元素 console.log($('li').last().prev()); // 获取选中元素的之前的所有同辈元素 console.log($('li').last().prevAll()); // siblings(兄弟姐妹) 筛选给定的同胞同类元素(不包括给定元素本身) // console.log($('#another').siblings('a')); $('#another').siblings('a').hide(); $('li').hover(function(){ $(this).addClass('active').siblings('li').removeClass('active'); }) }) </script> </html>
2、实例一:嵌套选项卡
第一部分:html部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// html部分 <!DOCTYPE html> <html lang=""en> <head> <meta charset="UTF-8"> <title>嵌套选项卡案例<title> // 引入css文件 <link rel="stylesheet" type=""text/css href="index.css"> </head> <body> <div id="box"> <ul id="leftBox"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> <div id="rightBox"> <div style="display:block"> <p>a1</p> <ul> <li class="active">a1</li> <li>a2</li> <li>a3</li> <li>a4</li> </ul> </div> <div> <p>b1</p> <ul> <li class="active">b1</li> <li>b2</li> <li>b3</li> <li>b4</li> </ul> </div> <div> <p>c1</p> <ul> <li class="c1"></li> <li>c2</li> <li>c3</li> <li>c4</li> </ul> </div> <div> <p>d1</p> <ul> <li class="active">d1</li> <li>d2</li> <li>d3</li> <li>d4</li> </ul> </div> </div> </div> </body> </html>
第二部分:css部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/*页面初始化*/ *{ margin:o; padding:0; } /*去除无序列表的样式*/ ul{ list-style:none; } /*清除浮动产生的问题,三句话缺一不可*/ #box:after{ content:""; display:block; clear:both; } #box{ width:900px; border:1px solid mediumspringgreen; margin:30px auto; background:cadetblue; } #leftBox{ width:200px; float:left; } #leftBox li{ width:200px; height:88px; background:darkorange; margin-bottom:2px; color:white; font:30px/88px "华文楷体"; text-align:center; } #rightBox div{ width:700px; display:none; float:left; } #rightBox p{ width:100%; height:300px; font:100px/300px "Adobe 楷体 Std R"; text-align:center; background-color:#b2e567; } #rightBox ul{ /*父元素设置 display:table 使它成为一个块级表格元素 子元素设置 display:table-cell 使子元素成为表格单元格,就好比是在表格中一样*/ width:700px; display:table; } #rightBox li{ display:table-cell; background:pink; height:60px; border-right:2px solid cadetblue; font:30px/60px 'Adobe 宋体 Std L'; text-align:center; } #leftBox .active{ background:gold; color:black; } #rightBox .active{ background:white; color:black; }
第三部分:jQuery部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(functiuon(){ // 左侧鼠标移入时 $("#leftBox li").mouseover(function(){ // 修改自己的样式(仅对被鼠标选中的那个元素添加样式,而不给兄弟元素添加) $(this).addClass("active").siblings("li").removeClass("active"); // 修改右侧栏的div // console.log($(this).index); 获取当前元素的索引 $("#rigntBox div").eq($(this).index()).show().siblings("div").hide(); }); $("#rightBox li").click(function(){ $(this).addClass("active").siblings("li").removeClass("active"); var liValue = $(this).html(); // 获取当前元素的标签 // .parent() 表示父元素, .prev() 表示前一个元素 $(this).parent().prev().html(liValue); }) }) </script>
3、实例二:小米官网滑动
第一部分:html部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米官网滑动</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="box"> <ul> <li><a href=""><img src="images/xiaomi_01.png"></a><p>点击查看</p></li> <li><a href=""><img src="images/xiaomi_02.png"></a><p>点击查看</p></li> <li><a href=""><img src="images/xiaomi_03.png"></a><p>点击查看</p></li> <li><a href=""><img src="images/xiaomi_04.png"></a><p>点击查看</p></li> <li><a href=""><img src="images/xiaomi_05.png"></a><p>点击查看</p></li> <li><a href=""><img src="images/xiaomi_06.png"></a><p>点击查看</p></li> <li><a href=""><img src="images/xiaomi_07.png"></a><p>点击查看</p></li> <li><a href=""><img src="images/xiaomi_08.png"></a><p>点击查看</p></li> </ul> </div> </body> <script type="text/css" src="jquery-3.2.1.min.js"></script> <script type="text/css" src="index.js"></script> </html>
第二部分:css部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
*{ margin:0; padding:0; } ul{ list-style: none; } #box{ width:980px; height:610px; margin:30px auto; border:1px solid greenyellow; background-color: #bce8f1; } ul li{ width:235px; height:297px; margin-left:8px; margin-top:5px; position:relative; overflow: hidden; float:left; } ul p{ width:235px; height:100px; background-color: rgba(230,10,10,0.4); bottom:-100px; color:snow; text-align: center; position: absolute; }
第三部分:jQuery部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
$(document).ready(function(){
$("ul li").hover(function(){
// 鼠标滑动到li上时,p标签升起;stop()表示先结束之前的升起或落下操作,再执行后续操作
$(this).children("p").stop().animate({bottom:0},100);
},function(){
// 鼠标滑出li时,p标签升落下
$(this).children("p").stop().animate({bottom:-100},100)
})
})
未完,待续...