常用的jquery的选择器，及实例：
实例
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.content{
width: 600px;
height: 300px;
background: #d1f5b9;
text-align:center;
line-height: 300px;
margin-bottom: 20px;
font-size: 30px;
}
textarea{
width: 400px;
height: 200px;
border-radius: 6px;
outline:none; /*去掉文本框再带获得焦点样式*/
resize:none;/*当resize的属性为none时，则禁止拖动*/
}
p{
width: 600px;
height: 300px;
background: #5cf05f;
text-align:center;
line-height: 300px;
font-size: 20px;
}
</style>
<script>
$(function(){
// 元素选择器、#id选择器、.class选择器
$('.but').click(function(){
$('.content').hide();
});
$('#but').click(function(){
$('.content').show();
});
// 类型选择器
// 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$(":button").click(function(){
$('.content').css('background','antiquewhite');
});
// 选取 class 为 intro 的 <button> 元素
$("button.intro").click(function(){
$('.content').text('多情只有春庭月，犹为离人照落花。');
});
// $(this) 选取当前 HTML 元素
$('p').click(function(){
$(this).text('下一句： 玲珑骰子安红豆，入骨相思知不知。').css('background','#5cd7ee');
});
// $("*") 选取所有元素
$('#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="content">
独自莫凭栏，无限江山，别时容易见时难。
</div>
<button class="but">点我隐藏</button>
<button id="but">点我显示</button>
<button class="intro">换一句？</button>
<p>上一句： 井底点灯深烛伊，共郎长行莫围棋。</p>
<form>
<textarea></textarea>
</form>
<button id="hide">清空页面</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2019春节倒计时：
实例
<html>
<head>
<meta charset="UTF-8">
<title>js春节倒计时</title>
<style>
div{
width: 1000px;
height: 500px;
margin: 0 auto;
background-color: pink;
color: white;
font-size: 20px;
text-align: center;
}
p{
line-height: 500px;
}
</style>
<script type="text/javascript">
function Time() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var endDate = new Date('2/4/2019 23:59:59');
var end = endDate.getTime();
//时间差
var time = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (time) {
d = Math.floor(time/1000/60/60/24);
h = Math.floor(time/1000/60/60%24);
m = Math.floor(time/1000/60%60);
s = Math.floor(time/1000%60);
var time = "距离2019春节还有 "+d+"天"+h+"时"+m+"分"+s+"秒";
//将倒计时赋值到div中
document.getElementById('show_time').innerHTML = time;
}
setTimeout(Time,1000);
}
</script>
</head >
<body onload="Time()" >
<div><p id="show_time"></p></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
