五.JQuary 实例
需要引入jquery.js文件
script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="../js/jquery-3.2.1.js"></script> 7 </head> 8 <script type="text/javascript"> 9 // var $ = $uery.noConflict(); 10 $("document").ready(function () { 11 $("div#id1").click(function () { 12 $(this).hide(); 13 }); 14 $("[href]").click(function () { 15 $("#xq").trigger("click"); 16 }); 17 $("button").click(function () { 18 $("div").css("background-color","red"); 19 $("div").css("height","100px"); 20 $("div").html("<h1>海文你好</h1>"); 21 }); 22 $("button").bind("mouseover",function () { 23 $("div").css("background-color","yellow"); 24 }).bind("mouseout",function () { 25 $(this).css("background-color","green"); 26 }); 27 $("#xq").click(function () { 28 $("input").trigger("select"); 29 $("div#f1").fadeOut(2000,function () { 30 alert("我要消失了"); 31 }); 32 }); 33 }); 34 </script> 35 <body> 36 <div id="f1">点我</div> 37 <div class="c1" >点我 哈哈</div> 38 <div>点我</div> 39 <div id="id1">点我 hehe</div> 40 <a href="#">我是超链接</a> 41 <button>改变样式</button> 42 <input value="hahaha"><input value="hahaha"><input value="hahaha"> 43 <button id="xq">选取</button> 44 </body> 45 </html>
