jQuery 常用速查

2024-10-16 14:03:28

jQuery 速查

基础

$("css 选择器") 选择元素，创建jquery对象
$("html字符串") 创建jquery对象
$(callback) $(document).ready() 的简写
length/size() jquery对象中元素的个数
get() 取得DOM元素集合
get(index) 取得DOM元素

选择器

#id,element,.class,* ,... 类似于css选择器

获得/设置属性

attr(property) 获取/设置属性值
addClass(class) 添加类名
hasClass(class) 若有类则为 true,否则为 false
removeClass([class]) 删除类，多个类以空格隔开，若不指定则删除全部类
html(val) 获取/设置 html 内容
text(val) 获取/设置文本内容
val(val) 获取/设置值

筛选

eq(index) 获取指定位置的元素
first() 获取第一个元素
last() 获取最后元素

查找

children() 获取直接子元素
find() 获取子元素
next() 获取下一个同辈元素
nextAll() 获取后面所有同辈元素
parent() 获取直接父元素
prev() 获取上一个同辈元素
prevAll() 获取前面所有同辈元素
siblings() 获取所有同辈元素

DOM操作

append(content) 追加内容
appendTo(element) 追加内容到元素中
prepend(content) 前置内容
prependTo(element) 前置内容到元素中
after(content) 插入到元素后面
before(content) 插入到元素之前
insertAfter(element) 插入内容到元素之后
insertBefore(element) 插入内容到元素之前
empty() 删除所有子节点

CSS操作

css() 获取css属性
css(name,value) 设置css属性
css({name:value,name1:value}) 设置多个css属性
offset() 获取相对于浏览器窗口的偏移
position() 获取相对于父元素的偏移
height() 获取/设置高度值
width() 获取/设置宽度值
innerHeight() 获取内部高度值（不包括border）
innerWidth() 获取内部宽度值（不包括border）
outerHeight() 获取外部高度值（包括border)
outerWidth() 获取外部宽度值（包括border)

事件

on(event,handler) 元素绑定事件
hover(over,out) 鼠标悬停事件
toggle(fn1,fn2,...) 点击依次调用事件
click() 触发每一个匹配元素的 click 事件
click(fn) 元素 click 事件绑定一个函数
blur(),change(),focus(),select(),submit(),load() 等事件
keydown(),keyup(),keypress() 键盘事件
mouseenter(),mouseover(),mouseout() 鼠标事件

动画/效果

show() 显示
show(speend,[callback]) 显示并触发回调函数
hide() 隐藏
hide(speed,[callback]) 隐藏并触发回调函数
toggle() 切换元素的可见状态
slideDown(speed,[callback]) 向下滑动，高度增加，并触发回调
slideUp(speed,[callback]) 向上滑动，高度减少，并触发回调
fadeIn(speed,[callback]) 淡入，并触发回调
fadeOut(speed,[callback]) 淡出，并触发回调
fadeTo(speed,opacity,[callback]) 指定透明度，并触发回调

ajax

$.ajax(options) ajax请求
$.get(url,[data],[callback],[type]) get请求
$.post(url,[data],[callback],[type]) post请求

其他

$.each(obj,callback) 通用，遍历对象和数组
$.isArray(obj) 检测参数是否是数组
$.isFunction(obj) 检测参数是否是 function
$.trim() 去除字符串首尾空格
$.parseJSON(jsonText) 解析json字符串为javascript对象
data(name) 返回 data-* 自定义属性值
data(name,value) 设置 data-* 自定义属性值

事件对象

event.currentTarget 事件冒泡阶段的当前DOM元素
event.preventDefault() 阻止默认事件行为的触发

最新文章

热门文章