首页 > 代码库 > jQuery

jQuery

2024-08-24 11:11:03   223人阅读

1.什么是jQuery

　　jQuery是一个 JavaScript/Dom/Bom 库。

　　jQuery 极大地简化了 JavaScript 编程。

　　jQuery 很容易学习。

2.jQuery对象与Dom对象的转换

1 jquery对象[0]   => Dom对象
2 Dom对象         => $(Dom对象)

3.查找元素

3.1 选择器

基本选择器，直接找到某个或者某类标签：

1. id选择器      $(‘#id‘)

2. class选择器   $(".c1")
          
3. 标签选择器     $(‘a‘)  
      
4. 组合选择器     $(‘a,.c2,#i10‘)    

5. 层级选择器  
                $(‘#i10 a‘) 表示id为i10下面的所有a标签
                $(‘#i10>a‘) i10 下面的所有孩子

基本筛选器：

$(n:first)   n中的第一个标签
$(n:last)   n中的最后一个标签
$(n:eq(i))  n中索引为i的标签

:first示例：

 1 HTML 代码:
 2 <ul>
 3     <li>list item 1</li>
 4     <li>list item 2</li>
 5     <li>list item 3</li>
 6     <li>list item 4</li>
 7     <li>list item 5</li>
 8 </ul>
 9 jQuery 代码:
10 $(‘li:first‘);
11 结果:
12 [ <li>list item 1</li> ]

：eq()示例：

 1 HTML 代码:
 2 <table>
 3   <tr><td>Header 1</td></tr>
 4   <tr><td>Value 1</td></tr>
 5   <tr><td>Value 2</td></tr>
 6 </table>
 7 jQuery 代码:
 8 $("tr:eq(1)")
 9 结果:
10 [ <tr><td>Value 1</td></tr> ]

属性选择器：

 1 $(‘[alex]‘)        具有alex属性的所有标签
 2 $(‘[alex="123"]‘)   alex属性等于123的标签
 3 
 4 示例：
 5 <input type=‘text‘/>
 6 <input type=‘text‘/>
 7 <input type=‘file‘/>
 8 <input type=‘password‘/>
 9 
10 $("input[type=‘text‘]")  input下的type=‘text’的标签
11 $(‘:text‘)               表单专用的选择器，很快捷

 

CheckBox全选反选示例（注意引入jQuery）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div>
 9         <input id="i1" type="button" value="全选" />
10         <input id="i2" type="button" value="取消"  />
11         <input id="i3" type="button" value="反选"  />
12         <table border="1">
13             <thead>
14                 <tr>
15                     <th>选择</th>
16                     <th>主机名</th>
17                     <th>端口</th>
18                 </tr>
19             </thead>
20             <tbody id="tb">
21                 <tr>
22                     <td><input type="checkbox"></td>
23                     <td>1.1.1.1</td>
24                     <td>80</td>
25                 </tr>
26                 <tr>
27                     <td><input type="checkbox"></td>
28                     <td>1.1.1.2</td>
29                     <td>80</td>
30                 </tr>
31                 <tr>
32                     <td><input type="checkbox"></td>
33                     <td>1.1.1.3</td>
34                     <td>80</td>
35                 </tr>
36             </tbody>
37         </table>
38     </div>
39     <script src="jquery-1.12.4.js"></script>
40     <script>
41         $(‘#i1‘).click(function () {
42             $(‘#tb input:checkbox‘).prop(‘checked‘,true);
43         });
44         $(‘#i2‘).click(function () {
45             $(‘#tb input:checkbox‘).prop(‘checked‘,false);
46         });
47         $(‘#i3‘).click(function () {
48             $(‘#tb input:checkbox‘).each(function () {
49                 var v = $(this).prop(‘checked‘)?false:true;
50                 $(this).prop(‘checked‘,v);
51             });
52         });
53 
54     </script>
55 </body>
56 </html>

 

 

标签高度获取：

1 $(‘#i1‘).height();            //获取当前标签的高度；
2 $(‘#i1‘).innerHeight() ;      //获取自身高度+padding；
3 $(‘#i1‘).outerHeight();       //参数：false--> 获取自身高度 + padding + border(默认false)；
4 $(‘#i1‘).outerHeight(true);   //参数：true---> 获取自身高度 + padding + border + margin。

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             margin-top: 90px;
 9             height: 300px;
10             width: 400px;
11             border: 2px solid red;
12             padding-top: 20px;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="i1"></div>
18     <script src="jquery-1.12.4.js"></script>
19     <script>
20         var v1 = $(‘#i1‘).height();            //获取当前标签的高度
21         var v2 = $(‘#i1‘).innerHeight() ;      //获取自身高度+padding；
22         var v3 = $(‘#i1‘).outerHeight();       //参数：false--> 获取自身高度 + padding + border(默认false)；
23         var v4 = $(‘#i1‘).outerHeight(true);   //参数：true---> 获取自身高度 + padding + border + margin；
24         console.log(v1);         // 299.8
25         console.log(v2);         // 319.8
26         console.log(v3);         // 323
27         console.log(v4);         // 413
28     </script>
29 </body>
30 </html>

 

jQuery


联系
我们