limuma

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

一、jQuery简介（write less，do more）

　　1、jQuery概念

　　jQuery是一个轻量级（严格意义上说，不能称为一个框架）的js库，辅助js开发，兼容css，多浏览器，jQuery2.0及之后的版本不再支持IE6/7/8，能够使用户更加方便的处理HTML、events、实现动画效果，并且方便的为网站提供AJAX交互；最大的优势是：说明文档很全，各种应用说明的十分详细，还有许多成熟的js插件可供选择。

　　使用了jQuery之后，就不需要在HTML里边插入大量的js代码，只需要定义一个id即可（有些时候不需要）；

　　2、jQuery版本

　　jquery-1.8.3.js：体积大，适合学习使用；jquery-1.8.3.min.js：，压缩版，体积小，适合开发使用；（1.8.3是目前使用较多的版本）

二、jQuery的引入和对象获取

　　1、jQuery既然是一个js库，使用前就要先引入：<script type="text/javascript" src="xxx/jquery-1.8.3.js"></script>;

　　　　/*知识点*/：传统的js页面加载（onload）和jQuery页面加载的区别：

　　　　a、传统的js页面加载（onload）只能写一次，多次书写会存在后面覆盖前面的现象，且jQuery的页面加载比js快；

　　　　b、jQuery加载会在整个dom树结构绘制完成之后进行加载，而js是在整个页面加载完成之后再加载；

　　　　c、jQuery多次书写不存在覆盖的问题，多次加载的话，从上往下顺序执行，如下（包含了几种jQuery的书写规范）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>JS与JQ页面加载区别</title>
 6         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 7         <script>
 8             window.onload = function(){
 9                 alert("张三");
10             }
11             
12             //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
13             window.onload = function(){
14                 alert("老王");
15             }
16             
17             //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
18             jQuery(document).ready(function(){
19                 alert("李四");
20             });
21             
22             //JQ不存在覆盖问题，加载的时候是顺序执行
23             $(document).ready(function(){
24                 alert("王五");
25             });
26             
27             //简写方式
28             $(function(){
29                 alert("汾九");
30             });
31             
32         </script>
33     </head>
34     <body>
35     </body>
36 </html>

　　2、jQuery获取对象

　　(1)语法：var  a  =  $("#id名")；（括号里边实际上放的是选择器，这里写的是id选择器（常用的），也可以使用别的，如：$("p")，指的是p标签选择器）；

　　　　例如：$("#id名").click(function(){ alert("dadada"); })；

　　　　注：a、DOM对象（js）无法操作JQ对象里面属性和方法；JQ对象也无法操作JS里面的属性和方法； 

　　　　　　b、var  b  =  document.getElementById("span1")；其中a是jQuery对象，b是dom对象，两者不同，属性不能混着使用，但是两个对象可以转换；

　　(2)两种对象之间的转换：

　　　　jQuery对象向dom对象的转换(转换后可以使用dom的属性innerHTML)的两种方法：

　　　　　　a、$("#span1").get(0).innerHTML="美美哒！"; 

　　　　　　b、$("#span1").[0].innerHTML="美美哒！"; 

　　　　dom对象向jQuery对象的转换：

　　　　　　var  b  =  document.getElementById("span1")；——>${b}.html="美美哒";　

　　　　　　注：转换为jQuery对象之后，html可以换位css（即：可以使用jQuery的属性）：

　　　　　　　　比如：$("tbody tr:even").css("background-color","yellow");

　　（3）在实际开发中，var  opEle= xxx；opEle是一个js变量，var  $opEle= xxx；$opEle指的是jQuery变量；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dom与JQ对象之间的转换</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            function write1(){
                //1.JS的DOM操作
                //document.getElementById("span1").innerHTML="萌萌哒！";
                //DOM对象无法操作JQ对象里面属性和方法
                //document.getElementById("span1").html("萌萌哒！");
                
                var spanEle = document.getElementById("span1");
                
                //将DOM对象转换成JQ对象
                $(spanEle).html("思密达");
            }
       
            $(function(){
                $("#btn").click(function(){
                    //JQ对象无法操作JS里面的属性和方法！！！
                    //$("#span1").innerHTML="呵呵哒！"，innerHTML是js的属性
　　　　　　　　　　　　 $("#span1").html("呵呵哒！");//这里只能用html
　　　　　　　　　　　　//JQ对象向DOM对象转换方式一 
　　　　　　　　　　　　$("#span1").get(0).innerHTML="美美哒！"; 
　　
　　　　　　　　　　　　//JQ对象向DOM对象转换方式二 
　　　　　　　　　　　　$("#span1")[0].innerHTML="棒棒哒！"; 
　　　　　　　　　　}); 
　　　　　　　}); 

