一、jQuery选择器的进本用法
实例
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
.box{width: 200px;height: 200px;
background: pink;text-align:center;
line-height: 200px;margin-bottom: 10px;
}
textarea{width: 400px;
height: 200px;
border-radius: 6px;
outline:none; /*去掉文本框再带获得焦点样式*/
resize:none;/*当resize的属性为none时，则禁止拖动*/
}
</style>
<script>
$(function(){
//class选择器
$('.btn').click(function(){
$('.box').hide();
})
//id选择器
$('#btn').click(function(){
$('.box').show(100);
})
//类型选择器 选取 class 为 into 的 <button> 元素
$("button.into").click(function(){
$('.box').text('惊喜不！')
})
// $(this) 选取当前 HTML 元素
$('p').click(function(){
$(this).text('~惊喜不~').css('background','#ff6500')
})
// $("*") 选取所有元素
$('#hide').click(function(){
$('*').hide()
})
//文本框获得焦点事件
$("textarea").focus(function(){
$(this).css("border","1px solid red");
})
$("textarea").blur(function(){
$(this).css("border","1px solid #ccc");
})
})
</script>
</head>
<body>
<div class="box" style="">
~ hello!! ~
</div>
<button class="btn">点我隐藏</button>
<button id="btn">点我显示</button>
<button class="into">点我有惊喜</button>
<p style="width: 200px;height: 200px;background: pink;text-align:center;line-height: 200px;"> ~ hello!! ~</p>
<form>
<textarea></textarea>
</form>
<button id="hide">清空页面</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、春节倒计时
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style type="text/css">
.content{width: 80%; height: 350px; margin: 0 auto; }
</style>
<body>
<div class="content">
<div class="timespan">
</div>
</div>
</body>
<script type="text/javascript">
var starttime= new Date("2019/02/04");
setInterval(function(){
var nowtime=new Date();
var time= starttime-nowtime ;
var day = parseInt(time / 1000 / 60 / 60 / 24);
var hour = parseInt(time / 1000 / 60 / 60 % 24);
var minute = parseInt(time / 1000 / 60 % 60);
var seconds = parseInt(time / 1000 % 60);
$('.timespan').html("2019年春节倒计时"+day+"天"+hour+"小时"+minute+"分钟"+seconds+"秒")
})
$(function(){
$('.content').css('background','pink')
$('.timespan').css({"color":"#fff","padding-top":"100px","text-align":"center","font-size":"50px"})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例