JQuery 知识点总结

概念：

• JavaScript库

  • 把一些浏览器兼容性，或者是一些常用的函数封装到一个js文件中，就是JavaScript库

  • 我们自己封装的animate.js，就是JavaScript库

常见的JavaScript库： jQuery、Prototype、MooTools

JQuery的优点

• 强大的选择器

• 链式编程

• 隐式迭代

• 丰富的插件，可以自己编写插件

• 开源

JQ中的顶级对象

jQuery中的顶级对象是$或jQuery

• 获取jQuery对象

• 入口函数

注意：jQuery中的$和jQuery关键字本身为同一对象

JQ中的页面加载事件

使用jQuery的三个步骤：

• 引入jQuery文件

• 入口函数

• 功能实现

关于jQuery的入口函数：

// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$(function() {
});

jQuery入口函数与window.onload的对比（重要）

• JavaScript的入口函数要等到DOM创建完毕，页面中所有资源（包括图片、文件）加载完成才开始执行。

• jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

• window.onload只能注册一次，jQuery入口函数可以注册多次

• jQuery的入口函数，封装了DOM中的DOMContentLoaded事件（此事件DOM加载完毕之后就执行）

JQ对象和DOM对象

DOM对象

• 用原生JavaScript获取的DOM对象

  • 通过document.getElementById() 返回的是元素(DOM对象)

• 通过document.getElementsByTagName()获取到的是什么？

  • 伪数组(集合)，集合中的每一个对象是DOM对象

JQ对象 （ DOM对象包含JQ对象）

jQuery对象又可以叫做包装集(包装的DOM对象的集合)

• jQuery对象用$()的方式获取的对象

• length属性，获取对象内部的DOM元素个数

JQ对象和DOM对象的区别

JQ对象不能调用DOM对象的属性和方法，同样DOM对象也不能调用JQ对象的属性和方法。

两者之间的转换

DOM对象转换成jQuery对象

$(DOM对象)

jQuery对象转换成DOM对象

jQuery对象[索引值]
jQuery对象.get(索引值)

$最常用的三种方法

1. $('选择器') 返回jQuery对象

2. $(DOM对象) 返回jQuery对象

3. $(function() {}) 入口函数

选择器

基本选择器

名称	用法	描述
ID选择器	$('#id')	获取指定ID的元素
类选择器	$('.class')	获取同一类class的元素
标签选择器	$('div')	获取同一类标签的所有元素
并集选择器	$('div,p,li')	使用逗号分隔，只要符合条件之一就可。
交集选择器	$('div.redClass')	获取class为redClass的div元素

与css选择器用法一样

层级选择器

名称	用法	描述
子代选择器	$('ul > li')	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$('ul li')	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

名称	用法	描述
:eq(index)	$('li:eq(2)').css('color', 'red')	获