　　　　</script> 
</head> 
　　<body> 
　　　　　<input type="button" value="JS写入" onclick="write1()"/> 
　　　　　<input type="button" value="JQ写入" id="btn"/><br /> 
　　　　　班长：<span id="span1">你好帅！</span> 
</body>
</html>

三、jQuery的方法介绍（具体见jQuery手册，这些方法不要求掌握（原因是效果太low））

1、效果类方法

　　show（）：显示隐藏的图片等；hide（）：隐藏图片等；

　　slideDown（）/slideUp（）；fadeIn（）/fadeOut（）；

　　掌握一种方法：toggle（）：显示/隐藏标签，写一个小代码介绍一下：

　　当然toggle（switch）参数可为true：显示；false：隐藏；可以用表达式代表true或者false；

1 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
2         <script>
3             $(function(){
4                 $("#btn").click(function(){
5                     $("#img1").toggle();
6                 });
7             });
8         </script>

四、jQuery的选择器

　1、基本选择器：#id（id选择器）、element（标签选择器）、.class（类选择器）、*（通用选择器）、（selector1，selector2，selectorN）（群组选择器）；

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>基本选择器</title>
 6         <link rel="stylesheet" href="../../css/style.css" />
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             $(function(){
10                 $("#btn1").click(function(){
11                     $("#one").css("background-color","pink");
12                 });
13                 
14                 $("#btn2").click(function(){
15                     $(".mini").css("background-color","pink");
16                 });
17                 
18                 $("#btn3").click(function(){
19                     $("div").css("background-color","pink");
20                 });
21                 
22                 $("#btn4").click(function(){
23                     $("*").css("background-color","pink");
24                 });
25                 
26                 $("#btn5").click(function(){
27                     $("#two,.mini").css("background-color","pink");
28                 });
29             });
30         </script>
31             
32     </head>
33     <body>
34         <input type="button" id="btn1" value="选择为one的元素"/>
35         <input type="button" id="btn2" value="选择样式为mini的元素"/>
36         <input type="button" id="btn3" value="选择所有的div元素"/>
37         <input type="button" id="btn4" value="选择所有元素"/>
38         <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
39         <hr/>
40         <div id="one">
41             <div class="mini">
42                 111
43             </div>
44         </div>
45         
46         <div id="two">
47             <div class="mini">
48                 222
49             </div>
50             <div class="mini">
51                 333
52             </div>
53         </div>
54         
55         <div id="three">
56             <div class="mini">
57                 444
58             </div>
59             <div class="mini">
60                 555
61             </div>
62             <div class="mini">
63                 666
64             </div>
65         </div>
66         
67         <span id="four">
68             
69         </span>
70     </body>
71 </html>
基本选择器

　2、层级选择器：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>层级选择器</title>
 6         <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script type="text/javascript">
 9             $(function(){
10                 $("#btn1").click(function(){
11                     $("body div").css("background-color","gold");
12                 });
13                 
14                 $("#btn2").click(function(){
15                     $("body>div").css("background-color","gold");
16                 });
17                 
18                 $("#btn3").click(function(){
19                     $("#two+div").css("background-color","gold");
20                 });
21                 
22                 $("#btn4").click(function(){
23                     $("#one~div").css("background-color","gold");
24                 });
25             });
26         </script>
27         
28         
29     </head>
30     <body>
31         <input type="button" id="btn1" value="选择body中的所有的div元素"/>
32         <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
33         <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
34         <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
35         
36         <hr/>
37         <div id="one">
38             <div class="mini">
39                 111
40             </div>
41         </div>
42         
43         <div id="two">
44             <div class="mini">
45                 222
46             </div>
47             <div class="mini">
48                 333
49             </div>
50         </div>
51         
52         <div id="three">
53             <div class="mini">
54                 444
55             </div>
56             <div class="mini">
57                 555
58             </div>
59             <div class="mini">
60                 666
61             </div>
62         </div>
63         
64         <span id="four">
65             
66         </span>
67     </body>
68 </html>
层级选择器

