jquery基础

Posted 2020-10-18

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)