jQuery学习笔记（黑马课堂+补充）

JQuery学习笔记（自用）

1.DOM对象和jQuery对象

1. DOM对象：原生JS取到的对象

getElementsById()
getElementsByTagName()

特点：只能调用Dom方法或者属性，不能调用JQuery属性或者方法

2. jQuery对象:利用jQuery选择器获取到的对象

> $(selector).action() 
> $(“选择器”);//里面需要加引号

特点：只能调用JQuery的方法或者属性，不能调用原生JS对象
JQuery对象是一个伪数组，本身就是DOM对象的一个包装体

3. 两者之间的调换
   ------因为两者之间的一些功能可能不通用,所以需要调换

DOM–>jQuery 例：

var div1 =document.getELementByID(“#div1”);
var $div1= $(div1)

jQuery–>DOM 例：

var $div1=$(‘#div1’);
var div1 =$div1[0];  或 var div1 =$div1.get(0);

2.jQuery选择器

• 2.1jQuery基础选择器

 $(“选择器”);//里面需要加引号

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

• 2.2jQuery层级选择器

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

• *2.3jQuery过滤选择器

名称	用法	描述	返回
:first	$(“li:first”)	选取第一个元素	单个元素
:last	$(“li:last”)	选取最后一个元素	单个元素
:not(selector)	$(“li:not(.red)”)	选取class不是red的li元素	集合元素
:even	$(“li:even”)	选取索引(从0开始)为偶数的所有元素	集合元素
:odd	$(“li:odd”)	选取索引(从0开始)为奇数的所有元素	集合元素
:eq(index)	$(“li:eq(2)”)	选取索引(从0开始)等于index的元素	单个元素
:gt(index)	$(“li:gt(2)”)	选取索引(从0开始)大于index的元素	集合元素
:lt(index)	$(“li:lt()”)	选取索引(从0开始)小于index的元素	集合元素
:header	$(“:header”)	选择标题元素，h1~h6	集合元素
:animated	$(“:animated”)	选择正在执行动画的元素	集合元素
:focus	$(“:focus”)	选择当前被焦点的元素	集合元素

• 2.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)”)	单个元素
next()	$(“li”).next()	找下一个兄弟	单个元素
nextAll([expr])	$(“li”).nextAll( );	找当前元素之后的所有同辈元素	集合元素
prevtAll([expr])	$(“li”).prevtAll( );	找当前元素之前的所有同辈元素	集合元素
hasClass(class)	$(“li”).hasClass(“nav”);	检查当前元素是否含有该类	返回Ture or False

3、jQuery的常用API

• 3.1设置获取样式

1.获取样式：
.css(‘样式’);
假如选择获取一堆元素，只能获取第一个样式

2.设置样式

• 单样式：

.css(‘样式名’，‘样式值’);

1)样式值若只有数值不需要加引号
2)设置的样式是行内样式

• 多样式：

.css({ width:300, ‘height’:’300px’})； 

1)以对象形式修改样式那么就可以不用加引号
2)假如获取的是一堆元素，则全部都设置（隐式迭代）
3)如果是合成样式必须采用驼峰方法 backgroundColor

• 3,2设置类样式方法

添加类 .addClass(“类名”)
删除类 .removeClass(“类名”)
切换类 .toggle(“类名”) //点一下加 点一下删

• 3.3类操作与className的区别

原生JS中ClassName会覆盖元素原先的类名
jQuery中类操作只是对指定类进行添加删除，不会影响原类名

——————————————————————————————————

4.jQuery的动画效果

显示隐藏→show() hide() toggle()
滑动→ slideDown() slideUp() slideToggle()
淡入淡出→fadeIn() fadeOut() fadeToggle() fadeTo()
自定义动画→ animate()

• 1)隐藏 显示

$(selector).show(speed,easing,callback)
$(selector).hide(speed,easing,callback)
$(selector).toggle(speed,easing,callback)

• 2)滑动(常用显示隐藏元素)

$(selector).slideDown(speed,easing,callback) 
$(selector).slideUp(speed,easing,callback)
$(selector).slideToggle(speed,easing,callback)

• 3)透明度

$(selector).fadeIn(speed,easing,callback)
$(selector).fadeOut(speed,easing,callback)
$(selector).fadeToggle(speed,easing,callback)

参数	描述	可选值
speed	（可选）规定显示效果/滑动效果的速度。	可能的值：“slow” “fast” “normal” ,毫秒
easing	（可选）规定在动画的不同点上元素的速度。默认值为 “swing”。	可能的值：“swing” - 在开头/结尾慢速缓冲；“linear” - 匀速移动;提示：扩展插件中提供更多可用的 easing 函数。
callback(fn)	可选。show() 方法执行完之后，要执行的函数。	自定

未完待续