主要内容：
1、jQuery的位置属性及实例
（1）位置属性
（2）实例 --- 仿淘宝导航栏
2、jQuery的筛选方法及实例
（1）筛选方法
（2）实例一：嵌套选项卡
（3）实例二：小米官网滑动
（4）实例三：焦点轮播图
（5）实例四：动态实现轮播图
一、jQuery的位置属性及实例
1、位置属性
HTML部分
<!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> 未完，待续...
前端开发之jQuery位置属性和筛选方法
原文地址：https://www.cnblogs.com/schut/p/9568926.html