您的位置:首页 > Web前端 > JQuery

2,JQuery学习-为页面的元素添加点击事件

2012-11-09 10:17 351 查看
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
//$(document).ready();这个是要在页面加载时执行的函数,document表示本页面

$(document).ready(function (){
//这个是给这个页面的所有a标签添加点击事件
$('a').click(function (){
//这个是点击处理函数的内部处理
alert("响应了a标签的点击");
});
//这个是给这个页面的所有input标签添加点击事件
/*
$('input').click(function (){
alert("响应了input标签的点击");
});
*/
//这个是给input标签下所有type为text的标签元素添加点击事件
/*
$('input:text').click(function (){
alert("响应input标签下所有type为text的标签元素的点击事件");
});
*/
//这个是给input标签下所有type为text的标签元素中的第一个也就是0号添加点击事件
/*
$('input:text:first').click(function (){
alert("响应input标签下所有type为text的标签元素的第一个也就是0号的点击事件");
});
*/
//这个是给input标签下所有type为text的标签元素中的第一个也就是4号添加点击事件
/*
$('input:text:last').click(function (){
alert("响应input标签下所有type为text的标签元素的第一个也就是4号的点击事件");
});
*/
//下面是一些常用的过滤属性
// even偶数
// odd 基数
// eq  等于
// lt  小于
// gt  大于

/////////////过滤属性的用法////////////////
/*
$('input:text:even').click(function (){
alert("响应input下text下的第event号就是偶数号的点击");
});
*/
$('input:text:gt(3)').click(function(){
alert("响应input下text下的大于3号元素的点击");
});

//这个是给class为readBox的标签元素添加点击事件
$('.redBox').click(function (){
alert("响应class为redBox的标签元素的点击事件");
});
});
//d
</script>
<a href="#">点击</a><br/>
0号:<input type="text" name="t" /><br/>
1号:<input type="text" /><br/>
2号:<input type="text" /><br/>
3号:<input type="text" /><br/>
4号:<input type="text" /><br/>
<input type="checkbox" /><br/>
<div style="width:100px;height:100px;background-color:green;"></div>
<div style="width:100px;height:100px;background-color:red;" class="redBox"></div>


本文出自 “Kenan_ITBlog” 博客,请务必保留此出处http://soukenan.blog.51cto.com/5130995/1054790
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: