当前位置: 首页>前端>正文

jquery i18n例子 jquery教程实例

jquery实例教学一

今天我们继续探讨jquery的相关内容。

首先,我们看看基本过滤选择器:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html,第1张

                       

一、选中单行或双行

能不能选中指定的某一个呢?

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_02,第2张

二、筛选大于,小于的

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_03,第3张

三、注意选择的顺序呦

:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>

插入代码位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $('#btn').click(function () {
 9                 //设置除了应用了test类样式以外的其他的div都设置为背景色黄色
10                $('div:not(.test)').css('backgroundColor','yellow');
11             });
12         });
13     </script>
14        <style type="text/css">
15         div
16         {
17             border: 1px solid blue;
18             width: 300px;
19             height: 50px;
20             margin-bottom: 5px;
21         }
22         .test
23         {
24             color:red;
25             font-size:40px;
26             font-family:华文行楷;
27         }
28     </style>
29 </head>
30 <body>
31 <input type="button" name="name" value="button" id="btn" />
32     <div>a
33     </div>
34     <div>a
35     </div>
36     <div class="test">a
37     </div>
38     <div>a
39     </div>
40     <div class="test">a
41     </div>
42     <div>a
43     </div>
44     <div>a
45     </div>
46     <div>a
47     </div>
48     <div class="test">a
49     </div>
50     <div>a
51     </div>
52 </body>
53 </html>

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_06,第6张

四、header

有了这些知识以后,下面我们做几个练习。

题目:第一行是表头,所以显示大字体(fontSize=30px),最后一行是汇总,所以显示红色字体。正文的前三行是前三名,所以显示傻大的字体(28)表格的偶数行是红色色背景。

用Dom实现;用jQuery实现。对比差异!

注意:gt(0):lt(3),表示先筛选出所有大于0的,然后在此基础上再筛选出所有小于3的,即:在所有大于0的基础上再选择0,1,2。

习题代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $('#btn').click(function () {
 9                 //设置表格的第一行为表头,即显示字体变为30px
10                 $('#table1 tr:first').css('font-size', '30px');
11                 $('#table1 tr:last').css('color', 'red');
12                 //注意在写代码的时候,写点调点。
13                 $('#table1 tr:gt(0):lt(3)').css('font-size', '28px');
14                 $('#table1 tr:odd').css('backgroundColor','red');
15             });
16         });
17     </script>
18 </head>
19 <body>
20     <input type="button" name="name" value="设置表格样式" id="btn"/>
21   <table id="table1" border="1" >
22         <tr>
23             <td>
24                 姓名
25             </td>
26             <td>
27                 成绩
28             </td>
29         </tr>
30         <tr>
31             <td>
32                 tom
33             </td>
34             <td>
35                 100
36             </td>
37         </tr>
38         <tr>
39             <td>
40                 jim
41             </td>
42             <td>
43                 99
44             </td>
45         </tr>
46         <tr>
47             <td>
48                 john
49             </td>
50             <td>
51                 98
52             </td>
53         </tr>
54         <tr>
55             <td>
56                 jason
57             </td>
58             <td>
59                 97
60             </td>
61         </tr>
62         <tr>
63             <td>
64                 aaa
65             </td>
66             <td>
67                 97
68             </td>
69         </tr>
70         <tr>
71             <td>
72                 平均分
73             </td>
74             <td>
75                 98
76             </td>
77         </tr>
78     </table>
79 </body>
80 </html>

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_09,第9张

习题演示

案例2:点击按钮,表格隔行变色。奇红,偶黄。

案例2代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>
  6     <script type="text/javascript">
  7         $(function () {
  8             $('#btn').click(function () {
  9                 $('#t1 tr:even').css('backgroundColor', 'red');
 10                 $('#t1 tr:odd').css('backgroundColor','yellow');
 11             });
 12         });
 13     </script>
 14 </head>
 15 <body>
 16     <input type="button" name="name" value="点我表格隔行变色" id="btn"/>
 17     <table id="t1" border="1" cellpadding="1" cellspacing="1">
 18         <tr>
 19             <td>川川是狗狗
 20             </td>
 21             <td>川川不是狗
 22             </td>
 23             <td>那是啥啊?
 24             </td>
 25              <td>川川是狗狗
 26             </td>
 27             <td>川川不是狗
 28             </td>
 29             <td>那是啥啊?
 30             </td>
 31         </tr>
 32            <tr>
 33             <td>川川是狗狗
 34             </td>
 35             <td>川川不是狗
 36             </td>
 37             <td>那是啥啊?
 38             </td>
 39              <td>川川是狗狗
 40             </td>
 41             <td>川川不是狗
 42             </td>
 43             <td>那是啥啊?
 44             </td>
 45         </tr>
 46            <tr>
 47             <td>川川是狗狗
 48             </td>
 49             <td>川川不是狗
 50             </td>
 51             <td>那是啥啊?
 52             </td>
 53              <td>川川是狗狗
 54             </td>
 55             <td>川川不是狗
 56             </td>
 57             <td>那是啥啊?
 58             </td>
 59         </tr>
 60            <tr>
 61             <td>川川是狗狗
 62             </td>
 63             <td>川川不是狗
 64             </td>
 65             <td>那是啥啊?
 66             </td>
 67              <td>川川是狗狗
 68             </td>
 69             <td>川川不是狗
 70             </td>
 71             <td>那是啥啊?
 72             </td>
 73         </tr>
 74            <tr>
 75             <td>川川是狗狗
 76             </td>
 77             <td>川川不是狗
 78             </td>
 79             <td>那是啥啊?
 80             </td>
 81              <td>川川是狗狗
 82             </td>
 83             <td>川川不是狗
 84             </td>
 85             <td>那是啥啊?
 86             </td>
 87         </tr>
 88            <tr>
 89             <td>川川是狗狗
 90             </td>
 91             <td>川川不是狗
 92             </td>
 93             <td>那是啥啊?
 94             </td>
 95              <td>川川是狗狗
 96             </td>
 97             <td>川川不是狗
 98             </td>
 99             <td>那是啥啊?
