jQuery事件操作

基本操作

语法 相当于DOM 设置
html() innerHTML html(html代码)
val() value val(value)
text() textContent text(文本内容)
attr() getAttribute() - 元素属性 attr(属性名,属性值)
removeAttr() removeAttribute() - 移除元素属性 removeAttr(属性名)

CSS 操作

设置样式:.css(name,value)

1
2
3
4
5
6
7
$("div").css("background-color","aqua")

$("div").css({
width: 400,
height: 400,
backgroundColor: aqua
})

获取:.css(name)

class 操作

语法 说明 备注
addClass(“class”) 添加类 参数为类名
removeClass(“class”) 删除类 无参时删除所有样式
toggleClass(“class”) 切换类 只接受一个参数,是在没有样式与指定样式之间切换,没有就新建,有就删除
hasClass(“class”) 判断类 判断指定元素是否包含指定类样式

节点遍历

语法 用法 说明
parent() $(‘li’).parent() 查找父节点
children(selector) $(‘ul’).children(‘li’) 查找子节点
find(selector) $(‘ul’).find(‘li’) 查找后代节点
sibling(selector) $(‘li:first’).subling(‘li’) 查找兄弟节点
eq(index) $(‘li’).eq(2) 相当于$(‘li:eq(2)’)
next() $(‘div’).next() 获取指定节点的下一个兄弟节点
pre() $(‘div’).pre() 获取指定节点的上一个兄弟节点

ready()

ready() - 类似于window.onload的作用

1
2
3
4
// 三种写法
$(document).ready(function(){});
$().ready(function(){});
$(function(){}); //常用

区别:

  • ready:在一个HTML页面中允许多个,等待HTML页面中所有DOM结构加载完毕后就可以执行
  • onload:在一个HTML页面中只能一个,必须等待HTML页面中所有内容全部加载完毕后才能执行

鼠标事件

语法 说明
click() 单击
dblclick() 双击
hover() 悬停
mousedown() 按下
mouseup() 抬起
mouseover() 移入
mouseout() 移出
mousemove() 移动

表单事件

语法 说明
focus() 获取焦点事件
blur() 失去焦点事件
change() 当元素的值发生改变时激发的事件
select() 当textarea或文本类型的input元素中的文本被选择时触发的事件
submit() 表单提交事件,绑定在form上

ajax()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.ajax({
// 请求地址url
url: 'http://qlapi.sylu.edu.cn/mock/67/register',
// 请求方式 get | post
type: 'post',
// 发送数据 data
data: {
username: $('#username').val(),
password: $('#password').val()
},
// 请求成功时执行
success: function(res){
console.log(res.msg);
console.log(res.data);
},
// 请求失败时执行
error: function(){
console.log('error');
},
// 成功和失败都会执行
complete: function(){
console.log('complete');
}
})
更新于

请我喝[茶]~( ̄▽ ̄)~*

boW 微信支付

微信支付

boW 支付宝

支付宝

boW 贝宝

贝宝