jQuery深入学习01

一、使用jQuery的三个基本步骤

1 引包（引入jQuery文件

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

2. 入口函数

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

3. 功能实现

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

二、javascript和jquery的比较

JavaScript	jQuery
入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行	入口函数只会等待文档树加载完成就开始执行
function 函数名(){}	$就是一个函数：$()

三、jquery的选择器

1、 基本选择器

名称	用法	描述
类选择器	$(“.class”)	获取同一类class的元素
ID选择器	$(“#id”)	获取指定ID的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器（标签指定式选择器）	$(“div.redClass”)	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器

2、层级选择器

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

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元素中，选择索引号为偶数的元素

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()	找上一次兄弟

四、jquery操作样式（重点）

1、 css操作

$("#one").css({

"background":"gray",
"width":"400px",
"height":"200px"

});

2、 class操作

//给所有的div添加one的样式
$(“div”).addClass(“one”)

//移除div中one的样式类名
$(“div”).removeClass(“one”)

//判断第一个div是否有one的样式类
$(“div”).hasClass(“one”)

//切换的样式类名，如果有，移除该样式，如果没有，添加该样式
$(“div”).toggleClass(“one”)
【案例：tab栏切换案例】