博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

JQuey练习一

Posted on 2011-12-07 15:29  迷梦江南  阅读(202)  评论(0编辑  收藏  举报

$();css();size();

View Code

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title>Jquery函数</title>
 4     <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function () {
 7             // 获取body中DIV的个数
 8             var html = $('div');
 9             if (html) {
10                 for (var i = 0; i < html.length; i++) {
11                     if (html[i].id == 'div3') {
12                         break;
13                     }
14                     $('#spResult').append(html[i].innerHTML);
15                 }
16             }
17             //创建个新DIV添加到body中
18             html = null;
19             html = $('<div>第四个DIV</div>');
20             html.appendTo('body');
21 
22             //创建个checkbox添加到body中
23             html = null;
24             html = $('<input />', {
25                 type: 'checkbox',
26                 click: function () {
27                     alert('Hello !');
28                 }
29             });
30             html.appendTo('body');
31 
32             // 设置body样式
33             $('body').css({'background-color''blue','color':'red'});
34 
35             // 统计DIV个数
36             $('#spResult').append('<br/>DIV个数:' + $('div').size());
37             // 统计INPUT个数
38             $('#spResult').append('<br/>INPUT个数:' + $('input').size());
39             // 统计INPUT-TEXT个数
40             $('#spResult').append('<br/>INPUT-TEXT个数:' + $('input:text').size());
41             // 统计是只读的INPUT-TEXT个数
42             $('#spResult').append('<br/>INPUT-TEXT只读个数:' + $('input:text[readonly]').size());
43             // 统计ID为div3的子控件中INPUT-TEXT的个数
44             $('#spResult').append('<br/>DIV3中INPUT-TEXT个数:' + $('#div3>input:text').size());
45         });
46     </script>
47 </head>
48 <body>
49 <input  type="text" readonly="readonly"/>
50 <div id="div1">第一个DIV</div>
51 <div id="div2">第二个DIV</div>
52 <div id="div3">第三个DIV
53 <input type="radio" />
54 <input  type="text"/>
55 </div>
56 <hr />
57 <span id="spResult"></span>
58 </body>
59 </html>