常用的 jQuery 事件方法

来源：互联网发布：C语言下列说法正确的是编辑：程序博客网时间：2024/05/02 00:42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery特效1</title>
<script src="main.js"></script>
<script>
$(document).ready(function(e) {
$('p').click(function(){
// jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
//$(this).hide();

// jQuery 的 hide() 函数，隐藏所有 <p> 元素。
//$('p').hide();

// 隐藏所有 class="test" 的 <p> 元素
//$('p.test').hide();

//隐藏所有 id="test" 的元素
//$('#test').hide();
});

//button选择器弹出提示框
//$('button').click(function(){alert('这是Button')});

//button选择器隐藏id为test的标签
// $("button").click(function(){ $("#test").hide(); });

//button选择器隐藏class为test的标签
// $("button").click(function(){ $(".test").hide(); });

//button选择器隐藏所有元素
// $("button").click(function(){ $("*").hide(); });

//button选择器隐藏第一个P标签元素
//$("button").click(function(){ $("p:first").hide(); });

//button选择器隐藏table奇数行元素
//$("#j").click(function(){ $("tr:odd").hide(); });

//button选择器隐藏table偶数行元素
// $("#o").click(function(){ $("tr:even").hide(); });

//选取第一个 <ul> 元素的第一个 <li> 元素
// $("button").click(function(){$("ul li:first").hide(); });

//选取每个 <ul> 元素的第一个 <li> 元素
// $("button").click(function(){ $("ul li:first-child").hide(); });

//选取所有 target 属性值等于 "_blank" 的 <a> 元素
//$("button").click(function(){ $("a[target='_blank']").hide(); });

//选取所有 target 属性值不等于 "_blank" 的 <a> 元素
//$("button").click(function(){ $("a[target!='_blank']").hide(); });

//单击事件
//$('button').click(function(){alert('单击触发事件...');});

//双击事件
//$('button').dblclick(function(){alert('双击666...');});

//当鼠标指针穿过元素时，会发生 mouseenter 事件
//$('#text').mouseenter(function(){document.getElementById('text').value='鼠标指针穿过元素';});

//当鼠标指针离开元素时，会发生 mouseleave 事件
//$('#text').mouseleave(function(){document.getElementById('text').value='鼠标指针离开元素';});

//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
//$('#text').mousedown(function(){document.getElementById('text').value='鼠标指针移动到元素上方，并按下鼠标按键';});

//当在元素上松开鼠标按钮时，会发生 mouseup 事件
//$('#text').mouseup(function(){document.getElementById('text').value='鼠标指针移动到元素上方，并在元素上松开鼠标按钮';});

//hover()方法用于模拟光标悬停事件。
//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数
//$("#text").hover( function(){document.getElementById('text').value='鼠标移动到元素上';},
// function(){
// document.getElementById('text').value='鼠标移出这个元素'; });

//当元素获得焦点时，发生 focus 事件。
$('#text').focus(function(){document.getElementById('text').value='获取焦点'; $(this).css("background-color","#ff0000");});
//当元素失去焦点时，发生 blur 事件。
$('#text').blur(function(){document.getElementById('text').value='失去焦点'; $(this).css("background-color","#CCCCCC");});

});
</script>
</head>
<body>
<h2 style="color:red;">测试时请打开注释的代码</h2>
<p>有种你点我试试</p>
<p>你再点我试试</p>
<p>点我试试</p>
<p class="test">点我试试-class="test"</p>
<p id="test">点我试试-id="test"</p>
<button>点我试试</button>
<table width="400" border="1">
<tr><td height="30">1</td><td>2</td></tr>
<tr><td height="30">1</td><td>2</td></tr>
<tr><td height="30">1</td><td>2</td></tr>
<tr><td height="30">1</td><td>2</td></tr>
</table>
<button id="j">隐藏奇数行</button>
<button id="o">隐藏偶数行</button>

<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>选取第一个 ul元素的第一个 li 元素</button>
<button>选取每一个 ul元素的第一个 li 元素</button>

<p><a href="http://www.runoob.com/html/" target="_blank">target="_blank"</a></p>
<p><a href="http://www.runoob.com/css/">targe!t="_blank"</a></p>
<button>选取所有 target 属性值等于 "_blank" 的 a 元素</button>
<button>选取所有 target 属性值不等于 "_blank" 的 a 元素</button>
<br /><br /><br />
<button>单击我试试</button>
<button>双击我试试</button>
<br /><br /><br />
<input type="text" style="width:500px" placeholder="鼠标移动事件" id="text"/>
</body>
</html>

0 0