jQuery
我们为什么要用jQuery?
原生js开发的缺点:
查找元素比较麻烦,方法不多。
操作样式比较麻烦,需要进行iE版本的兼容。
动画麻烦。
HTML节点操作麻烦。
so自从有了jQuery,再也不用担心。
jQuery是DOM编程领域的霸主,简化元素js开发。
jQuery本质上是js,所以可以理解为js的一个库
jQuery可以方便我们兼容问题。
jQuery主要分三个大版本
1.* 主要兼容 IE6 7 8
2.* 不兼容 IE6 7 8
3.* 不兼容 IE6 7 8 但是语法更加简洁 (国内用的比较少)
咱这主要使用1.*的jQuery。
jQuery 主要分五个模块来说 选择器,DOM操作,动画,事件,扩展。
jQuery初步使用
我们再使用js的时候,是不是需要注意js声明的位置,因为js里的语句是在页面所有资源(图片 文件)加载完全后才执行。为了避免这种情况我们通过window.onload方法去保证js的加载。同样在jQuery也需要这么做,jQuery提供了两个方法
$(docment).ready(function(){
.......... 方法一
})
$(function(){
......... 方法二
})
这些入口韩式的作用就等同于window.onload
初探jQuery
我们看到最多的就是$符号,这个符号到底是什么意思呢
$本质是一个函数,参数不一样,对应的功能不一样
$("div") 参数是字符串 代表查找所有div元素
$("#btn1") 代表查找id为btn1的元素
还可以通过$将dom对象和jQuery进行互转。
选择器
jQuery支持所有的css1~css3的全部选择器。
ID选择器 $("#id")
class类选择器 $(".class")
标签选择器 $("标签选择器")
交集选择器 $("div,#demo")
并集选择器 $("p.demo")
后代选择器 $("p .demo")
子代选择器 $(".demo>li")
...
jQuery 自带的一些选择器
过滤选择器
$("li:eq(3)") 指定标签为li中的4个,因为下标是从0开始。
$("li:odd") li中所有奇数的li
$("li:even") li中所有偶数的li
筛选选择器
children( ) 获取指定的孩子$(".parent").children(".child")===$(".parent>.child")
find( ) 获取后代指定的元素 $(".parent").find(".child")===$(".parent .child")
siblings( ) 获取除了自己的所有的兄弟$(".demo").siblings("li")
parent( ) 获取改元素的父亲 $(".demo").parent()
eq(index) $(".demo").eq(1) ===$(".demo:eq(1)")
next( ) 下一个兄弟
prev( ) 上一个兄弟
jQuery操作样式属性
* 设置单个样式
$("li:odd").css("backgroundColor","#00f");
* 设置多个样式
$("li:odd").css("backgroundColor","#00f");
$("li:odd").css("fontSize","14px");
或者是
$("li:odd").css({"fontSize":"14px","backgroundColor":"#00f"});
css("属性")
需要注意是的:如果是获取多个元素的话,那么获取样式只会返回第一个元素的样式。若设置多个元素的属性的话,那么都能设置成功。
*class操作
addClass() 添加类样式
removeClass() 取消类样式
hasClass()判断是否有这个类样式
toggleClass()样式切换 $(".demo") toggleClass("demo") 若元素没有demo类样式则设置类样式,有则删除类样式。
index
index属性,在讲闭包的时候,我们遇到了一个问题,就是给一个数组添加方法,方法里面添加个参数,参数表示该方法对应的下标,故用了IIFE和强加变量的方法。在jQuery中,每一个jQuery都有index的参数,它表示的就是下标。
demo
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto;
padding-left: 10px;
}
.wrap>ul>li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
一级菜单栏目
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单栏目
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单栏目
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
<!--1 引入jquery文件-->
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
// 1 获取一级菜单
var $lis = $(".wrap>ul>li");
// 2 注册事件 onmouseenter onmouseout
$lis.mouseover(function() {
// 让对应二级菜单显示
$(this).css({
"height": '100px'
});
$(this).children('ul').show();
});
$lis.mouseout(function() {
// 让对应二级菜单隐藏
$(this).css({
"height": '30px'
});
$(this).children('ul').hide();
});
});
</script>
</body>
</html>
jQuery基本使用讲完已讲完,接下来会来讲jquery的动画和节点的操作,如有表达错的请谅解,并请提出指出,且修改错误,望能共同进步。