1-jQuery 常用 API

jQuery 选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号    

jQuery 基础选择器

名称	用法	描述
ID 选择器	$("#id")	获取指定 id 的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	匹配 class 类的元素
标签选择器	$("div")	获取同一标签的元素
并集选择器	$("div,p,li")	选取多个条件的元素
交集选择器	$("li.current")	交集元素

jQuery 层级选择器

名称	用法	描述
子代选择器	$("ul>li")	获取子代元素
后代选择器	$("ul li")	获取后代元素

jQuery 筛选选择器

index 索引号从 0 开始

语法	用法	描述
:first	$("li:first")	获取第一个 li 元素
:last	$("li:last")	获取最后一个 li 元素
:eq(index)	$("li:eq(2)")	获取索引号第二个的 li 元素
:odd	$("li:odd")	索引号为奇数的 li 元素
:even	$("li:even")	索引号为偶数的 li 元素
:checked	$(".j-checkbox:checker")	复选框选中的项

jQuery 筛选方法

语法	用法	说明
parent()	$("li").parent()	查找父级
parents(selector)	$("li").parents(selector)	查找先祖
children(selector)	$("ul").children("li")	相当于$(“ul>li”)，最近一级（亲儿子）
find(selector)	$("ul").find("li")	相当于$(“ul li”)，后代选择器
siblings(selector)	$(".first").siblings("li")	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$('div').hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$("li").eq(2)	相当于$(“li∶eq(2)”，index从0开始

jQuery 的排他思想

$(function () {
	$("button").click(function () {
		// 隐式迭代
		/* $(this).css({"background", "pink"})
		$(this).siblings("button").css({"background", ""}) */
		
		// 链式编程
		$(this).css({"background", "pink"})
			.siblings("button").css({"background", ""})
	})
})

jQuery 样式操作

操作 css 方法

返回属性值

参数只写属性名

$(this).css("color")

设置一组样式

参数是属性名，属性值，逗号分隔；属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color", "red");

设置多组样式

参数可以是对象形式，属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({
	color:"white",
	"font-size":"20px"
});

设置类样式方法

添加类

$("div").addClass("current");

移除类

$("div").removeClass("current");

切换类

有就加删除，没有就添加

$("div").toggleClass("current");

jQuery 效果

显示隐藏效果

1. speed：三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如：1000)。
2. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
3. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

显示

show([speed,[easing],[fn]]);

隐藏

hide([speed,[easing],[fn]])

切换

toggle([speed,[easing],[fn]])

滑动效果

1. speed: 三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如：1000)。
2. easing: (Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
3. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

下滑

slideDown([speed,[easing],[fn]])

上滑

slideUp([speed,[easing],[fn]])

滑动切换

slideToggle([speed,[easing],[fn]])

事件切换

hover([over,]out)

1. over: 鼠标移到元素上要触发的函数（相当于 mouseenter）
2. out:鼠标移出元素要触发的函数（相当于mouseleave）
3. 如果只写一个函数，则鼠标经过和离开都会触发它

动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止排队

stop()

$(".nav>li").hover(function () {
	// stop 方法必须写到动画的前面
	$(this).children("ul").stop().slideToggle();
});

淡入淡出效果

1. speed: 三种预定速度之一的字符串 (“slow”,“normal”, or “fast”) 或表示动画时长的毫秒数值 (如：1000)。
2. easing: (Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
3. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

淡入效果

fadeIn([speed,[easing],[fn]])

淡出效果

fadeOut([speed,[easing],[fn]])

淡入淡出切换

fadeToggle([speed,[easing],[fn]])

渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

opacity 透明度必须写，取值 0~1 之间。

自定义动画 animate

animate(params,[speed],[easing],[fn])

1. params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
2. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
3. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

jQuery 属性操作

元素固有属性

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

获取属性

prop("属性")

设置属性

prop("属性", "属性值")

元素自定义属性

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

也可以获取 H5 自定义属性。

获取属性语法

attr("属性")      // 类似原生 getAttribute()

设置属性

attr("属性", "属性值") // 类似原生 setAttribute()

数据缓存

data () 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

可以读取 HTML5 自定义属性 data-index ，得到的是数字型

获取数据

data("name","value")   // 向被选元素附加数据

附加数据

date("name")             //   向被选元素获取数据 

全选

1. .checkall 全选类
2. .j-checkbox 复选框类

$(".checkall").change(function() {
	// console.log($(this).prop("checked"));
	$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
	if ($(this).prop("checked")) {
		// 让所有的商品添加 check-cart-item 类名
		$(".cart-item").addClass("check-cart-item");
	} else {
		// check-cart-item 移除
		$(".cart-item").removeClass("check-cart-item");
	}
});
// TODO 如果小复选框全被选中 就应该把全选按钮选上，否则全选按钮不选。
$(".j-checkbox").change(function() {
	if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
		$(".checkall").prop("checked", true);
	} else {
		$(".checkall").prop("checked", false);
	}
});

jQuery 文本属性值

普通元素内容

相当于原生 inner HTML

获取元素的内容

html()

设置元素的内容

html("内容")

普通元素文本内容

相当与原生 innerText)

获取元素的文本内容

text()

设置元素的文本内容

text("文本内容")

表单的值

相当于原生 value

获取表单的值

val()

设置表单的值

val("内容")

jQuery 元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

$("div").each(function (index, domEle) { xxx; })

1. each() 方法遍历匹配的每一个元素。主要用 DOM 处理。 each 每一个
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用 jquery 方法，需要给这个 dom 元素转换为 jquery 对象 $(domEle)

$.each(object，function (index, element) { xxx; })

1. $.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

创建元素

$("<li></li>");

添加元素

内部添加

element 的内部元素的后面

element.append("内容")

element 的内部元素的前面

element.prepend("内容")

外部添加

把内容放入目标元素后面

element.after("内容")

把内容放入目标元素前面

element.before("内容") 

删除元素

删除元素本身

element.remove()

删除匹配的元素集合中所有的子节点

element.empty()

清空匹配的元素内容

element.html("")

jQuery 尺寸、位置操作

jQuery 尺寸

参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。
参数可以不必写单位。

语法	用法
width()/height()	取得匹配元素宽度和高度值只算 width/height
innerWidth()/innerHieght()	取得匹配元素宽度和高度值包含 padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值包含 padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含 padding、borde、margin

jQuery 位置

offset() 设置或获取元素偏移

1. offset () 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
2. 该方法有 2 个属性 left、top 。offset ().top 用于获取距离文档顶部的距离，offset ().left 用于获取距离文档左侧的距离。
3. 可以设置元素的偏移：offset ({ top: 10, left: 30 });

position() 获取元素偏移

1. position () 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
2. 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
3. 该方法只能获取。

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

1. scrollTop () 方法设置或返回被选元素被卷去的头部。
2. 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

返回头部

不能是文档 (document) 而是 html 和 body 元素做动画

var boxTop = $(".container").offset().top;
$(window).scroll(function() {
	console.log($(document).scrollTop());
	if ($(document).scrollTop() >= boxTop) {
		$(".back").fadeIn();
	} else {
		$(".back").fadeOut();
	}
});
// 返回顶部
$(".back").click(function() {
	// $(document).scrollTop(0);
	$("body, html").stop().animate({
		scrollTop: 0
	});
})