jQuery入门-初识jQuery

什么是jQuery?

下载jQuery

jQuery的入口函数

对比JavaScript的入口函数jQuery的入口函数,执行时机

jQuery对象和DOM对象的区别

jQuery对象和DOM对象的互相转换

$符号的实质

jQuery的基本选择器&层级选择器

Mouseenter和mouseover的区别

jQuery的过滤选择器&筛选选择器

index方法详解

什么是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>

运行如图所示：（从上往下依次点击超链接）