标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/linkarl/p/5150289.html
