1-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> window.onload = function(){}; //$(document).ready(function() {}); == $(function(){}); $(document).ready(function() { alert("welcome to jquery"); }); //区别... //1.执行时间不同--$(document).ready()在页面框架下载完毕后执行；window.onload必须在页面全部加载完毕后执行 //2.执行数量不同 //3.$(document).ready()简写
</script> </head> <body> </body> </html>
1-2 链式写法，两个功能实现通"."符号连接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>事件的链式方法</title> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <style type="text/css"> .divFrame{ width:260px; border:solid 1px #666; font-size:10pt;} .divTitle{ background-color:#eee; padding:5px;} .divContent{ padding:5px; display:none;} .divCurrColor{ background-color:red;} </style> <script> var jici =0; $(document).ready(function() { $(".divTitle").click(function(){ //链式的写法... $(this).addClass("divCurrColor").next(".divContent").css("display","block"); /* if(jici ==0) { $(".divContent").css("display","block"); jici =1; } else { $(".divContent").css("display","none"); jici =0; } */ }); }); </script> </head> <body> <div class="divFrame"> <div class="divTitle">Title</div> <div class="divContent"> <a href="#">111</a> <a href="#">222</a> <a href="#">333</a> </div> </div> </body> </html>
1-3 控制DOM对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> .divFrame{ width:260px; border:solid 1px #666; font-size:10pt;} .divTitle{ background-color:#eee; padding:5px;} .divContent{ padding:8px; font-size:9pt;} .divTip{ width:244px; border:solid 1px #666; padding:8px; font-size:9pt; margin-top:5px; display:none;} .txtCss{ border:solid 1px #ccc;} .divBtn{ padding-top:5px;} .divBtn .btnCss{ border:solid 1px #535353; width:60px;} </style> <script> //use javascript function test(){ var name = document.getElementById('Text1').value; var sex = (Radio1.checked)?"男":"女"; var marry = (Checkbox1.checked)? "已婚":"未婚"; document.getElementById('divTip').style.display ="block"; document.getElementById('divTip').innerHTML = name+"<br />"+sex+"<br />"+marry; }; </script> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> $(document).ready(function() { $("#Button1").click(function () { var name = $("#Text1").val(); var sex =$("#Radio1").is(":checked")?"男":"女"; var marry =$("#Checkbox1").is(":checked")?"已婚":"未婚"; $("#divTip").css("display","block").html(name+"<br />"+sex+"<br />"+marry); }); }); </script> <body> <div class="divFrame"> <div class="divTitle">请输入如下信息</div> <div class="divContent"> 姓名:<input id="Text1" type="text" class="txtCss" /><br /> 性别：<input id="Radio1" name="rdoSex" type="radio" value="男" />男 <input id="Radio2" name="rdoSex" type="radio" value="女" />女<br /> 婚否<input id="Checkbox1" type="checkbox" /> <div class="divBtn"><input id="Button1" type="button" value="提交" class="btnCss" /></div> </div> </div> <div id="divTip" class="divTip"></div> </body> </html>
1-4 控制CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .divDefault{ width:260px; font-size:10pt; padding:5px;} .divClick{ width:260px; border:solid 1px #666; font-size:10pt; background-color:#eee; padding:5px;} </style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script> // toggleClass addClass $(function(){ $(".divDefault").click(function(){ $(this).toggleClass("divClick").html("点击后的样式"); }); }) </script> </head> <body> <div class="divDefault">点击前的样式</div> </body> </html>