jQuery01

2018-02-21 19:27:38来源:cnblogs.com作者: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:

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

<!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                 11143             </div>44         </div>45         46         <div id="two">47             <div class="mini">48                 22249             </div>50             <div class="mini">51                 33352             </div>53         </div>54         55         <div id="three">56             <div class="mini">57                 44458             </div>59             <div class="mini">60                 55561             </div>62             <div class="mini">63                 66664             </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                 11140             </div>41         </div>42         43         <div id="two">44             <div class="mini">45                 22246             </div>47             <div class="mini">48                 33349             </div>50         </div>51         52         <div id="three">53             <div class="mini">54                 44455             </div>56             <div class="mini">57                 55558             </div>59             <div class="mini">60                 66661             </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                 11140             </div>41         </div>42         43         <div id="two">44             <div class="mini">45                 22246             </div>47             <div class="mini">48                 33349             </div>50         </div>51         52         <div id="three">53             <div class="mini">54                 44455             </div>56             <div class="mini">57                 55558             </div>59             <div class="mini">60                 66661             </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                 11131             </div>32         </div>33         34         <div id="two">35             <div class="mini">36                 22237             </div>38             <div class="mini">39                 33340             </div>41         </div>42         43         <div id="three">44             <div class="mini">45                 44446             </div>47             <div class="mini">48                 55549             </div>50             <div class="mini">51                 66652             </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>
全选和全不选

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台