100             </td>
101         </tr>
102            <tr>
103             <td>川川是狗狗
104             </td>
105             <td>川川不是狗
106             </td>
107             <td>那是啥啊?
108             </td>
109              <td>川川是狗狗
110             </td>
111             <td>川川不是狗
112             </td>
113             <td>那是啥啊?
114             </td>
115         </tr>
116            <tr>
117             <td>川川是狗狗
118             </td>
119             <td>川川不是狗
120             </td>
121             <td>那是啥啊?
122             </td>
123              <td>川川是狗狗
124             </td>
125             <td>川川不是狗
126             </td>
127             <td>那是啥啊?
128             </td>
129         </tr>
130     </table>
131 </body>
132 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_12,第12张

案例2演示

案例3:列表中的前三名粗体显示。(前三个li)font-weight:bolder

案例3代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>
  6     <script type="text/javascript">
  7         $(function () {
  8             $('#btn').click(function () {
  9                 $('#t1 tr:even').css('backgroundColor', 'red');
 10                 $('#t1 tr:odd').css('backgroundColor', 'yellow');
 11                 //让鼠标进入之后,还是箭头。
 12                 $('tr').css('cursor', 'default');
 13             });
 14                 $('#btn1').click(function () {
 15                     $('ul:first li:lt(3)').css('font-weight','bolder');
 16                 });
 17         });
 18     </script>
 19 </head>
 20 <body>
 21     <input type="button" name="name" value="点我表格隔行变色" id="btn"/>
 22     <table id="t1" border="1" cellpadding="1" cellspacing="1">
 23 
 24         <tr>
 25             <td>川川是狗狗
 26             </td>
 27             <td>川川不是狗
 28             </td>
 29             <td>那是啥啊?
 30             </td>
 31              <td>川川是狗狗
 32             </td>
 33             <td>川川不是狗
 34             </td>
 35             <td>那是啥啊?
 36             </td>
 37         </tr>
 38            <tr>
 39             <td>川川是狗狗
 40             </td>
 41             <td>川川不是狗
 42             </td>
 43             <td>那是啥啊?
 44             </td>
 45              <td>川川是狗狗
 46             </td>
 47             <td>川川不是狗
 48             </td>
 49             <td>那是啥啊?
 50             </td>
 51         </tr>
 52            <tr>
 53             <td>川川是狗狗
 54             </td>
 55             <td>川川不是狗
 56             </td>
 57             <td>那是啥啊?
 58             </td>
 59              <td>川川是狗狗
 60             </td>
 61             <td>川川不是狗
 62             </td>
 63             <td>那是啥啊?
 64             </td>
 65         </tr>
 66            <tr>
 67             <td>川川是狗狗
 68             </td>
 69             <td>川川不是狗
 70             </td>
 71             <td>那是啥啊?
 72             </td>
 73              <td>川川是狗狗
 74             </td>
 75             <td>川川不是狗
 76             </td>
 77             <td>那是啥啊?
 78             </td>
 79         </tr>
 80            <tr>
 81             <td>川川是狗狗
 82             </td>
 83             <td>川川不是狗
 84             </td>
 85             <td>那是啥啊?
 86             </td>
 87              <td>川川是狗狗
 88             </td>
 89             <td>川川不是狗
 90             </td>
 91             <td>那是啥啊?
 92             </td>
 93         </tr>
 94            <tr>
 95             <td>川川是狗狗
 96             </td>
 97             <td>川川不是狗
 98             </td>
 99             <td>那是啥啊?
100             </td>
101              <td>川川是狗狗
102             </td>
103             <td>川川不是狗
104             </td>
105             <td>那是啥啊?
106             </td>
107         </tr>
108            <tr>
109             <td>川川是狗狗
110             </td>
111             <td>川川不是狗
112             </td>
113             <td>那是啥啊?
114             </td>
115              <td>川川是狗狗
116             </td>
117             <td>川川不是狗
118             </td>
119             <td>那是啥啊?
120             </td>
121         </tr>
122            <tr>
123             <td>川川是狗狗
124             </td>
125             <td>川川不是狗
126             </td>
127             <td>那是啥啊?
128             </td>
129              <td>川川是狗狗
130             </td>
131             <td>川川不是狗
132             </td>
133             <td>那是啥啊?
134             </td>
135         </tr>
136     </table>
137     <input type="button" name="name" value="设置列表的前三名为粗体" id="btn1"/>
138     <ul>
139         <li>公牛</li>
140         <li>公牛</li>
141         <li>公牛</li>
142         <li>公牛</li>
143         <li>公牛</li>
144         <li>公牛</li>
145         <li>公牛</li>
146         <li>公牛</li>
147         <li>公牛</li>
148         <li>公牛</li>
149     </ul>
150 </body>
151 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_15,第15张

案例3演示

案例4:表格点击行背景色变黄,其他行背景色变白。

