一、jQuery选择器的基本用法
实例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
.content{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 src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
// 元素选择器、#id选择器、.class选择器
$('.but').click(function(){
$('.content').hide()
})
$('#but').click(function(){
$('.content').show()
})
// 类型选择器
// 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$(":button").click(function(){
$('.content').css('background','#ff6500')
})
// 选取 class 为 intro 的 <button> 元素
$("button.intro").click(function(){
$('.content').text('~ world!! ~')
})
// $(this) 选取当前 HTML 元素
$('p').click(function(){
$(this).text('~ who are you ?? ~').css('background','#ff6500')
})
// $("*") 选取所有元素
$('#hide').click(function(){
$('*').hide()
})
// console.log($('div').css('line-height'))
//文本框获得焦点事件
$("textarea").focus(function(){
$(this).css("border","1px solid red");
})
$("textarea").blur(function(){
$(this).css("border","1px solid #ccc");
})
})
</script>
</head>
<body>
<div class="content" style="">
~ hello!! ~
</div>
<button class="but">点我隐藏</button>
<button id="but">点我显示</button>
<button class="intro">点我有惊喜</button>
<p style="width: 200px;height: 200px;background: pink;text-align:center;line-height: 200px;">~ 你是谁?? ~</p>
<form>
<textarea></textarea>
</form>
<button id="hide">清空页面</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、2019年农历春节倒计时
实例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#countDown {
width: 1000px;
height: 500px;
margin: 0 auto;
text-align: center;
line-height: 500px;
color:cyan;
font-size: 30px;
background-color:firebrick;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="countDown">
<!-- 2019年农历春节倒计时：天/小时/分钟/秒 -->
</div>
<script>
$(function(){
// 获得倒计时的函数 end -> 截止的时间戳（毫秒）
function getCountDown(end){
var now = new Date().getTime();
var countDown = end - now;
if (countDown >= 0){
var day = Math.floor(countDown / (1000*60*60*24));
var hour = Math.floor((countDown/(1000*60*60)) % 24)
var min = Math.floor((countDown/(1000*60)) % 60);
var sec = Math.floor((countDown/1000) % 60);
var str = '2019年农历春节倒计时：' + day + '天/' + hour + '小时/' + min + '分钟/' + sec + '秒';
}else {
var str = '2019年农历春节倒计时：已结束';
}
$('#countDown').html(str);
}
var end = new Date(2019,1,5).getTime();
getCountDown(end);
setInterval(function (){
getCountDown(end);
},1000);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
