JQ01
JQ01
1、使用js的缺点
innerText的兼容性问题：低版本火狐浏览器不支持
textContent：火狐支持，ie678不支持
2、JQ初体验
1）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 200px;
margin-bottom: 10px;
background-color: #a43035;
display: none;
}
</style>
<!--1. 需要引入jQuery文件-->
<script src="jquery-1.12.4.js"></script>
<script>
//2. 入口函数的标准
$(document).ready(function(){
//注册事件，把on去掉，是一个方法
$("#btn1").click(function () {
//隐式迭代：偷偷的遍历，jQuery会自动的遍历，不需要我们遍历。
$("div").show(1000);
});
$("#btn2").click(function () {
$("div").text("我是内容");
});
});
</script>
</head>
<body>
<input type="button" value="btn1" id="btn1">
<input type="button" value="设置内容" id="btn2">
<div></div>
<div></div>
<div></div>
</body>
</html>
2）什么是jq?
js库：把一些常用到的方法写到一个单独的js文件，使用时直接去引用就可以了。学习jq，就是学习其中封装的方法。
3）jq的版本
版本繁多。
1.x版本：能兼容ie678
2.x版本：不兼容ie678
上述版本已不再更新
3.x版本：非常精简，不兼容ie678
压缩版，适用于生产环境，文件较小，删除了注释，换行，空格等，但基本没有阅读性
未压缩版：
适用于学习与开发环境，源码清晰，方便阅读
4）jq的入口函数
入口函数的目的是等待jq文件加载完成。引入jq文件的script标签推荐写在body标签的最后面，这样可以省去入口函数，但还是建议写上入口函数。
//引入jq文件
<script src="jquery-1.12.4.js"></script>
//写入口函数
第一种写法:
$(document).ready(function(){...
});
第二种写法(jq不存在覆盖问题)：
$(function(){
//里面可以写js代码
});
js的入口函数：JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。
window.onload=function(){
};
jq与js的入口函数之间的先后关系：js的入口函数要比jq的入口函数执行得要晚一些
5）jq对象与DOM（js）对象的区别：
js对象：使用js的方式获取到的元素就是js对象
例如通过document.getElementById该方法
jq对象：使用jq的方式获取到的元素就是jq对象
例如$(“li”);//获取所有的li，可自行用美元符 标识
jq对象与js对象间的联系：
jq对象就是js对象的一个集合，是一个伪数组，里面存放了大量的js对象
jq对象与js对象间的区别：
js对象不能调用jq对象的方法
jq对象也无法调用js对象的方法
只要通过以下方式就可以把js对象转为jq对象
$(js对象名).text("hh");//用美元符即可
jq对象转为js对象
var $li=$("li");
$li[0].style.backgroundColor="red";//通过数组的方式取出
或get方法：
$li.get(0)
总结：
6）$符号的实质
在取名时，仅是为了区分这是jq对象。
$其实是一个函数，在使用它时须跟小括号
参数不同，它的功能也不同
①参数是一个函数，将被作为入口函数使用
$(function(){...});
②参数为一js对象，将会把该对象转换为jq对象
$(domObj);
③参数为一字符串，用于找对象
$("div")
$("#id")
$(".className")
3、JQ的基本选择器
1）
与css中的用法一样。
交集选择
并集选择
层级选择器
过滤选择器：jq特有，冒号打头
筛选选择器
2）mouseenter与mouseseover的区别
mouseover：鼠标经过事件
mouseout：鼠标离开事件
jq专属事件:
mouseenter:鼠标进入事件
mouseleave鼠标离开事件
案例：下拉菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li {
background-image: url(imgs/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//mouseover：鼠标经过事件
//mouseout:鼠标离开事件
//mouseenter:鼠标进入事件
//mouseleave：鼠标离开事件
var $li = $(".wrap>ul>li");
//给li注册鼠标经过事件，让自己的ul显示出来
$li.mouseenter(function () {
//找到所有的儿子，并且还得是ul
$(this).children("ul").show();
});
$li.mouseleave(function () {
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
突出显示案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(".wrap>ul>li").mouseenter(function () {
$(this).css("opacity", "1").siblings().css("opacity", "0.4");
});
$(".wrap").mouseleave(function () {
//让所有的li都变亮
//$("li");
//$(".wrap li");
//$(".wrap>ul>li")
//$(this).children().children("li");
$(this).find('li').css("opacity", 1);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="data:images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
</html>
jq中对象调方法可一直调下去（链式编程）
手风琴案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {padding: 0;margin: 0;}
ul { list-style-type: none;}
.parentWrap {
width: 200px;
text-align:center;
}
.menuGroup {
border:1px solid #999;
background-color:#e0ecff;
}
.groupTitle {
display:block;
height:20px;
line-height:20px;
font-size: 16px;
border-bottom:1px solid #ccc;
cursor:pointer;
}
.menuGroup > div {
height: 200px;
background-color:#fff;
display:none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//思路分析：
//1. 给所有的span注册点击事件，让当前span的兄弟div显示出来
$(".groupTitle").click(function () {
//下一个兄弟：nextElementSibling
//链式编程：在jQuery里面，方法可以一直调用下去。
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
});
});
</script>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">标题1</span>
<div>我是弹出来的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题2</span>
<div>我是弹出来的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题3</span>
<div>我是弹出来的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>
案例：淘宝精品
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left, #center, #right {
float: left;
}
#left li, #right li {
background: url(images/lili.jpg) repeat-x;
}
#left li a, #right li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover, #right li a:hover {
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//找不到对象
$(function () {
$("#left>li").mouseenter(function () {
$("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
});
$("#right>li").mouseenter(function () {
$("#center>li").eq($(this).index() + 9).show().siblings().hide();
});
})
});
// $("#left>li").mouseenter(function () {
// //让center中对应下标的li显示，其他li隐藏
// var idx = $(this).index();
// $("#center>li:eq(" + idx + ")").show().siblings().hide();
// });
//
// $("#right>li").mouseenter(function () {
// var idx = $(this).index() + 9;
// $("#center>li").eq(idx).show().siblings().hide();
//
// //$("#center>li").eq(idx) :jq对象
// //$("#center>li").get(idx);：js对象
// });
// });
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="data:images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男包.jpg" width="200" height="250"/></a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男靴</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男包</a></li>
</ul>
</div>
</body>
</html>
双引号中不能直接写变量，要用"前半段字符串"+变量+"后半段字符串"的方式桥接
小区别：
3、JQ调错技巧
通过alert或在浏览器源代码处打断点
4、index方法详解
它是方法而不是属性
jq里几乎没有属性，都是方法
index()将返回当前元素在所有兄弟元素里面的索引
JQ01的更多相关文章
- 《2013传智播客视频》-wmv,avi,mp4.目录
\!--14俄罗斯方块\视频\.复习.avi; \!--14俄罗斯方块\视频\ 复习.avi; \!--14俄罗斯方块\视频\ 形状旋转.avi; \!--14俄罗斯方块\视频\ 判断形状能否变形.a ...
- 2013传智播客视频--.ppt,.pptx,.doc,.docx.目录
\!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.docx; \!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.pp ...
- Webpack 配置示例
Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...
随机推荐
- 【BZOJ1417】Pku3156 Interconnect
题解: 比较简单的一道题 显然我们只需要知道每个联通块的大小就可以了 然后发现x1+xn=30 其中xi<=xi+1的状态只有5000 所以直接记忆化搜索就可以了 emm原来map还可以映射ve ...
- 一起学Hive——使用MSCK命令修复Hive分区
最近在使用Hive的过程中,在备份数据时,经常会使用cp或mv命令来拷贝数据,将数据拷贝到我们新建备份表的目录下面,如果不是分区表,则上面的操作之后,新建的备份表可以正常使用,但是如果是分区表的,一般 ...
- 实际生产用法CMS和G1
java -Xms100m -Xmx100m -Xmn50m -XX:MetaspaceSize=20m -XX:MaxMetaspaceSize=20m -XX:+UseConcMarkSweepG ...
- Codeforces 356D Bacterial Melee dp
Bacterial Melee 我们发现所有合法串都是原序列的某个子序列(这个子序列相邻元素相等) 的扩展, 比如子序列为abc, 那么aabbbc, abbbcc 等都是合法串. 所以我们只需要dp ...
- TopCoder SRM500 Div1 1000 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/SRM500-1000.html SRM500 Div1 1000 设 \(v_1,v_2,\cdots ,v_9 ...
- 使用json web token
由来 做了这么长时间的web开发,从JAVA EE中的jsf,spring,hibernate框架,到spring web MVC,到用php框架thinkPHP,到现在的nodejs,我自己的看法是 ...
- 【python】函数式编程
No1: 函数式编程:即函数可以作为参数传递,也可以作为返回值 No2: map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的 ...
- appium环境搭建及项目实战
手机端自动化环境搭建比其他自动化环境搭建较为复杂,安装工具有点多,也会有很多坑,安装工具一定注意版本号对应问题. 一.我的电脑环境:win7 64位,安卓测试机4.4.2版本,Python3.6,a ...
- HDU 3416 Marriage Match IV 【最短路】(记录路径)+【最大流】
<题目链接> 题目大意: 给你一张图,问你其中没有边重合的最短路径有多少条. 解题分析: 建图的时候记得存一下链式后向边,方便寻找最短路径,然后用Dijkstra或者SPFA跑一遍最短路, ...
- 浅析Linux服务器集群系统技术
浅析Linux服务器集群系统技术 目录 前言 常用的服务器集群 集群系统的优势 LVS集群的通用体系结构 为什么使用层次的体系结构 为什么是共享存储 可伸缩Web服务 前言 总结两篇技术文章,努力学习 ...