案例4代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>
  6     <script type="text/javascript">
  7         $(function () {
  8             //换成mouseover就是随鼠标移动,到哪行,哪行就变色。
  9         //click是点击哪行,哪行变色。
 10         $('#t2 tr').mouseover(function () {
 11     $(this).css('backgroundColor','yellow').siblings('tr').css('background','');
 12 });
 13         });
 14     </script>
 15 </head>
 16 <body>
 17  <table id="t2" border="1" cellpadding="1" cellspacing="1">
 18 
 19         <tr>
 20             <td>川川是狗狗
 21             </td>
 22             <td>川川不是狗
 23             </td>
 24             <td>那是啥啊?
 25             </td>
 26              <td>川川是狗狗
 27             </td>
 28             <td>川川不是狗
 29             </td>
 30             <td>那是啥啊?
 31             </td>
 32         </tr>
 33            <tr>
 34             <td>川川是狗狗
 35             </td>
 36             <td>川川不是狗
 37             </td>
 38             <td>那是啥啊?
 39             </td>
 40              <td>川川是狗狗
 41             </td>
 42             <td>川川不是狗
 43             </td>
 44             <td>那是啥啊?
 45             </td>
 46         </tr>
 47            <tr>
 48             <td>川川是狗狗
 49             </td>
 50             <td>川川不是狗
 51             </td>
 52             <td>那是啥啊?
 53             </td>
 54              <td>川川是狗狗
 55             </td>
 56             <td>川川不是狗
 57             </td>
 58             <td>那是啥啊?
 59             </td>
 60         </tr>
 61            <tr>
 62             <td>川川是狗狗
 63             </td>
 64             <td>川川不是狗
 65             </td>
 66             <td>那是啥啊?
 67             </td>
 68              <td>川川是狗狗
 69             </td>
 70             <td>川川不是狗
 71             </td>
 72             <td>那是啥啊?
 73             </td>
 74         </tr>
 75            <tr>
 76             <td>川川是狗狗
 77             </td>
 78             <td>川川不是狗
 79             </td>
 80             <td>那是啥啊?
 81             </td>
 82              <td>川川是狗狗
 83             </td>
 84             <td>川川不是狗
 85             </td>
 86             <td>那是啥啊?
 87             </td>
 88         </tr>
 89            <tr>
 90             <td>川川是狗狗
 91             </td>
 92             <td>川川不是狗
 93             </td>
 94             <td>那是啥啊?
 95             </td>
 96              <td>川川是狗狗
 97             </td>
 98             <td>川川不是狗
 99             </td>
100             <td>那是啥啊?
101             </td>
102         </tr>
103            <tr>
104             <td>川川是狗狗
105             </td>
106             <td>川川不是狗
107             </td>
108             <td>那是啥啊?
109             </td>
110              <td>川川是狗狗
111             </td>
112             <td>川川不是狗
113             </td>
114             <td>那是啥啊?
115             </td>
116         </tr>
117            <tr>
118             <td>川川是狗狗
119             </td>
120             <td>川川不是狗
121             </td>
122             <td>那是啥啊?
123             </td>
124              <td>川川是狗狗
125             </td>
126             <td>川川不是狗
127             </td>
128             <td>那是啥啊?
129             </td>
130         </tr>
131     </table>
132 </body>
133 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_18,第18张

案例4演示

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_19,第19张

五、几个小问题

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_20,第20张

 

六、学会使用帮助

这里出两道题,测试一下:

$(    “ul”, $(this)    ).css(“background”, “red”);

$(选择器,context);例如:$(‘td’,$(‘div table tr’));

context参数可以是用dom对象集合或jQuery对象

默认如果不传递context则,会在整个文档中搜索。

案例:修改点击行的所有td的背景色,将当前点击行的td设置为奇数td背景色红色,偶数td背景色蓝色。通过$(‘td’,context)

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5     <title></title>
  6     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>
  7     <script type="text/javascript">
  8     //记得把注册的点击事件写在ready里面,否则的话不报错。
  9         $(function () {
 10             $('#t1 tr').click(function () {
 11                 //限定范围,在当前点的那行里面找td
 12                 //写完后,再把其它行清一下。
 13                 $('#t1 tr td').css('backgroundColor', '')
 14                 $('td:odd', $(this)).css('backgroundColor', 'red');
 15                 $('td:even', this).css('backgroundColor', 'blue');    
 16             });
 17         });
 18     </script>
 19 </head>
 20 <body>
 21    <table id="t1" border="1"> 
 22         <tr>
 23             <td>川川是狗狗
 24             </td>
 25             <td>川川是狗狗
 26             </td>
 27             <td>川川是狗狗
 28             </td>
 29             <td>川川是狗狗
 30             </td>
 31             <td>川川是狗狗
 32             </td>
 33             <td>川川是狗狗
 34             </td>
 35         </tr>
 36          <tr>
 37             <td>川川是狗狗
 38             </td>
 39             <td>川川是狗狗
 40             </td>
 41             <td>川川是狗狗
 42             </td>
 43             <td>川川是狗狗
 44             </td>
 45             <td>川川是狗狗
 46             </td>
 47             <td>川川是狗狗
 48             </td>
 49         </tr>
 50          <tr>
 51             <td>川川是狗狗
 52             </td>
 53             <td>川川是狗狗
 54             </td>
 55             <td>川川是狗狗
 56             </td>
 57             <td>川川是狗狗
 58             </td>
 59             <td>川川是狗狗
 60             </td>
 61             <td>川川是狗狗
 62             </td>
 63         </tr>
 64          <tr>
 65             <td>川川是狗狗
 66             </td>
 67             <td>川川是狗狗
 68             </td>
 69             <td>川川是狗狗
 70             </td>
 71             <td>川川是狗狗
 72             </td>
 73             <td>川川是狗狗
 74             </td>
 75             <td>川川是狗狗
 76             </td>
 77         </tr>
 78          <tr>
 79             <td>川川是狗狗
 80             </td>
 81             <td>川川是狗狗
 82             </td>
 83             <td>川川是狗狗
 84             </td>
 85             <td>川川是狗狗
 86             </td>
 87             <td>川川是狗狗
 88             </td>
 89             <td>川川是狗狗
 90             </td>
 91         </tr>
 92          <tr>
 93             <td>川川是狗狗
 94             </td>
 95             <td>川川是狗狗
 96             </td>
 97             <td>川川是狗狗
 98             </td>
 99             <td>川川是狗狗
