limuma

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

一、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编辑  收藏  举报