目录
对比JavaScript的入口函数jQuery的入口函数,执行时机
什么是jQuery?
jQuery是一个快速,小巧,功能丰富的JavaScript库。 它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。 通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。
下载jQuery
官方网址:http://jquery.com/
拉到底部,点击这里,我们可以看到过去jQuery发布的版本
而这里,能查看到所有的版本。
点开可以看到很多个版本,有3.0的,有2.0的。
下载版本时要注意浏览器的兼容问题,从jQuery2.0起就不再兼容IE6-8,国内使用JQuery主要是为了兼容IE6-8,所以我这里下载1.x版本的
类似百度等网站使用的jQuery也是1.x版本的
下载分为未压缩版和压缩版
压缩版和未压缩版的区别除了文件大小以外
压缩版的代码删除了一些注释、空格,基本没有阅读性,所以压缩版更适合生产环境
未压缩版适合学习和开发环境
除此以外没有其他区别
空白处右键另存为即下载成功
jQuery的入口函数
首先要引入jQuery(我这里写了自己电脑上的jQuery的绝对路径,在开发中,一般我们使用相对路径或者从网络上加载资源)
<script type="text/javascript" src="D:\Development\jQuery\jquery-1.12.4.js"></script>
其次,写入口函数,当然入口函数有两种写法
// JQuery入口函数第一种写法
$(document).ready(function () {
alert("jQuery入口函数第一种写法");
});
// JQuery入口函数第二种写法
$(function () {
alert("jQuery入口函数第二种写法");
});
$(document).ready 入口函数的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。简单地说,入口函数就是文档加载完要执行的函数。
下面看个示例:
示例1-1
<!DOCTYPE html>
<html>
<head>
<title>jQuery入口函数</title>
</head>
<body>
<div>jQuery_1</div>
<div>jQuery_2</div>
<div>jQuery_3</div>
</body>
<script type="text/javascript" src="D:\Development\jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">
// jQuery入口函数第一种写法
$(document).ready(function () {
alert("jQuery入口函数第一种写法");
});
// jQuery入口函数第二种写法
$(function () {
alert("jQuery入口函数第二种写法");
})
</script>
</html>
演示效果
对比JavaScript的入口函数jQuery的入口函数,执行时机
文档的加载顺序是从上往下,边解析边执行
- JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
- jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
jQuery对象和DOM对象的区别
1.DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是DOM对象。
<div id="div1">DOM对象</div>
var div1 = document.getElementById("div1");
div1.style.backgroundColor="pink";
2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
<div id="div1">jQuery对象</div>
//jQuery的方法css(name, value)
$("#div1").css("backgroundColor","blue");
3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
4.DOM对象与jQuery对象的方法不能混用。
DOM对象不能调用jQuery对象的方法
<div id="div1">DOM对象</div>
var div1 = document.getElementById("div1");
div1.css("backgroundColor","pink");
运行结果如图所示:
这里,你可以自己想想,前面我们说到,jQuery就好比DOM对象的一个伪数组,一个数组的元素可以调用数组的方法吗?
下面看一个示例:
示例1-2
<!DOCTYPE html>
<html>
<head>
<title>jQueryTest2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($("li"));
})
</script>
</html>
演示效果
从示例1-2里,我们打印了jQuery对象,展开可以看到,jQuery对象就像是DOM对象的集合,封装了DOM对象。
说白了,就是jQuery对象里面放了一些DOM对象,然后自身也有一些jQuery方法。所以jQuery对象也不能直接调用DOM对象的方法。因此,DOM对象的方法和jQuery对象的方法不能混用。
jQuery对象和DOM对象的互相转换
下面我们看一个示例:
示例1-3
<!DOCTYPE html>
<html>
<head>
<title>DOM对象和jQuery对象的转换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
<div id="div1">HelloWorld!!!</div>
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script>
$(function () {
// DOM对象转换成jQuery对象
var div1 = document.getElementById("div1");
var $div1 = $(div1);
$div1.text("Welcome to jQuery");
// jQuery对象转换成DOM对象
var $li = $("li");
// 方法一:
$li[0].style.backgroundColor = "red";
$li[2].style.backgroundColor = "red";
// 方法二:
$li.get(1).style.backgroundColor = "blue";
$li.get(3).style.backgroundColor = "blue";
})
</script>
</html>
运行结果如图所示:
$符号的实质
我们这里还是用示例1-3的代码来讲解一下$符号的实质
var $li = $("li");
从左往右看,第一个$符号是可有可无的,代表这个变量是jQuery对象,当然不写也是可以的,不过一般为了能够比较容易区分jQuery对象和DOM对象,我们还是写上$符号。
// jQuery对象转换成DOM对象
//两种写法功能一样
var $li = $("li");
var li = $("li");
第二个$符号就不是可有可无的,我们可以将其看作是一个函数,这个函数的功能是将DOM对象转换为jQuery对象,返回值是一个jQuery对象。
下面我们打印一下$符号:
示例1-4:
<!DOCTYPE html>
<html>
<head>
<title>$符号的实质</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>$符号的实质</div>
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
console.log(typeof $);
})
</script>
</html>
运行结果如图所示:
$符号的三种用法
示例1-5:
<!DOCTYPE html>
<html>
<head>
<title>$符号的实质</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>$符号的实质</div>
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">
// $符号的三种用法
//1.入口函数
$(function () {
}
//2.将DOM对象转换成jQuery对象
$(domobj);
// 3.参数是一个字符串,用来寻找对象,类似DOM的getElementById等之类的函数
// 标签选择器:$("tagName") 例如
// <div>这是一个div</div>
// $("div")
// ID选择器:$("#id") 例如
// <button id = "#btn"></button>
// $("#btn")
// 类选择器:$(".class") 例如
// <div class = "div1">这是一个div</div>
// $(".div1")
</script>
</html>
jQuery的基本选择器&层级选择器
上面的示例中我们提到过了ID选择器,类选择器,标签选择器,下面我们再具体地介绍一下这些选择器
基本选择器
名称 | 用法 | 描述 |
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
层级选择器
名称 | 用法 | 描述 |
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
示例1-6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的选择器</title>
</head>
<body>
<ul>
<li id="one">我是第1个li</li>
<li class="two">我是第2个li</li>
<li>我是第3个li</li>
<li id="green">我是第4个li</li>
<li class="five">我是第5个li</li>
<li class="yellow">我是第6个li</li>
<li class="yellow">我是第7个li</li>
<li class="yellow">我是第8个li</li>
<li id="father">
<p>我是第9个li</p>
<span><p>这是获取不到的子孙元素</p></span>
</li>
<li id="mother">
<p>我是第10个li</p>
<span><p>这是获取得到的子孙元素</p></span>
</li>
</ul>
<div>这是一个DIV</div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
//jQuery的方法css(name, value)
//name:样式名 value:样式值
$(function () {
//ID选择器$("#id");获取指定ID的元素
$("#one").css("backgroundColor", "red");
//类选择器$(".class");获取同一类class的元素
$(".two").css("backgroundColor", "blue");
//标签选择器$("div");获取同一类标签的所有元素
$("div").css("backgroundColor", "pink");
//并集选择器$("div,p,li");使用逗号分隔,只要符合条件之一就可。
$("#green, .five").css("backgroundColor", "green");
//交集选择器$("div.redClass");获取class为redClass的div元素(说白了,就是两个选择器粘一起)
$("li.yellow").css("backgroundColor", "yellow");
//子代选择器$("ul>li");使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
$("#father>p").css("backgroundColor", "orange");
//后代选择器 $("ul li");使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
$("#mother p").css("backgroundColor", "purple");
})
</script>
</html>
运行结果如图所示:
Mouseenter和mouseover的区别
我们这里利用w3school的一个例子来讲解
http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover
可以看到不管穿过mouseover注册的元素还是其子元素,都会触发其事件,而mouseenter事件只在经过其注册的元素才会触发事件,所以看起来,mouseover触发的事件会比较频繁,可能会导致效率低下,所以一般我们更加常用mouseenter事件。
为了能更区分地那我们再看一个示例
示例1-7
<!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>
运行结果如图所示:
如果上面的示例用mouseover和mouseout来做的话,会产生怎样的效果呢?
jQuery的过滤选择器&筛选选择器
ID选择器,类选择器,标签选择器归属于基本选择器,而并集选择器和交集选择器则归属于层级选择器。
当然,jQuery里面除了上面的基本选择器和层级选择器以外,还有个过滤选择器、筛选选择器
过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
下面看示例1-8:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现隔行变色</title>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
//:even下标为偶数,过滤
$("li:even").css("backgroundColor","red");
//:odd下标为奇数,过滤
$("li:odd").css("backgroundColor","blue");
//:eq 参数是伪数组的下标,过滤
$("li:eq(5)").css("fontSize", "30px");
//:gt 大于XXX下标,过滤
$("li:gt(7)").css("fontSize", "27px");
})
</script>
</html>
运行结果如图所示:
这里我介绍了部分过滤选择器,当然还有:first, :last等其他的过滤选择器,这里不作介绍
筛选选择器
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 | 用法 | 描述 |
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子类选择器 |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
下面看示例1-9:
示例1-9:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery筛选选择器</title>
</head>
<body>
<div class="test">
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</div>
<div class="test1">
<div>
<p>我是DIV里的p元素</p>
</div>
<ul>
<p>我是ul里的p元素</p>
</ul>
<p>我是p元素</p>
</div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
//找 .test>ul下的所有子元素
$(".test>ul").children().css("backgroundColor", "red");
//找 .test>ul下的所有兄弟
$(".test>ul").siblings().css("backgroundColor", "pink");
//找 .test1下的所有p元素
$(".test1").find("p").css("backgroundColor", "orange");
})
</script>
</html>
运行结果如图所示
index方法详解
示例1-10:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的index方法详解</title>
</head>
<body>
<ul>
<li><a href="#">我是第1个链接</a></li>
<li><a href="#">我是第2个链接</a></li>
<li><a href="#">我是第3个链接</a></li>
<li><a href="#">我是第4个链接</a></li>
<li><a href="#">我是第5个链接</a></li>
<li><a href="#">我是第6个链接</a></li>
<li><a href="#">我是第7个链接</a></li>
<li><a href="#">我是第8个链接</a></li>
<li><a href="#">我是第9个链接</a></li>
<li><a href="#">我是第10个链接</a></li>
</ul>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
$("li").click(function () {
//index方法会返回当前元素在所有兄弟元素里面的索引
console.log($(this).index());
})
})
</script>
</html>
运行如图所示:(从上往下依次点击超链接)