100             </td>
101             <td>川川是狗狗
102             </td>
103             <td>川川是狗狗
104             </td>
105         </tr>
106     </table>
107 </body>
108 </html>

练习:图片版评分控件

 

下面我们看下属性、表单过滤器

我们可以看着文档,边看边练。

甚至讲完之后,我们发现看着文档我们都能搞定.

   

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_23,第23张

                

七、查帮助看到七个属性过滤选择器

jQueryAPI_1.7.1_CN下载地址:

什么是属性过滤选择器呢?

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_24,第24张

八、属性过滤选择器

如果我们上面的代码中的dv中出现d[v,将来我们选择的时候也需要我们//给它转译一下。上面的写法没有具体的限定姓名的值到底等于什么?

现在我们只要姓名等于aa的。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_25,第25张

九、姓名等于aa

要是不等于aa的在等号前面加个非就行了。 !=

还有几个写法是以aa开头的,或者是以aa结尾的。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_26,第26张

十、选择不同位置的属性中的a

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_27,第27张

十一、选择多个属性

关于这个东西大家没有必要死记,每个版本不一样可能不一样,大家学JQuery还是要记住这个思路。就是写法,不要死记硬背。

在这里我们再把上回文章中提到的《锋利的JQuery》分享一下。

锋利的JQuery下载地址:

锋利的jQuery实例源码下载地址:

接下来还有个表单对象属性选择器,选择的是表单对象.

$("#form1 :enabled")选取id为form1的表单内所有启用的元素

$("#form1 :disabled")选取id为form1的表单内所有禁用的元素

$(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.

$("select :selected")选取所有选中的选项元素(下拉列表)

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_28,第28张

                     

十二、选取所有被禁用的元素

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_29,第29张

十三、选中下拉菜单

上面这四种写法当中在$("#form1 :enabled")有个空格,如果我把空格去掉,意义就不一样了。看看下面代码中的区别。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_30,第30张

十四、不加空格和加空格的区别

接下来我们给大家看这么个需求,大家做一下。

练习题题目代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7     p
 8     {
 9         width:200px;
10         height:100px;
11         border: 1px solid blue;
12     }
13     </style>
14 </head>
15 <body>
16     <input type="button" name="name" value="显示选中的checkbox的个数,以及选中项的value" />
17     <input type="checkbox" name="names" value="tom" />tom
18     <input type="checkbox" name="names" value="jim" />jim
19     <input type="checkbox" name="names" value="lily" />lily
20     <p id="msgNames">
21     </p>
22 </body>
23 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_33,第33张

十五、题目及提示

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_34,第34张

十六、练习代码

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_35,第35张

十七、练习题演示

接下来我们再看下表单选择器:

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_36,第36张

十八、表单选择器的几种写法

$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样, $("input")只获得<input>

$(":text")选取所有单行文本框,等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);

$(“:password”)选取所有密码框。

同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

代替了$(‘input[type=***]’);

再说下其他过滤器

可见性过滤器:

:hidden

选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)

1.表单元素type=“hidden”

2.设置css的display:none

3.高度和宽度明确设置为0的元素。

4.父元素是隐藏的,所以子元素也是隐藏的

visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本jQuery不太一样,1.3.2之前)

   

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_37,第37张

                  

十九、display:none和visibility:hidden区别

当然这些东西不是死的,最有效的知道改没改的方式就是查文档。

:visible

选取所有可见元素

注意:$(‘.cls :hidden’);与$(‘.cls:hidden’);是不一样的。

内容过滤器:

:contains(text),过滤出包含给定文本的元素。(innerText中包含。)

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_38,第38张

二十、包含选择器

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_39,第39张

 

二十一、包含选择器演示

:empty,过滤出所有不包含子元素或者文本的空元素。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_40,第40张

二十二、empty选择器

:has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_41,第41张

二十三、包含a标签的选择器

中间的参数是个选择器,//所有div中包含a标签的div.has(选择器)

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_42,第42张

二十四、包含a标签的选择器演示

:parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。)

 下面我们再说说子元素过滤器(*),这个理解起来还是有些小难度的。

:first-child,与:fisrt的区别,:first只能选取第一个,而:first-child,则能选取每个子元素的第一个元素。

   

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_43,第43张

                   

二十五、:first-child,与:fisrt的区别

$(‘ul li:first’);只返回一个li元素。

$(‘ul li:first-child’);//为每个父元素(ul)都返回一个li。

:last-child

:only-child,匹配当前父元素中只有一个子元素的元素。

:nth-child,对比eq()来理解,eq()值匹配一个,nth-child()为每个父元素都要匹配一个子元素。

:nth-child(index),index从1开始。

:nth-child(even)

:nth-child(odd)

:nth-child(3n),选取3的倍数的元素

:nth-child(3n+1),满足3的倍数+1的元素。

.children()方法,只考虑子元素,不考虑后代元素。

 

下面我们再说下jQuery的Dom操作

1、使用html()方法读取或者设置元素的innerHTML:

alert($("a:first").html());//innerHTML 

有参数表示设置值,没有参数表示获取值。本身JQuery可以链式编程,可以点第一个方法完后可以点第二个方法。这样写$(‘div’).html(‘dd’).css();没有问题,但是如果是取值$(‘div’).html().css();就不能点css了。返回的是字符串,字符串不是JQuery对象,就不能点css了。获取的时候百分之八九十就不能链式编程了。

$("a:first").html("hello");

2、使用text()方法读取或者设置元素的innerText:

alert($("a:first").text());