　3、基本过滤选择器：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>层级选择器</title>
 6         <link rel="stylesheet" href="../../css/style.css" type="text/css"/>
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             $(function(){
10                 $("#btn1").click(function(){
11                     $("body div:first").css("background-color","red");
12                 });
13                 
14                 $("#btn2").click(function(){
15                     $("body div:last").css("background-color","red");
16                 });
17                 
18                 $("#btn3").click(function(){
19                     $("body div:odd").css("background-color","red");
20                 });
21                 
22                 $("#btn4").click(function(){
23                     $("body div:even").css("background-color","red");
24                 });
25             });
26         </script>
27         
28         
29     </head>
30     <body>
31         <input type="button" id="btn1" value="body中的第一个div元素"/>
32         <input type="button" id="btn2" value="body中的最后一个div元素"/>
33         <input type="button" id="btn3" value="选择body中的奇数的div"/>
34         <input type="button" id="btn4" value="选择body中的偶数的div"/>
35         
36         <hr/>
37         <div id="one">
38             <div class="mini">
39                 111
40             </div>
41         </div>
42         
43         <div id="two">
44             <div class="mini">
45                 222
46             </div>
47             <div class="mini">
48                 333
49             </div>
50         </div>
51         
52         <div id="three">
53             <div class="mini">
54                 444
55             </div>
56             <div class="mini">
57                 555
58             </div>
59             <div class="mini">
60                 666
61             </div>
62         </div>
63         
64         <span id="four">
65             
66         </span>
67     </body>
68 </html>
基本过滤选择器

　4、属性选择器：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>层级选择器</title>
 6         <link rel="stylesheet" href="../../css/style.css" />
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             $(function(){
10                 $("#btn1").click(function(){
11                     $("div[id]").css("background-color","red");
12                 });
13                 
14                 $("#btn2").click(function(){
15                     $("div[id='two']").css("background-color","red");
16                 });
17                 
18             });
19         </script>
20         
21         
22     </head>
23     <body>
24         <input type="button" id="btn1" value="选择有id属性的div"/>
25         <input type="button" id="btn2" value="选择有id属性的值为two的div"/>
26         
27         <hr/>
28         <div id="one">
29             <div class="mini">
30                 111
31             </div>
32         </div>
33         
34         <div id="two">
35             <div class="mini">
36                 222
37             </div>
38             <div class="mini">
39                 333
40             </div>
41         </div>
42         
43         <div id="three">
44             <div class="mini">
45                 444
46             </div>
47             <div class="mini">
48                 555
49             </div>
50             <div class="mini">
51                 666
52             </div>
53         </div>
54         
55         <span id="four">
56             
57         </span>
58     </body>
59 </html>
属性选择器

　5、表单选择器：

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title>表单选择器</title>
 5         <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
 6         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 7         <script>
 8             $(function(){
 9                 $("#btn1").click(function(){
10                     $(":input").css("background-color","pink");
11                 });
12                 $("#btn2").click(function(){
13                     $(":text").css("background-color","pink");
14                 });
15             });
16         </script>
17     </head>
18     <body>
19         <input type="button" id="btn1" value="选择所有input元素" />
20         <input type="button" id="btn2" value="选择文本框" />
21         <br/>
22         <form>
23             <input type="text" /><br />
24             <input type="checkbox" /><br />
25             <input type="radio" /><br />
26             <input type="image" /><br />
27             <input type="file" /><br />
28             <input type="submit" />
29             <input type="reset" /><br />
30             <input type="password" /><br />
31             <input type="button" /><br />
32             <select><option/></select><br />
33             <textarea></textarea><br />
34             <button></button>
35         </form>
36     </body>
37 </html>
表单选择器

五、jQuery案例

