前端开发之jQuery位置属性和筛选方法
主要内容：
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>
2、实例
<!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筛选方法
实例代码：
<!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部分
// 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部分
/*页面初始化*/
*{
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部分
<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部分
<!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="data:images/xiaomi_01.png"></a><p>点击查看</p></li>
<li><a href=""><img src="data:images/xiaomi_02.png"></a><p>点击查看</p></li>
<li><a href=""><img src="data:images/xiaomi_03.png"></a><p>点击查看</p></li>
<li><a href=""><img src="data:images/xiaomi_04.png"></a><p>点击查看</p></li>
<li><a href=""><img src="data:images/xiaomi_05.png"></a><p>点击查看</p></li>
<li><a href=""><img src="data:images/xiaomi_06.png"></a><p>点击查看</p></li>
<li><a href=""><img src="data:images/xiaomi_07.png"></a><p>点击查看</p></li>
<li><a href=""><img src="data: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部分
*{
margin:;
padding:;
}
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部分
$(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)
})
})
未完，待续...
前端开发之jQuery位置属性和筛选方法的更多相关文章
- 前端开发之jQuery属性和文档操作
主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...
- 前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
- 前端开发之jQuery库
使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...
- 前端开发之jQuery效果篇
主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果 一.显示与隐藏 显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...
- ＃笔记＃ 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- 前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性 二.盒模型 三.padding属性 四.border属性 五.margin属性 六.标准文档流 七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- HTML5+JS手机web开发之jQuery Mobile初涉
一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...
随机推荐
- 关于oceanbase中存储过程的设计与实现
转自http://www.zhujuncoding.com/index.php/Index/blogview?id=82 这篇文章是关于在淘宝的数据库oceanbase中添加存储过程支持的文章,oce ...
- contentType 'text/xml; charset=UTF-8' conflicts问题
Resin升级到3.1.3后,有同事发现原来在Resin 3.0.xx下成功运行的部分jsp文件(输出xml格式文件)编译出错: 1234567 500 Servlet Exception XXXXX ...
- .net常用正则表达式小结
好久没有些博客了,今天就随便写点工作当中遇到的一些问题.正则表达式估计大家在开发的过程中都会遇到,下面是我平时用到的以及自己整理的一些常用的正则表达式,供大家学习和参考. "^\d+$&qu ...
- [linux]df 磁盘100%Used告警，du显示目录状态良好的故障排查
1.回顾: 某在线主机深夜连续接到告警系统的disk Used 超限告警. 登陆主机查看却遇到了困惑:在检查磁盘使用量 df –h 出来的磁盘使用量确实和告警信息一样,已经被100%占用,但是查看目录 ...
- Jenkins搭建windows service自动编译发布环境
类库项目(Task)部署 前面搭建了Web站点的环境,类库项目发布不同于站点项目,它只需要将MSBuild编译出来的dll复制到目标服务器上即可,而不需要通过Web Deploy,下面来说一下如何发布 ...
- soql取第一件数据
User u = [select ID,Name from User Limit 1];
- ES6必知必会 （七）—— Generator 函数
Generator 函数 1.Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,通常有两个特征: function关键字与函数名之间有一个星号: 函数体内部使 ...
- 系列文章--oracle简单入门教程
oracle入门很简单:八.oracle数据表 1.创建oracle数据表创建oracle数据表的语法如下: create table命令用于创建一个oracle数据表:括号内列出了数据表应当包含的列 ...
- 【monkeyrunner】monkeyrunner脚本录制和回放
脚本录制 1.连接你已经打开调试模式的ANDROID设备或模拟器,输入adb devices 2.运行录制脚本.在cmd窗口输入 monkeyrunner recorder.py #recorder. ...
- eaccelerator详解
之前在看书的时候看到一个eaccelerator,以前也没用过 不知道是啥东东,不知道以后会用到不,先mark一下吧 eAccelerator是一个自由开放源码php加速器,优化和动态内容缓存,提高了 ...