$("a:first").text("hello");

3、使用attr()方法读取或者设置元素的属性,对于jQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。

        alert($("a:first").attr("href"));

        $("a:first").attr("href", "http://www.rupeng.com");  

怎么让一个checkbox被选中。

document.getElementById(‘chk’).checked=true;

$(‘#chk’).arr(‘checked’,true);

attr({‘key’:’value’,’k’:’v’});    

4、使用removeAttr删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。attr(‘name’,’’)

//增加一个类

$(‘#chk’).attr(‘checked’,true);

$().attr(‘class’,’cls’);

//移除这个类

$().attr(‘class’,’’)

//彻底删除,连同元素的属性

$().removeAttr(‘class’);

 

接下来我们说下:动态创建Dom节点

dom里面动态创建元素:

var dvObj=document.createElement('<div></div>');×

var dvObj=document.createElement('div');√

//创建表格,创建行对象,解决兼容性问题

var trObj=tblObj.insertRow(-1);√

//创建单元格对象

var tdObj=trObj.insertCell(-1);√

 

在JQuery里面创建对象:加什么样的属性,直接在里面写。

var dvObj=$('<div style="border:1px solid red"></div>');

创建个文本框。

var txtObj=$('<input type="text" value="dddd"/>');

 

使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到Dom中:

//创建超链接:

$("<a href='http://www.baidu.com'>百度</a>");

        $("div:first").append(link);

$()创建的就是一个jQuery对象,可以完全进行操作

var link = $("<a href='http://www.baidu.com'>百度</a>");

link.text("百毒");

$(“div:first”).append(link);。

创建radio,使用$(‘<input name=“”/>’);,而不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。

append方法用来在元素的末尾追加元素(最后一个子节点)。

prepend,在元素的开始添加元素(第一个子节点)。

after,在元素之后添加元素(添加兄弟)

before:在元素之前添加元素(添加兄弟)

案例:jQuery动态创建表格。(动态加载网站列表,从json中取数据)

动态创建表格代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7 
 8         //2.在ready里面注册个点击事件
 9         $(function () {
10             $('#btn').click(function () {
11                 //3.动态创建表格
12                 var tblObj = $('<table border="1"></table>');
13                 //1.网站列表,希望把它创建在body里面。
14                 //1.1根据data中的数据创建表格中的行与列。
15                 var data = { "百度": "http://www.baidu.com", "新浪": "http://sina.com", "CSDN": "" };
16                 for (var key in data) {
17                     //                    //值data[key]
18                     //                    //创建一行
19                     //                    var trObj = $('<tr><td>' + key + '</td><td><a href="' + data[key] + '">' + key + '</a></td></tr>');
20                     //                    //加到表格里面
21                     //                    //tblObj.append(trObj);
22                     //                    //或者
23                     //                    trObj.appendTo(tblObj);
24                     //简化代码
25                     $('<tr><td>' + key + '</td><td><a href="' + data[key] + '">' + key + '</a></td></tr>').appendTo(tblObj);
26                 }
27                 //4.把动态创建的表格加到body中。获取body。
28                 $('body').append(tblObj);
29             });
30         });
31     </script>
32 </head>
33 <body>
34     <input type="button" name="name" value="动态创建网站列表" id="btn" />
35 </body>
36 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_46,第46张

二十六、动态创建表格演示

其他追加方法(将自己追加到某元素)

子元素.appendTo(父元素);//主动巴结!到最后一个

子元素.prependTo(父元素);//主动巴结到第一个。

(*)A.insertBefore(B);将A插入到B的前面,等同于B.before(A);

(*)X.insertAfter(Y);将X插入到Y的后面,等同于Y.after(X);

练习:无刷新评论。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_47,第47张

二十七、练习界面

做这道题得从给按钮注册单击事件开始。

无刷新评论代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //1.给按钮注册单击事件
10             $('#btn').click(function () {
11                 //2.获取用户输入的内容
12                 var nkName = $('#txtNickName').val();
13                 var content = $('#txtContent').val();
14                 var tblObj = $('#tblComment');
15                 //3.动态创建一行,把行加到这个表格里面。
16                 $('<tr><td>' + nkName + '</td><td>' + content + '</td></tr>').appendTo(tblObj);
17             });
18         });
19     </script>
20 </head>
21 <body>
22         <table id="tblComment" border="1">
23         <tr>
24             <td>
25                 毛毛:
26             </td>
27             <td>
28                 沙发哦。。。。。
29             </td>
30         </tr>
31     </table>
32     昵称:<input id="txtNickName" />
33     <br />
34     评论内容:
35     <textarea cols="10" rows="5" id="txtContent"></textarea>
36     <br />
37     <input type="button" name="name" value="评论" id="btn" />
38 </body>
39 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_50,第50张

二十八、无刷新评论演示

删除节点

emptys();

清空某元素下的所有子节点

内部实现:while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样。

remove(selector)

删除当前元素,返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下:

var lis = $("#ulSite li").remove();

$("#ulSite2").append(lis);

参数expr,是一个选择器,如果没有选择器,表示把选中的元素删掉,如果有选择器则表示在选中的元素中,再过滤出expr匹配的元素删除掉。

案例:清空ul中的项,代码见备注。$("ul li.testitem").remove(); 删除ul下li中有testitem样式的元素。               

