NEO

蜀道难，难于上青天！

导航

20130527-jQuery in actin-看代码说事-ch01

Posted on 2013-05-27 17:42  页面载入出错  阅读(165)  评论(0)  编辑  收藏  举报

chapter01

listing-1.1

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>Follow me!</title>
 5     <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
 6     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 7     <script type="text/javascript">
 8       $(function() {
 9         $("<p>Hi there!</p>").insertBefore("#followMe");
10       });
11     </script>
12   </head>
13 
14   <body>
15     <p id="followMe">Follow me!</p>
16   </body>
17 </html>
  • $("<p>Hi there!</p>").insertBefore("#followMe");在<p id="followMe">之前插入一段文字
  • $("<p>Hi there!</p>").insertAfter("#followMe");在<p id="followMe">之后插入一段文字

radio.group.html

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>Radio Group Example</title>
 5     <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
 6     <style type="text/css">
 7       #result tt {
 8         color: maroon;
 9         font-size: 1.1em;
10       }
11       form>div {
12         margin-top: 0.9em;
13       }
14     </style>
15     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
16     <script type="text/javascript">
17       $(function(){
18         $('#testButton').click(function(){
19           var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();
20           $('#result').html('The radio element with value <tt>' + checkedValue + '</tt> is checked.');
21         });
22       });
23     </script>
24   </head>
25   <body>
26 
27     <form>
28       <div>
29         <label for="radioYes">What is your answer?</label>
30         <input type="radio" name="someRadioGroup" id="radioYes" value="yes" checked="checked"/> Yes
31         <input type="radio" name="someRadioGroup" id="radioNo" value="no"/> No
32         <input type="radio" name="someRadioGroup" id="radioMaybe" value="maybe"/> Maybe
33         <input type="radio" name="someRadioGroup" id="radioConfused" value="confused"/> I dunno
34       </div>
35       <div><button type="button" id="testButton"class="green90x24">Which?</button></div>
36       <div id="result"></div>
37     </form>
38 
39   </body>
40 </html>
  • var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();获取单选变量的值,要点-radio:checked,获取到值
  • $('#result').html('The radio element with value <tt>' + checkedValue + '</tt> is checked.');在<div id="result">插入文字