实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery基础</title>
<style>
.hello,p{
width: 200px;
height: 200px;
background-color: aqua;
text-align: center;
line-height: 200px;
margin-bottom: 10px;
}
textarea{
width: 400px;
height: 200px;
border-radius: 8px;
resize: none;
outline: none;
padding: 5px;
}
</style>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
<script src="js/jq_3.3.1_mi.js"></script>
<script>
$(function(){
// $('.but').click(function(){
// $('.hello').css('display','none')
// })
// $('#but').click(function(){
// $('.hello').show(1000)
// })
// 类型选择器
// $(':button').click(function(){
// $('.hello').css('background','blue')
// })
$('button.int').click(function(){
$('.hello').text('我不好')
})
// 鼠标移入
$('p').mouseover(function(){
$(this).text('你又不认识').css('background','yellow')
})
// 鼠标移出
$('p').mouseleave(function(){
$(this).text('再见').css('background','aqua')
})
// * 选择所有元素
$('input').click(function(){
$('*').hide()
})
$('textarea').focus(function(){
$(this).css('border','1px solid red')
})
})
</script>
</head>
<body>
<div class="hello">
你好啊
</div>
<button class="but">点我隐藏</button>
<button id="but">点我显示</button>
<button class="int">点我惊喜</button>
<p>你是谁</p>
<form>
<textarea></textarea>
</form>
<input type="button" value="清空">
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例