权限选择:var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的:$(“#select1 option:selected”).appendTo($(“#select2”));//在jQuery1.4.1下不太一样。

(*)clone()克隆节点,只复制节点,没事件。clone(true)克隆节点带事件。添加到购物车案例,元素内容不变只是样式布局变了,简单。.clone().appendTo();

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_51,第51张

二十九、用DebugBar调试找出empty和remove的区别

IE-Debugbar下载地址:

remove里面可以传个参数,是个选择器

$(‘div’).remove(‘[class=c1]’);//删除应用了c1这个样式的div。

$(‘div’).remove(‘.c1’);

下面我们说下权限选择:

   

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_52,第52张

                   

三十、权限选择示例

先给按钮注册事件。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_53,第53张

三十一、权限选择演示

权限选择代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         //1.给四个按钮注册事件
 9         $(function () {
10             //2.把左边选中的option移动到右边
11             $('#btnr').click(function () {
12                 //3.拿到option,表示选择s1下所有被选中的option,不需要把s1里面的元素删掉
13                 //dom里面从一个节点到另外一个节点,自动脱离关系。
14                 $('#s1 option:selected').appendTo('#s2');
15             });
16             //4.把右边选中的option移动到左边
17             $('#btnl').click(function () {
18                 $('#s2 :selected').appendTo('#s1');
19             });
20 
21             //5.把左边全部的option移动到右边
22             $('#btnrl').click(function () {
23                 $('#s1 option').appendTo('#s2');
24             });
25 
26             //6.把右边的option全部移动到左边
27             $('#btnll').click(function () {
28                 $('#s2 option').appendTo('#s1');
29             });
30         });
31     </script>
32 </head>
33 <body>
34     <select id="s1" multiple="multiple" style="float: left; height: 95px; width: 35px;">
35         <option>添加</option>
36         <option>删除</option>
37         <option>修改</option>
38         <option>查询</option>
39         <option>打印</option>
40     </select>
41     <div style="float: left; width: 5%">
42         <input id="btnr" type="button" value=">" style="float: left; width: 100%" />
43         <input id="btnl" type="button" value="<" style="float: left; width: 100%" />
44         <input id="btnrl" type="button" value=">>" style="float: left; width: 100%" />
45         <input id="btnll" type="button" value="<<" style="float: left; width: 100%" />
46     </div>
47     <select id="s2" multiple="multiple" style="float: left; height: 95px; width: 35px;">
48     </select>
49 </body>
50 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_56,第56张

三十二、练习题目

下面我们看下加法计算器怎么做:

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_57,第57张

三十三、加法计算器演示

加法计算器代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         //1.给按钮注册个单击事件
 9         $(function () {
10             $('#btn1').click(function () {
11                 //2.获取前两个文本框的值,相加之后赋值给第三个文本框
12                 var v1 = $('#txt1').val();
13                 var v2 = $('#txt2').val();
14                 //这样相加不行,这是字符串相加var sum = v1 + v2;
15                 var sum = parseInt(v1) + parseInt(v2);
16                 //3.赋值给第三个文本框,直接用上面的封装好的就行了。
17                 $('#txt3').val(sum);
18                 //$('#txt3').attr('value', sum);
19             });
20         });
21     </script>
22 </head>
23 <body>
24     <input id="txt1"/>+<input id="txt2"/><input type="button" name="name" id="btn1" value="=" /><input id="txt3"/>
25 </body>
26 </html>

下面我们说下计时器的制作:

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_60,第60张

三十四、注册协议按钮演示

注册协议按钮代码:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         var sec = 5;
 9         //1.读秒
10         $(function () {
11             //2.声明个变量接收setInterval,启动计时器,每隔一秒钟执行代码。
12             var intervalId = setInterval(function () {
13                 sec--;
14                 if (sec > 0) {
15                     $('#btn').val('请仔细阅读协议(' + sec + ')');
16                 } else {
17                     //3.表示读秒已经到0,没必要再继续读秒了,设置按钮为可用装填
18                     //不能'false'这么写。非空字符串都是认为是true。
19                     $('#btn').val('同意').attr('disabled', false);
20                     //停止计时器
21                     clearInterval(intervalId);
22                 }
23             }, 1000);
24         });
25     </script>
26 </head>
27 <body>
28     <input type="button" name="name" value="请仔细阅读协议(5)" id="btn" disabled="disabled"/>
29 </body>
30 </html>

接下来我们写下案例1

这题跟focus没什么关系。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_63,第63张

三十五、失去焦点验证文本框是否为空演示

失去焦点验证文本框是否为空代码

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         //1.给文本框注册一个失去焦点事件
 9         $(function () {
10             //2.获取页面上所有的文本框
11             //$('input[type=text]');
12             $(':text').blur(function () {
13             //3.如果文本框为空
14                 if ($(this).val().length == 0) {
15                     $(this).css('backgroundColor', 'red');
16                 } else {
17                     $(this).css('backgroundColor','white');
18                 }
19             });
20         });
21     </script>
22 </head>
23 <body>
24     <input type="text" name="name" value="" />
25     <input />
26     <input /><input /><input /><input /><input /><input />
27     <input />
28 </body>
29 </html>

接下来我们再说球队列表选择:

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_66,第66张

三十六、球队列表演示

球队列表代码:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         //1.给 li注册 mouseover事件
 9         $(function () {
10             $('#u1 li').mouseover(function () {
11                 //2.让自己的背景色变红,让其它变白
12                 $(this).css('backgroundColor', 'red').siblings().css('backgroundColor','');
13                 //3.再为每个li,注册一个点击事件
14             }).click(function () {
15                 //4.在移动之前,去掉样式和事件
16                 $(this).removeAttr('style').unbind().appendTo('#u2');
17             });
18         });
19     </script>
20 </head>
21 <body>
22     <ul id="u1">
23         <li>公牛</li>
24         <li>小牛</li>
25         <li>快船</li>
26         <li>森林狼</li>
27     </ul>
28     <ul id="u2">
29     </ul>
30 </body>
31 </html>

留个练习题,刚才是点谁把它移动下来,现在是点谁再给移回去。移回去之后,样式依然在。

下面我们介绍下节点替换:

替换节点:

$("br").replaceWith("<hr/>");

用<hr/>替换br

$(‘<br/>’).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。

用<br/>元素替换所有的hr

红色为选择器;蓝色为要替换的内容(动态创建的元素)。

节点替换代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //1.给按钮注册个单击事件
10             $('#btn').click(function () {
11                 //2.找到页面上所有的br用hr来替换。写法1
12                 //$('br').replaceWith('<hr/>');
13                 //写法2,用<hr/>标签,替换页面上的所有的$('br')选择器,选到的元素。
14                 $('<hr/>').replaceAll('br');
15             });
16         });
17     </script>
18 </head>
19 <body>
20     <input type="button" name="name" value="把br替换为水平线" id="btn"/>
21     <br />
22     AAAAAAAAAAAAAAAA<br/>
23     AAAAAAAAAAAAAAAA<br/>
24     AAAAAAAAAAAAAAAA<br/>
25     AAAAAAAAAAAAAAAA<br/>
26     AAAAAAAAAAAAAAAA<br/>
27     AAAAAAAAAAAAAAAA<br/>
28     AAAAAAAAAAAAAAAA<br/>
29 </body>
30 </html>

    

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_71,第71张

                  

