<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8" >
<title>jquery</title>
<script src="jquery-1.12.0.min.js"></script>
<script>
/*$(selector).action()*/
// 页面加载后执行
// event click dblclick focus mouseover
$(document).ready(function(){
$("button").click(function(){
// $("#p1").hide(200); 单位ms 200ms内消失
// $("#p1").show();
// $("#p1").toggle(speed,callback);toggle()方法完后callback 函数
$("#p2").toggle(200);
});
$("#btn1").click(function(){
// (speed,callback);
// $("#p1").fadeIn();
// $("#p1").fadeOut();
// $("#p1").fadeToggle();
// (speed,opacity,callback); opacity 不透明度（值介于 0 与 1 之间）
$("#p2").fadeTo(200,0.4);
});
$("#btn2").click(function(){
// $("#p2").slideDown();
// $("#p2").slideUp();
$("#p2").slideToggle();
});
$("#btn3").click(function(){
/* var div=$("div");
使用队列功能
div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
*/
$("#p2").animate({
// left:‘100px‘
width:‘250px‘,
opacity:‘0.5‘,
height:‘+=150px‘,/*相对于元素的当前值*/
fontSize:‘3em‘
},2000
);
});
$("#btn4").click(function(){
$("#p2").text("enen");
$("#p2").html("enen");/*所选元素的内容（包括 HTML 标记）*/
$("#p2").val("enen");/*表单字段的值*/
$("#p2").attr("id");
$("#p2").append("id");/*被选元素的结尾插入内容*/
$("#p2").prepend("id");/*被选元素的开头插入内容*/
$("#p2").after("id");/*被选元素之后插入内容*/
$("#p2").before("id");/*被选元素之前插入内容*/
$("#p2").remove();/*删除被选元素及其子元素*/
$("#p2").empty();/*被选元素的子元素*/
});
$("#btn5").click(function(){
$("#p2").css("background-color","red");
});
$("#btn6").click(function(){
$("#p2").addClass("class1");
$("#p2").toggleClass("class1");
});
$("#btn7").click(function(){
$("#p2").removeClass("class1");
});
$("#p1").mouseover(function(){
$("#p2").animate({
// left:‘100px‘
width:‘250px‘,
opacity:‘0.5‘,
height:‘+=150px‘,/*相对于元素的当前值*/
fontSize:‘3em‘
},2000
);
});
});
</script>
<style type="text/css">
.class1{
text-decoration: underline;
font-family: "微软雅黑";
font-size: 20px;
color: red;
}
p{
width: 100px;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
</style>
</head>
<body>
<p id="p1">p1</p>
<button type="button">隐藏</button>
<input id="btn1" type="button" value="淡入淡出" />
<input id="btn2" type="button" value="滑动" />
<input id="btn3" type="button" value="动画" />
<input id="btn4" type="button" value="改变html元素内容" />
<input id="btn5" type="button" value="改变css样式" />
<input id="btn6" type="button" value="添加类" />
<input id="btn7" type="button" value="删除类" />
<input id="btn8" type="button" value="" />
<p id="p2">p2</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="3.3.5/js/jquery-1.11.3.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.annaStyle{
text-decoration: underline;
margin: 30px;
}
.row div{
margin-bottom: 10px;
}
</style>
<body>
<h1></h1>
<p>p</p>
<input class="btn btn-lg btn-danger annaStyle" type="button" value="download">
<img src="images/img1.png" class="img-circle">
<br>
<div class="container" style="text-align:center;">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img1.png"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img2.png"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img3.png"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img4.png"></div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
color: white;
text-align: center;
margin: 30px;
}
#div1{
height: 50px;
border-radius: 25px;
}
#div2{
/*x轴偏移量 y轴偏移量 模糊距离*/
box-shadow: 10px 10px 5px #888888;
}
#div3{
background-color: red;
transform: rotate(-30deg);/*正数顺时针 变形 旋转 deg-degree */
}
#div4{
background-color: yellow;
transform:translate(50px,50px);
}
#h1{
text-shadow: #f00 5px 5px 5px;
}
#div5{
background-color: #0CF;
transition:width 1s,height 1s,background-color 1s;/*过渡*/
}
#div5:hover{
width: 250px;
height: 250px;
background-color: red;
}
#div6{
transition: border-radius 1s,transform 1s;
}
#div6:hover{
border-radius: 30px;
transform:rotate(720deg);
}
</style>
</head>
<body>
<h1 id="h1">h1</h1>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<script type="text/javascript">
function changeColor(){
var color=document.getElementById("colorBox").value;
document.bgColor=color
}
</script>
</head>
<body>
<audio src="resources/music5.mp3" controls="controls">
Your browser does not support the audio element.</audio>
<br>
<video src="resources/梦娃公益广告之中国梦.mp4" controls="controls">Your browser does not support the video tag.
</video>
<br>
选择页面的背景颜色:<input id="colorBox" type="color" value="#ddeeff" onchange="changeColor()" >
请选择出生日期<input type="date" />
</audio>
</body>
</html>
时间： 2024-10-04 09:15:25