jQuery

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段