1.在jQuery库中,$是jQuery的别名,$()等效于jQuery();
2.$(function(){}) === window.onload = function(){}
window.onload:整个页面加载完成后执行事件触发函数
$(function(){}):当文档加载完成后执行回调函数
$(function(){})的效率更高
1.基本选择器
id选择器:$(“#id”)
标签选择器:$(“element”)
类选择器:$(“.className”)
通配符选择器:$(“*”)
组选择器:$(“selector1,selector2,selectorN”)
2.层级选择器:通过DOM的嵌套关系匹配元素
包含选择器:$(“a b”)在给定的祖先元素下匹配所有后代元素(不受层级限制)
子选择器:$(“parent > child”)在给定的父元素下匹配所有子元素
相邻选择器:$(“prev + next”)匹配所有紧接在prev元素后的next元素
兄弟选择器:$(“prev ~ siblings”)匹配prev元素之后的所有sibling元素
3.常用伪类选择器:可以看作是一种特殊的类选择器
:first 匹配找到的第一个元素
:last 匹配找到的最后一个元素
:eq 匹配一个给定索引值的元素
:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引的元素
:not 去除所有与给定选择器匹配的元素
4.动画
1.show():显示
hide():隐藏
hide()通过改变元素的高度、宽度和不透明度,直到这三个属性值到0;show()从上到下增加元素的高度,从左到右增加元素的宽度,从0到1增加透明度,直至内容完全可见
show(speed,callback)
speed:字符串或数字,表示动画将运行多久
(slow=0.6/normal=0.4/fast=0.2)
callback:动画完成是执行的方法
2.toggle():切换元素的可见状态
原理:匹配元素的宽度、高度以及不透明度,同时进行动画,隐藏动画后将display设置为none
toggle(speed)
toggle(speed,callback)
toggle(boolean)
easing:使用哪个缓冲函数来过渡的字符串(linear/swing)
boolean:true为显示,false为隐藏
滑动
显隐滑动效果
slideDown():滑动隐藏
slideUp():滑动显示
slideDown(speed,callback)
显隐切换滑动
slideToggle():显隐滑动切换
slideToggle(speed,callback)
渐变:通过改变不透明度
淡入淡出
fadeIn()
fadeout()
fadeIn(speed,callback)
设置淡出透明效果
fadeTo():以渐进的方式调整到指定透明度
fadeTo(speed,opacity,callback)
渐变切换:结合fadeIn和fadeOut
fadeToggle()
fadeToggle(speed,callback)