學習jQuery第一天：演示jQuery層次選擇器
阿新 • • 發佈：2019-02-14
body{ font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; color: #4F4A4A background: #F4FFDF; margin: 0; padding: 0; } #wrapper{ width: 710px; margin: 30px auto; background: #dbf5ab url (../images/logo.jpg) center top no-repeat; padding: 25px 25px 25px 25px; border: 12px solid #7fbf10; position: relative; } h1 { text-transform: capitalize; text-align: center; margin: 0; padding: 0.3em 0; text-indent:60px; } h2{ margin: 0; padding: 0.5em 0; color:#568945; font-family:Helvetica, Arial, Sans-serif; } p { margin: 0; padding: 0.4em 0; color:#4F4A4A; line-height:1.4em; } #nav { list-style: none; padding: 0; margin: 10px 0 20px 0; background: #7fbf10; display:block; overflow: hidden; font-size: lem; } #nav li { display: inline; } #nav li a { display: block; float: left; padding: 10px 20px; color: white; text-decoration: none; } #nav li a.current { background:#449F00; } #nav li a:hover { background:#449F00; } #content img.right { float: right; margin: 0 0 8px 8px; } #foot { padding: 15px; color: #7fbf10; text-align: center; margin: 30px 0 0 0; border-top :1px solid #7fbf10; } .red { background-color: red; } .green { background-color: blue; } #content #first { color: white; background-color: green; width:240px; height:100px; margin:10px 0px 0px 0px; padding: 10px; }
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jQuery Playground</title> <link title="style" media="screen" href="css/green.css" type="text/css" rel="stylesheet" /> <script type="text/JavaScript" src="js/jquery.js"></script> <script type="text/JavaScript"> $(document).ready(function(){ //onclic事件觸發 $("#testbutton").click(function(){ $("label + input").addClass("green"); } ); }); $(document).ready(function(){ //onclic事件觸發 $("#testbutton").click(function(){ $("label + input ").addClass("red"); } ); }); </script> </head> <body> <div id="wrapper"> <h1>jQuery Playground</h1> <ul id="nav"> <li><a class="current" href="index.html">Test Page</a></li> <li><a class="current" href="#">about</a></li> </ul> <div id="content"> <h2>演示jQuery層次選擇器</h2> <input id="testbutton" type=button value="單擊測試按鈕" /> </p> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <label>Others:</label> <input name="others" /> </div> <div id="foot">Powered By Dennis Ji.</div> </div> </body> </html>
我是這麼理解的 $(" ") 這個東西呢，就是jQuery用來放選擇器的地方，而jQuery的選擇器有很多都跟CSS很像。
還有
$(document).ready(function(){ //onclic事件觸發 $("#testbutton").click(function(){ $("label + input ").addClass("green"); } ); }); 這個 函式 是頁面DOM載入完成後執行，就是說如果你在這個函式下方又寫了這個函式，那麼他是會執行兩次，為了看出效果，在第一次繫結時給 label之後的所有兄弟元素input新增型別，背景色改為綠色，第二次繫結時，背景色該為紅色。最後點選“testbutton”，背景色是為紅色。。。。 window.onload=function(){}; window.onload=function(){};這樣只會執行最後一個