jQuery代码节选（事件）

Posted 2020-08-11 &nbsp

事件

1.ready()
$(document).ready(function() {
//代码
});
简写：
$(function( {
//代码
});
该事件是会在页面加载完后执行，相当于onloca()，但如果存在onloca()事件，ready()会失效

2.on()
<div class="div1">
<div class="div2"></div>
</div>

$("div").on("click mouseover",".div2",function(){
alert("hello world");
});
on()事件可绑定多个事件，能添加选择器筛选后代元素，上例子匹配div元素选择.div1元素的后代.div2

3.off()
$("div").off()
删除div元素上所有事件
$("div").off("click")
删除div元素上的单击事件

4.bind()
与on()事件相同，可绑定多个事件，目前本人发现的唯一区别是on()事件比bind()多了一个selector选择器

5.one()
与bin()事件相同，但one()绑定的事件是一次性的，使用一次过后就会被删除

6.trigger()
$("div").trigger("click");
触发div元素的单击事件

7.triggerHandler()
$("div").trigger("click");
改事件功能与trigger()相同，只是triggerHandler()只触发匹配到的集合的第一个元素，且如果触发的事件是浏览器默认的，那将不被触发。

8.unbind()
$("div").unbind();
删除div元素bind()绑定的所有事件
$("div").unbind("click");
删除div元素bind("click")绑定的事件
经测试unbind()的删除能力对on()事件绑定的事件一样有效

9.live()

已被删除

10.die()

不建议使用

11.delegate()
<ul class="div1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.div1‘).delegate(‘li‘,‘click‘,function(){
$(this).css(‘color‘,‘blue‘);
});
单击ul.div1元素的子元素li后，相对应的li颜色改变
该方法可为选定元素的子类添加事件，子类可为空 ""，但不能不写,为空时事件为自身

12.undelegate()
$(‘.div1‘).undelegate(‘click‘)
$(‘.div1‘).undelegate(‘li‘,‘click‘)
两者效果相同，清除delegate()方法添加的事件

13.hover()
<ul class="div1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).hover(function(){
$(this).css(‘background‘,‘blue‘);
},function(){
$(this).css(‘background‘,‘red‘);
});
hover()是一个模仿悬停事件的方法，第一个function()是移入，第二个是移出，两者之间用逗号","隔开

14.blur()
<input type="text" id="text" autofocus>

$(function(){
$(‘#text‘).blur();

})
让文本框失去焦点
$(‘#text‘).blur(
function(){
clg(‘blur‘);
}
);
当文本框失去焦点时，触发事件

15.change()
<input type="text" id="text">

$(function(){
$(‘#text‘).change();

})
$(‘#text‘).change(
function(){
clg(‘change‘);
}
);
触发change()事件

16.click()
<input type="text" id="text">

$(function(){
$(‘#text‘).click();

})
$(‘#text‘).click(
function(){
clg(‘click‘);
}
);
触发click()事件

17.dblclick()
<input type="text" id="text">

$(function(){
$(‘#text‘).dblclick();

})
$(‘#text‘).dblclick(
function(){
clg(‘dblclick‘);
}
);
触发dblclick()双击事件

18.erroe()

19.focus()
<input type="text" id="text">

$(function(){
$(‘#text‘).focus();

})
$(‘#text‘).focus(function(){
clg(‘focus‘);
});
触发focus()双击事件

20.focusin()
<p class="ul2">
这里是p
<input type="text" id="text">
</p>

$("p").focusin(function() {
$(this).css(‘color‘, ‘blue‘);
});
focusin()方法是当子元素获取焦点时触发的

21.focusout()
<p class="ul2">
这里是p
<input type="text" id="text">
</p>

$("p").focusout(function() {
$(this).css(‘color‘, ‘blue‘);
});
p元素的子元素失去焦点时触发

22.keydown()
$(window).keydown(function(e){
clg(String.fromCharCode(e.keyCode))
})
按下键盘时触发该事件

23.keypress()
$(window).keypress(function(e){
clg(String.fromCharCode(e.keyCode))
})
该事件与keydown()事件功能相同，都是在键盘按下时触发

24.keyup()
$(window).keyup(function(e){
clg(String.fromCharCode(e.keyCode))
})
送开键盘时触发事件

25.mousedown()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mousedown(function(e){
$(this).css(‘background‘,‘blue‘);
})
按匹配到的元素上按下鼠标触发该事件

26.mouseenter()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseenter(function(e){
$(this).css(‘background‘,‘blue‘);
})
当鼠标指针穿过元素时，会发生 mouseenter 事件

27.mouseleave()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseleave(function(e){
$(this).css(‘background‘,‘red‘);
})
当鼠标指针离开元素时，会发生 mouseleave 事件

28.mousemove()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mousemove(function(e){
$(this).css(‘background‘,‘blue‘);
})
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

29.mouseout()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseout(function(e){
$(this).css(‘background‘,‘red‘);
})
当鼠标指针从元素上移开时，发生 mouseout 事件。

30.mouseover()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseover(function(e){
$(this).css(‘background‘,‘red‘);
})
当鼠标指针位于元素上方时，会发生 mouseover 事件。

31.mouseup()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$(‘.ul1‘).mouseup(function(e){
$(this).css(‘background‘,‘red‘);
})
当在元素上放松鼠标按钮时，会发生 mouseup 事件。

32.resize()
$(window).resize(function(){
alert("窗口大小发生改变!")
})
当调整浏览器窗口的大小时触发事件

33.scroll()
$(window).scroll(function(){
alert("滚动条移动了")
})
匹配元素的滚动条移动时触发事件

34.select()
<input type="text" id="text">

$(‘#text‘).select(function(){
clg(‘select‘);
})
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件

35.submit()
$(‘form‘).submit()
提交表单
$(‘form‘).submit(function(){
alert("提交表单")
})
当提交表单时，会发生 submit 事件。