jQuery的事件

来源：互联网发布：adobe muse cc 知乎编辑：程序博客网时间：2024/06/17 17:55

jQuery中有许多对应的事件在这里列举一二

1.css事件

例子：

function testB(){
$("P").css({"color":"red","font-size":"50px"});//给P标签设置属性
}

HTML部分

设置后P标签的颜色为红色，字体大小为50px

2.removeAttr事件

描述：从每一个匹配的元素中删除一个属性

例子：

function testC(){
$("img").removeAttr("src");//删除img标签中的src属性
}

HTML部分：

点击触发事件后将会删除src属性

3.height/width事件

描述：取得第一个匹配元素当前计算的宽(高)度值（px）

例子：

function testD(){
$("p").height(40);//把P标签的高设置成40（同理可以设置宽width）
}

HTML部分

点击触发事件后P标签的高被设置为40

4.click与hide事件

描述：

click：触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

hide：隐藏显示的元素

例子：

function testE(){
$("p").click(function(){//触发P标签的点击事件
$(this).hide();//页面中所有的P标签被点击后将被隐藏
});
}

HTML部分:

点击触发事件后P标签将会被隐藏

5.ready与click事件

描述：

ready：这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。不应与<body onload="">一起使用

click：触发每一个匹配元素的click事件。

例子：

$(document).ready(//这个方法纯粹是对向window.load事件注册事件的替代方法，不应与<body onload="">一起使用
function(){
$("#tt").click(function(){//获取并绑定id为tt的对象
$(this).hide();//隐藏该对象
});
}
);

HTML部分：

点击触发事件后input将会被隐藏

6.focus与blur事件

描述：

当元素获得焦点时，触发 focus 事件。

例子：

$(document).ready(
function(){
$("#log[type=text]").focus(function(){//当页面加载后将id为log的文本框设置为焦点
this.blur();//锁定该文本框使人无法使用
});
}

);

HTML部分：

触发事件后该文本框被设置为焦点（需要注释blur事件），该文本框被锁定无法使用

7.append事件

例子：

function testF(){
$(".tianjia").append("无聊!");//向每个匹配的元素内部追加内容。
}

HTML部分：

<p class="tianjia">又是P标签</p>

点击触发事件后将在P标签内添加“”无聊“”语句

8.appendTo事件

例子：

function testG(){
$("#p").appendTo("span")//把所有匹配的元素追加到另一个指定的元素元素集合中,把id为P的值添加到span元素中去
}

HTML部分

点击触发事件后id为P的对象被添加到span标签中

9.after事件

例子：

function testH(){
$("input").after("<b>添加</b>");//在每个匹配的元素之后插入内容。在所有的input后添加b标签里的内容
}

HTML部分：

点击触发事件后所有的input标签后都被添加"<b>添加</b>“

10.show事件

例子：

function testI(){
$("#caonima").show(4000);//把隐藏的内在4000毫秒内显示出来
}

HTML部分：

JSP页面中的九个内置对象1.request：请求对象（作用域）2.response：相应对象3.pageContext：页面上下文对象（作用域）4.session：会话对象（作用域）
5.application;应用程序对象（作用域）6.out:输出对象7.config：配置对象8.page：也面对象9.exception：例外对象

</p>

点击触发事件后P标签内的隐藏内容将在4000毫秒内显示出来

以下11~13事件的HTML部分：

11. eq()事件

描述：

获取当前链式操作中第N个jQuery对象

例子：

function testL(){

alert($("li:eq(1)").text());/*获取当前链式操作中第N个jQuery对象，
返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1
代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个*/
}

点击触发事件后显示<li>LI1</li>

12.gt()事件

例子：

function testM(){

alert($("li:gt(0)").text());//匹配所有大于给定索引值的元素
}

点击触发事件后显示<li>LI2</li> <li checked="checked">LI3</li><li> LI4</li>

13.last事件

例子：

function testN(){
alert($("li:last").text());//获取匹配的最后个元素
}

点击触发事件后显示<li>LI4</li>

14.attr事件

例子：

function testO(){
alert($("input[name='newsletter']").attr("checked", true).val());//设置或返回被选元素的属性值。选中name为newsletter的值
}

HTML部分：

点击触发事件后name='newsletter'的input将被选中

15.selected事件

例子：

function testP(){
alert($("select option:selected").text());//匹配所有选中的option元素,查找所有选中的选项元素
}

HTML部分：

点击触发事件后第二个元素被选中

16.键盘事件

例子：

$(document).ready(function(){
$("input").keydown(function(event){ //在input中设置键盘监听
$("#jianpan").html("Key: " + event.which);//把获取到的值在id为jianpan的对象中输出
});
});

HTML部分：

请随意键入一些字符：<input type="text" />
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
<div id="jianpan"></div>

在文本框中输入对应的值在div中会输出键盘对应的值

jQuery事件还有很多这些事经常用到的一部分

阅读全文

0 0