Jquery
81463166 2019-12-22
选择器
元素选择器
$(‘p‘)
id选择器
$(‘#test‘)
class选择器
$(‘.test‘)
事件
鼠标事件
click
dblclick
mouseenter
mouseleave
Mousedown
键盘事件
Keypress
Keydown
Keyup
表单事件
submit
Change
focus
blur
文档/窗口事件
load
Resize
Scroll
unload
hover() 用于模拟光标悬停,移上去触发mouseenter，离开触发mouseleave
$(selector).hover(fcuntion(),function())
focus()获得焦点，blur()失去焦点
效果
1. 隐藏和显示
hide(),show()
$(selector).hide(speed, callback)
speed:可选,隐藏或显示速度,可以取以下值,‘slow‘,‘fast‘,‘normal‘或毫秒
callback:可选,隐藏或显示完成后所执行的函数名
可用toggle()切换hide()和show()方法
callback三点说明
1.$(selector)选中的元素个数为n个，则callback函数执行n次
2.callback函数名后加括号会立刻执行而不是等到隐藏和显示后才执行
3.callback既可以是函数，也可以是匿名函数
2. 淡入淡出
fadeIn(),fadeOut(),fadeToggle()
$(selector).fadeIn(speed, callback)
fadeTo(speed,opacity,callback)
// speed和opacity(透明度,0~1之间)必须填
3. 滑动
slideUp(),slideDown(),slideToggle()
// 注意设置滑动元素的display:none
动画
// animation()方法用于创建自定义动画
$(selector).animation(styles, speed, easing, callback);
// easing可选。规定在不同的动画点中设置动画速度的 easing 函数。swing,linear
styles = {
left: "250px",
opacity: ‘0.5‘,
height: "150px"
};
// key使用驼峰,如margin-left变为marginLeft
// 对位置进行操作时，注意把元素的css position属性设置为relative,fixed或者absolute
$(selector).animate(styles,options)
// options可选。规定动画的额外选项。
$(selector).stop(stopAll,goToEnd)
操作HTML元素和属性
获取内容
$(selector).text()：设置或返回所选元素的文本内容
$(selector).html()：设置或返回所选元素的内容(包括html标记)
$(selector).val()：设置或返回表单字段的值
获取属性
$(selector).attr()
添加元素
append()内部结尾插入
prepend()内部开头插入
after()外部之后插入
before()外部之前插入
删除元素
remove()删除被选元素及其子元素，可接受参数实现过滤
empty()删除选中元素的子元素
遍历
parent() 父元素
parents() 一路向上直到<html>
parentsUntil() 返回介于两个给定元素之间的所有祖先元素
children() 所有直接子元素
find() 找出所有满足条件的后代
siblings()返回所有同胞
next() 下一个同胞元素
nextAll()
nextUntil()
prev()
prevAll()
preUntil()
first()
last()
eq()
filter()
操作CSS
addClass()
removeClass()
toggleClass()
css()
尺寸
width() content
innerWidth() content+padding
outerWidth()content+padding+border
outerWidth(true)content+padding+border+margin
height()
innerHeight()
outerWidth()
outerWidth(true)
AJAX
$(selector).load(url,data,callback)
$.get(url,callback)
$.post(url,data,callback)