1、隔行换色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>使用jQuery完成表格隔行换色</title>
 6         <link rel="stylesheet" href="../css/style.css" />
 7         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             //1.页面加载
10             $(function(){
11                 /*//2.获取tbody下面的偶数行并设置背景颜色
12                 $("tbody tr:even").css("background-color","yellow");
13                 //3.获取tbody下面的奇数行并设置背景颜色
14                 $("tbody tr:odd").css("background-color","green");*/
15                 
16                 //2.获取tbody下面的偶数行并设置背景颜色
17                 $("tbody tr:even").addClass("even");
18                 $("tbody tr:even").removeClass("even");
19                 //3.获取tbody下面的奇数行并设置背景颜色
20                 $("tbody tr:odd").addClass("odd");
21             });
22         </script>
23         
24     </head>
25     <body>
26         <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
27             <thead>
28                 <tr>
29                     <th>编号</th>
30                     <th>姓名</th>
31                     <th>年龄</th>
32                 </tr>
33             </thead>
34             <tbody>
35                 <tr >
36                     <td>1</td>
37                     <td>张三</td>
38                     <td>22</td>
39                 </tr>
40                 <tr >
41                     <td>2</td>
42                     <td>李四</td>
43                     <td>25</td>
44                 </tr>
45                 <tr >
46                     <td>3</td>
47                     <td>王五</td>
48                     <td>27</td>
49                 </tr>
50                 <tr >
51                     <td>4</td>
52                     <td>赵六</td>
53                     <td>29</td>
54                 </tr>
55                 <tr >
56                     <td>5</td>
57                     <td>田七</td>
58                     <td>30</td>
59                 </tr>
60                 <tr >
61                     <td>6</td>
62                     <td>汾九</td>
63                     <td>20</td>
64                 </tr>
65             </tbody>
66         </table>
67     </body>
68 </html>
隔行换色

2、全选和全不选

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>使用jQuery完成复选框的全选和全不选</title>
 6         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 7         <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
 8         <script>
 9             $(function(){
10                 $("#select").click(function(){
11                     //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
12                     //attr方法与JQ的版本有关，在1.8.3及以下有效。
13                     //$("tbody input").attr("checked",this.checked);
14                     $("tbody input").prop("checked",this.checked);
15                 });//prop（）方法适用于高版本和低版本
16             });
17         </script>
18         
19     </head>
20     <body>
21         <table border="1" width="500" height="50" align="center" id="tbl" >
22             <thead>
23                 <tr>
24                     <td colspan="4">
25                         <input type="button" value="添加" />
26                         <input type="button" value="删除" />
27                     </td>
28                 </tr>
29                 <tr>
30                     <th><input type="checkbox" id="select"></th>
31                     <th>编号</th>
32                     <th>姓名</th>
33                     <th>年龄</th>
34                 </tr>
35             </thead>
36             <tbody>
37                 <tr >
38                     <td><input type="checkbox" class="selectOne"/></td>
39                     <td>1</td>
40                     <td>张三</td>
41                     <td>22</td>
42                 </tr>
43                 <tr >
44                     <td><input type="checkbox" class="selectOne"/></td>
45                     <td>2</td>
46                     <td>李四</td>
47                     <td>25</td>
48                 </tr>
49                 <tr >
50                     <td><input type="checkbox" class="selectOne"/></td>
51                     <td>3</td>
52                     <td>王五</td>
53                     <td>27</td>
54                 </tr>
55                 <tr >
56                     <td><input type="checkbox" class="selectOne"/></td>
57                     <td>4</td>
58                     <td>赵六</td>
59                     <td>29</td>
60                 </tr>
61                 <tr >
62                     <td><input type="checkbox" class="selectOne"/></td>
63                     <td>5</td>
64                     <td>田七</td>
65                     <td>30</td>
66                 </tr>
67                 <tr >
68                     <td><input type="checkbox" class="selectOne"/></td>
69                     <td>6</td>
70                     <td>汾九</td>
71                     <td>20</td>
72                 </tr>
73             </tbody>
74         </table>
75     </body>
76 </html>
全选和全不选

 

posted on 2018-02-20 16:07  limuma  阅读(268)  评论(0)  编辑  收藏  举报