1. 事件机制
1.1 事件注册
bind()
方法用于向被选元素添加一个或多个事件处理程序
on()
方法只能添加一个事件(不好用)
$(".box1").bind({
mouseover() {
$(this).css("background-color", "blue");
},
mouseout() {
$(this).css("background-color", "black");
}
})
$(".box1").on("click",function(){ console.log(‘111‘); });
1.2 事件对象event
event对象有以下常用属性
- type:事件类型;which:触发该事件的鼠标按钮或键盘的键;
- target:触发事件的DOM元素;
- pageX/Y:事件触发时鼠标相对页面左上角的水平/垂直坐标
- clientX/Y:事件触发时鼠标相对于窗口的水平,垂直坐标
$(‘.box2‘).click(function (event) {
console.log(event);
console.log(event.target);
})
jQuery.each()
方法;用于遍历指定的对象和数组
var arr = [10, 20, 30, 40];
$.each(arr, function (index, value) {
console.log(`我是第${index + 1}元素,值是${value}`);
})
2. HTML的设置与捕获
-
html()
返回或设置所选元素的html内容;会解析富文本
$(‘.box‘).html(‘<b>Hello world!</b>‘);
$(‘.box‘).html();
// <b>Hello world!</b>
-
text()
返回或设置所选元素的文本内容;
$(‘.box‘).text();
// Hello world!
$(‘.box‘).text(‘hello vivy‘);
val()