jQuery简介以及选择器

jQuery基本知识

为啥学习jQuery

过去，写的很多例子，都是可以使用jQuery来实现的，而且会更简单,还有jQuery是前端工程师需要掌握的基础技能.

jQuery初体验

相比js方式,jQuery有以下优点：

1.找对象更加简单
2.解决了浏览器兼容性问题
3.一些方法不用写for循环
4.注册事件不会被覆盖
5.实现动画特别简单

什么是 jQuery？

jquery是个快速地、轻量的、功能丰富的JavaScript库,说白了就是个js文件，封装了很多方法。

类似之前封装的animate.js

通过这些方法，就可以直接完成很多的操作，所以学习jQuery，就是学习如何使用这些封装的方法。

jQuery版本的说明

代码格式：

• 压缩版：压缩了代码里的空格和无关字符，体积更小，用于生产环境。
• 非压缩版：保持开发时的原样，适合开发环境调试。

jQuery版本：

• 1.x: 支持IE6,7,8.不再更新维护
• 2.x: 移除了对IE6,7,8的支持。不再更新维护
• 3.x: 不支持IE6,7,8添加了一些新特性。一直更新维护

根据项目情况，选择jQuery版本，需要兼容IE6,7,8，必须使用1.x

使用步骤

• 引入jQuery.js文件

<script src="jquery-1.11.1.js"></script>

• 写入口函数

$(document).ready(function(){
	
});

$(function(){
	
})

• 功能代码

$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

入口函数的说明

入口函数的意义：

• 等待页面的加载完成(跟window.onload类似)。
• 里面的变量都是局部变量，防止变量污染。

推荐把代码写到入口函数里.

入口函数与window.onload 的区别

• window.onload 等待页面、图片资源的加载。
• 入口函数只等待页面的加载。

入口函数比window.onload先执行。

jQuery对象与DOM对象

基本概念：

• DOM对象：通过webAPI方法获取的对象。
• jQuery对象：通过jQuery选择器获取的对象。

jQuery对象和DOM对象不能直接使用对方的方法。

jQuery对象和DOM对象互相转化

jQuery对象 => DOM对象：

var $lis = $('li')
//第一方法：
$lis[0];

//第二种方法：
$lis.get(0)

DOM对象 => jQuery对象

var domObj = document.querySelectorAll('li');
//获取jQuery对象
var lis = $(domObj)

选择器

什么是jQuery选择器

jQuery提供了一组方法，用于获取页面上的元素，返回对应的jQuery对象。
jQuery提供了很多选择器，基本兼容了css1到css3所以选择器。
获取页面元素可用的选择器可能有多个，咱们平时用到的只是最常见的少数几个。

css选择器

jQuery完全兼容css选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".class");	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样

过滤选择器（过滤规则）

这类选择器都带冒号:

名称	用法	描述
:odd	$(“li:odd”).css(“color”, “red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, “red”);	获取到的li元素中，选择索引号为偶数的元素
:first	$(“li:first”).css(“color”, “red”);	获取到的li元素中的第一个
:last	$(“li:last”).css(“color”, “red”);	获取到的li元素中的最后一个

关系选择器

关系选择器通过关系找亲戚节点，用法不一样，关系选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	获取当前元素的所有子元素中的li元素
find(selector)	$(“ul”).find(“li”);	获取当前元素中的后代元素中的li元素
siblings(selector)	$("#first").siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$("#first").parent();	查找父亲
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟
eq(index)	$(“li”).eq(2);	index从0开始

补充知识

mouseenter和mouseover

mouseover和mouseoverenter都有鼠标移入事件，但推荐使用mouseenter

mouseenter 与 mouseover 的不同

1. mouseover与mouseout是一对事件，当鼠标经过当前元素与当前元素的子元素的边界线的时候，mouseover或mouseout事件会被触发。
2. mouseenter与mouseleave是一对事件，只有当鼠标经过当前元素时，事件会触发，鼠标经过子元素，mousenter或mouseleave事件不会触发。

index方法

index()方法返回的是当前元素在所有兄弟元素里面的索引。

<ul>
  <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>

上述案例，如果给a注册事件，获取当前对象的index是0，推荐给li注册

区分jQuery和JavaScript

JavaScript是一门编程语言，jQuery仅仅是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。