实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.常用的jq事件</title>
<style type="text/css">
.content{
width: 200px;height: 200px;
background: lightblue;
text-align: center;line-height: 200px;
}
textarea{
width: 300px;height: 80px;
border-radius: 8px;
resize: none; /*禁止文本框拖动*/
outline: none; /*去掉自带焦点*/
padding: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
// 1.#id与.class选择器
$('.btn1').click(function(){
$('.content').hide(100);
});
$('.btn2').click(function(){
$('.content').show(100);
});
$('#btn3').click(function(){
$('.content').toggle();
});
// 2.类型选择器
$(':button').click(function(){
$('.content').css('background','blue');
});
$('button.btn5').click(function(){
$('.content').html('World');
});
$('p').mouseover(function(){
$(this).text('Hello').css('background','red');
});
$('p').mouseout(function(){
$(this).text('Hello2').css('background','blue');
});
// 3.jQ焦点
$('textarea').focus(function(){
$(this).css('border','2px solid lightblue');
});
$('textarea').blur(function(){
$(this).css('border','2px solid blue');
});
// 4.jQ遍历
$('input').click(function(){
$(this).parent().css('border','2px solid red');
});
$('input').mouseover(function(){
$(this).parents('form').css({'border':'2px solid blue','width':'300px'});
});
$('input').click(function(){
$(this).parentsUntil('div').css({'border':'2px solid yellow','background':'green'});
});
$('#btn6').click(function(){
$('*').hide();
});
});
</script>
</head>
<body>
<div class="content"></div>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
<button id="btn3">隐藏+显示</button>
<hr>
<div class="content"><p>Who am i.</p></div>
<button>点击变颜色</button>
<button class="btn5">点击改变文本</button>
<hr>
<textarea></textarea>
<hr>
<div style="width:320px;height:120px;">
<form style="width:100px;height:80px;">
<input type="" name="" style="width:80px;">
</form>
</div>
<hr>
<button id="btn6">清空</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