三十七、节点替换演示

我们再说下:包裹节点

wrap()方法用来将所有元素逐个用指定标签包裹:【wrapAll()】

$(“b”).wrap(“<font color=‘red’></font>”) 将所有粗体字红色显示

结果:<font color=‘red’><b></b></font>

wrapInner()//在内部围绕

包裹节点代码插入位置

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //1.给按钮注册单击事件
10             $('#btn').click(function () {
11                 //2.选取页面上所有的p,给它包裹一下子。
12                 //$('p').wrap('<font color="red" size="7"></font>');
13                 //页面上有几十个p就有几十个font标签,我们用另外一种办法
14                 //把所有的p都给包起来了。在p里面有div或是input的时候,是把非p元素踢出来进行包裹。
15                 //$('p').wrapAll('<font color="red"></font>');
16                 //包在p的里面
17                 $('p').wrapInner('<font color="red" size="7"></font>');
18             });
19         });
20     </script>
21 </head>
22 <body>
23     <input type="button" name="name" value="点击让p变红" id="btn"/>
24     <p>
25     举头望明月
26     </p>
27     <p>
28     低头思故乡
29     </p>
30 </body>
31 </html>

接下来咱们再说下:样式操作

获取样式 attr("class"),设置样式attr("class","myclass"),追加样式addClass("myclass")(不影响其他样式),移除样式removeClass("myclass"),切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),判断是否存在样式:hasClass("myclass")

上面这些我们之前说过。attr("class")和addClass的区别是:addClass,div已经用了class1了,再class2,这个时候这两个类样式,同时会被应用。attr是替换。

案例:网页开关灯的效果

练习:给body设置body{ filter:Gray; } 这个style就可以让网页变为黑白显示,做切换黑白效果的按钮。汶川地震的时候,各大网站就是用的这个。但是是在IE下面,换个火狐的话,照样。

 

点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景。监听每个tr的click事件,将点击的背景设置为黄色,其他的设置为白色背景。颜色定义为class样式。(使用类样式来做)

练习:聚焦控件的高亮显示。颜色定义为class样式。 $(“body *”),选择器*表示所有类型的控件。获得焦点的元素背景色为黄色。

给所有的标签都要注册事件,

聚焦控件的高亮显示代码:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //1.给按钮注册单击事件
10             $('#btn').click(function () {
11                 //2.选取页面上所有的p,给它包裹一下子。
12                 //$('p').wrap('<font color="red" size="7"></font>');
13                 //页面上有几十个p就有几十个font标签,我们用另外一种办法
14                 //把所有的p都给包起来了。在p里面有div或是input的时候,是把非p元素踢出来进行包裹。
15                 //$('p').wrapAll('<font color="red"></font>');
16                 //包在p的里面
17                 $('p').wrapInner('<font color="red" size="7"></font>');
18             });
19 
20             //选取body下的所有的元素,获得焦点变黄
21             $('body *').focus(function () {
22                 $(this).css('backgroundColor', 'yellow');
23                 //失去焦点背景色再变回来
24             }).blur(function () {
25                 $(this).css('backgroundColor', '');
26             });
27         });
28     </script>
29 </head>
30 <body>
31     <input type="text" name="name" value=" " />
32     <input type="button" name="name" value=" " />
33     <input type="checkbox" name="name" value=" " />
34     <input type="radio" name="name" value=" " />
35     <input type="password" name="name" value=" " />
36     <input type="file" name="name" value=" " />
37     <textarea>content</textarea>
38     <input type="button" name="name" value="点击让p变红" id="btn"/>
39     <p>
40     举头望明月
41     </p>
42     <p>
43     低头思故乡
44     </p>
45 </body>
46 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_76,第76张

三十八、聚焦控件的高亮显示演示

JQuery也做了一部分的css兼容。

比如设置层的透明度,IE跟火狐不一样。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_css_77,第77张

三十九、JQuery帮我们解决css兼容性问题

