jQuery基本概念
1.什么是jQuery?
jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。他操作的本质还是js对象(DOM)。
jQuery 是一个伪数组,jq对象就是js对象的一个集合
2.jQuery版本
官网下载地址:http://jquery.com/download/ ajQuery版本有很多,分为1.x 2.x 3.x
- 1.x版本:能够兼容IE678浏览器
- 2.x版本:不兼容IE678浏览器
- 1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本
- 3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
关于压缩版和未压缩版
- jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。
- jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。
3.jQuery的入口函数
使用jQuery的三个步骤:
- 引入jQuery文件
- 入口函数
- 功能实现
关于jQuery的入口函数:
//第一种写法
$(document).ready(function() {
});
//第二种写法
$(function() {
});
jQuery入口函数与js入口函数的对比
- JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
- jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
jQuery对象和DOM对象的区别
1.什么是jQuery对象?什么是DOM对象?
用js的方法获取到的对象就是DOM对象,用jQuery的方法获取到的对象就是jQuery对象
2.两者的区别与联系
区别: js对象与jq对象不能混着用,DOM不能直接调用jq对象,jq也不能直接调用DOM对象。
联系: DOM对象和jq对象可以相互转换
DOM对象调用js对象的方法:需要将DOM转换为jq 【联想记忆:花钱】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
jq对象转换成DOM对象:【联想记忆:取出来】
var $li = $(“li”);
//第一种方法(推荐使用)
$li[0].style.backgroundColor="red";
//第二种方法
$li.get(0).style.backgroundColor="red";
小知识:
$的实质:
$是一个函数(所以要用())
参数不同,功能不同:
1.参数是一个function函数,为入口函数
2.参数是一个DOM对象,是将DOM转换为jq
3.参数是一个字符串,用来找对象
jQuery的选择器
jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。
1.基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id") | 获取指定ID的元素 |
类选择器 | $(".class") | 获取同一类class的元素 |
标签选择器 | $(“tag”) | 获取同一标签的元素 |
交集选择器 | $(“div.redClass”) | 获取class为redClass的div元素 |
并集选择器 | $("div,#id,.class) | 使用逗号分隔,只要符合条件之一就可。 |
2.层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $("#father>p") | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul p”) | 使用空格,代表后代选择器,获取ul下的所有p元素,包括孙子等 |
3.过滤选择器
名称 | 用法 | 描述 |
---|---|---|
: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元素中,选择索引号为偶数的元素 |
选择器的详细信息:
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
4.筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 | 用法 | 描述 |
---|---|---|
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() | 找上一次兄弟 |
【案例:下拉菜单】this+children+mouseenter+mouseleave
【案例:突出展示】siblings+find
【案例:手风琴】next+parent
【案例:淘宝精品】index+eq