设置层的透明度代码:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //1.给按钮注册单击事件
10             $('#btn').click(function () {
11                 //2.选取页面上所有的p,给它包裹一下子。
12                 //$('p').wrap('<font color="red" size="7"></font>');
13                 //页面上有几十个p就有几十个font标签,我们用另外一种办法
14                 //把所有的p都给包起来了。在p里面有div或是input的时候,是把非p元素踢出来进行包裹。
15                 //$('p').wrapAll('<font color="red"></font>');
16                 //包在p的里面
17                 $('p').wrapInner('<font color="red" size="7"></font>');
18             });
19 
20             //选取body下的所有的元素,获得焦点变黄
21             $('body *').focus(function () {
22                 $(this).css('backgroundColor', 'yellow');
23                 //失去焦点背景色再变回来
24             }).blur(function () {
25                 $(this).css('backgroundColor', '');
26             });
27             //给按钮2注册个单击事件
28             $('#btn2').click(function () {
29             //设置透明度
30                 $('#dv1').css('opacity','0.3');
31             });
32         });
33     </script>
34 </head>
35 <body>
36     <input type="button" name="name" value="设置透明度" id="btn2" />
37     <div id="dv1" style="background:red; width:200px; height:200px">
38     </div>
39     <input type="text" name="name" value=" " />
40     <input type="button" name="name" value=" " />
41     <input type="checkbox" name="name" value=" " />
42     <input type="radio" name="name" value=" " />
43     <input type="password" name="name" value=" " />
44     <input type="file" name="name" value=" " />
45     <textarea>content</textarea>
46     <input type="button" name="name" value="点击让p变红" id="btn"/>
47     <p>
48     举头望明月
49     </p>
50     <p>
51     低头思故乡
52     </p>
53 </body>
54 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_80,第80张

四十、设置层的透明度演示

练习:搜索框效果。焦点放入控件,如果文本框中的值是“请输入关键词”,那么将文本清空,并且颜色设置为黑色。如果焦点离开控件,如果文本框中是空值,那么将文本框填充为“请输入关键词”,颜色设置为灰色(Gray)。颜色定义为class样式。

 

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_81,第81张

四十一、搜索框效果演示

搜索框效果代码

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         //1.给文本框注册一个获取焦点事件
 9         $(function () {
10             $('#txtSearch').focus(function () {
11                 //2.判断文本框中的内容
12                 if ($.trim($(this).val()) == '请输入关键词') {
13                     $(this).val('').removeClass('df');
14                 }
15                 //3.再注册个失去焦点事件
16             }).blur(function () {
17                 if ($.trim($(this).val()).length == 0) {
18                     $(this).val('请输入关键词').addClass('df');
19                 }
20             });
21         });
22     </script>
23     <style type="text/css">
24         .df
25         {
26             color:Gray;
27         }
28     </style>
29 </head>
30 <body>
31     请输入搜索关键词:<input id="txtSearch" value="请输入关键词"  class="df" />
32 </body>
33 </html>

接下来我们说下RadioButton的选中问题:

我们怎么获取checkbox的每一个选中项,val能不能获取每个checkbox每一个选中项。得遍历放在数组里面做的,通过val只能获取第一个选中的值。RadioButton也是这样的。

radio-checkb-elect设置选中项代码:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //1.给按钮注册个单击事件
10             $('#btn').click(function () {
11                 //2.获取页面上所有的被选中的radio
12                 //var vv = $(':radio:checked').val();
13                 //alert(vv);
14                 //想循环获取每一个得循环
15                 $(':radio:checked').each(function () {
16                     alert($(this).val());
17                 });
18             });
19             $('#btn2').click(function () {
20                 //让女被选中
21                 //$(':radio[value=f]').attr('checked',true);
22                 //或者我们可以这么做,特别注意:无论设定几个按钮被选中,都要用数组来写。
23                 //同时让f和o被选中
24                 $(':radio').val(['f','o']);
25             });
26         });
27     </script>
28 </head>
29 <body>
30     <input type="button" name="name" value="设置某项radio被选中" id="btn2" />
31     <input type="button" name="name" value="点击获取选中radio的值" id="btn"/>
32     <fieldset>
33         <legend>选择性别</legend>
34             <input type="radio" name="gender" value="f" />female
35             <input type="radio" name="gender" value="m" />male  
36             <input type="radio" name="gender" value="s" />secret 
37     </fieldset>
38     <fieldset>
39         <legend>选择血型</legend>
40         <input type="radio" name="blood" value="a" />a
41         <input type="radio" name="blood" value="b" />b
42         <input type="radio" name="blood" value="ab" />ab
43         <input type="radio" name="blood" value="o" />o
44     </fieldset>
45 </body>
46 </html>

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_javascript_86,第86张

radio-checkb-elect设置选中项演示

练习:CheckBox的全选、全不选、反选

CheckBox的全选、全不选、反选代码插入位置:

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_jquery i18n例子_04,第4张

jquery i18n例子 jquery教程实例,jquery i18n例子 jquery教程实例_html_05,第5张

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $('#chkAll').click(function () {
10                 //1.找div下的所有的checkbox需要加个空格
11                 //$('div :checkbox').val(['a','b','c','d','e']);
12                 //换种方法写
13                 $('div :checkbox').attr('checked', true);
14             });
15             //2.全不选
16             $('#chkNon').click(function () {
17                 $('div :checkbox').attr('checked', false);
18             });
19             //3.反选
20             $('#chkReverse').click(function () {
21                 //需要遍历一下
22                 $('div :checkbox').each(function () {
23                     $(this).attr('checked',!$(this).attr('checked'));
24                 });
25             });
26         });
27     </script>
28 </head>
29 <body>
30     <div>
31         <input type="checkbox" name="name" value="a" />a
32         <input type="checkbox" name="name" value="b" />b
33         <input type="checkbox" name="name" value="c" />c
34         <input type="checkbox" name="name" value="d" />d
35         <input type="checkbox" name="name" value="e" />e
36     </div>
37     <input type="button" name="name" value="全选" id="chkAll" />
38     <input type="button" name="name" value="全不选" id="chkNon"/>
39     <input type="button" name="name" value="反选" id="chkReverse" />
40 </body>
41 </html>


https://www.xamrdz.com/web/2ep1960245.html

相关文章: