1、jQuery概述

jQuery是一款优秀的额javascript的轻量级框架之一，封装了dom操作，事件绑定，Ajax等功能
框架（Framework）：是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现

2、jQuery基础语法

jQuery本质上是javascript，所以引入方法和javascript一样
jq和js的区别：
1、jQuery虽然本质上也是js，但要使用jQuery的属性和方法必须保证对象是jQuery对象
2、通过js获取的对象时js对象，通过jQuery获取的对象时jQuery对象
jq与js的转换：

  1. js转jq：
  2.         ${js对象}
  3. jq转js：
  4.         jq对象[索引]
  5.         jq对象.get(索引)

jq与js页面加载区别：

  1. js：
  2.       window.onload=function(){
  4.     }
  5. jq：
  6.         $(function(){
  8.     });    
  9. 区别：
  10.         js：只能定义一次，如果多次定义，后面的会将前面的进行给覆盖掉
  11.     jq：可以定义多次

3、jQuery选择器

1、选择器

  1. 1、基本选择器： 
  2.     $("CSS选择器");                //会自动匹配选择器的类型
  3.     $("选择器1,选择器2,选择器3...")        //并集选择器
  4. 2、层级选择器：
  5.     $("A B");        //后代选择器    ---        A元素下的所有B元素
  6.     $("A>B");        //子选择器    ---        A元素内部的所有B子元素    
  7. 3、属性选择器：
  8.      $("A[属性名]") ;        //属性名称选择器
  9.      $("A[属性名='值']");        //包含指定属性指定值的选择器 
  10.      $("A[属性名1='值'][属性名2='值']");        //复合属性选择器，更精确
  11. 4、过滤选择器：
  12.     first    ：获得选择的元素中的第一个元素
  13.   last    ：获得选择的元素的最后一个元素
  14.   even    ：获得偶数元素，从0开始计数
  15.   odd    ：获得奇数元素，从0开始计数
  16.   eq（index）    ：获取指定索引的元素
  17. 5、扩展选择器：（索引选择器）
  18.     gt(index):获取大于指定索引的元素
  19.   lt（index）：获取小于指定索引的元素
  20. 6、表单过滤选择器：
  21.     enabled：获得可用元素
  22.   disabled：获得不可用元素
  23.   checked：获得单选/复选框选中的元素
  24.     selected：获得下拉框中选中的元素

2、对象遍历

  1. jq对象.each(function(index,element){
  2.         //index：索引
  3.       //element：遍历到的元素
  4.       //如果没有参数,使用this来获取遍历到的元素。
  5.       //遍历到的对象为js对象
  6. })

4、jQuery操作DOM

操作内容：

  1. 相关方法：
  2.         text（）：获取/设置元素的标签体纯文本内容
  3.         html（）：获取/设置元素的标签体超文本内容
  4. $(选择器).text(参数);    //有参数代表设置，无参数代表获取
  5. $(选择器).html(参数);    //有参数代表设置，无参数代表获取

操作属性：

  1. 相关方法：
  2.         val（）：获取/设置元素的value属性
  3.         attr（）：获取或设置元素的属性    《==》js对象.setAttribute() / js对象.getAttribute()
  4.     removeAttr（）：删除属性
  5.     prop（）：获取/设置元素的属性    ---可获取单选多选框的返回值
  6.         removeProp（）：删除属性
  7. attr与prop的区别：
  8.     attr：主要用于设置属性的值这一类的操作
  9.   prop：主要用于判断属性是否存在操作布尔类型的操作

操作样式：

  1. 相关方法；
  2.     css（）：获取/设置样式
  3.     addClass（）：添加class属性值
  4.   removeClass（）：删除class属性值
  5.   toggleClass（）：切换class属性，无添加，有删除

操作元素：

  1. 相关方法：
  2.     $（标签）    ：创建一个标签，例：$('<li>xxx</li>')
  3.     prepend（）：在父标签中将子标签放在第一个位置
  4.   append（）：在父标签中将子标签安放在最后一个位置
  5.   empty（）：清空子元素，保留自身元素
  6.   remove（）：删除自己
  7.   jq对象.clone();复制该jq对象

5、事件绑定

绑定语法：

  1. jq对象.事件函数(function(){});

常见事件：

  1. 点击事件：
  2.         click（）    ：单击事件
  3.     dblclick（）：双击事件
  4. 焦点事件：
  5.         blur（）：失去焦点
  6.     focus（）：获得焦点
  7. 鼠标事件：
  8.         mousedowm（）；鼠标按钮被按下
  9.       mouseup（）：鼠标按钮被松开
  10.     mousemove（）：鼠标被移动
  11.     mouseover（）：鼠标移到某元素之上
  12.     mouseout（）：鼠标从某元素移开
  13. 键盘事件：
  14.         keydown（）：某个键盘按键被按下
  15.     keyuo（）：某个键盘按键被松开
  16.     keypress（）：某个键盘按键被按下并松开
  17. 改变事件：
  18.         change（）：域的内容被改变
  19. 表单事件：
  20.         submit（）：提交按钮被点击

6、一些Demo

隔行变色：

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>隔行变色</title>
  7.     <script src="../js/jquery-3.4.1.js"></script>
  9.     <style>
  10.         .ji{
  11.             background-color: #cccccc;
  12.         }
  14.         .ou{
  15.             background-color: aliceblue;
  16.         }
  18.         .over{
  19.             background-color: beige;
  20.         }
  22.     </style>
  24. </head>
  25. <body>
  26. <table id="tab1" border="1" width="800" align="center" cellspacing="0" cellpadding="0">
  27.     <tr>
  28.         <th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
  29.         <th>分类ID</th>
  30.         <th>分类名称</th>
  31.         <th>分类描述</th>
  32.         <th>操作</th>
  33.     </tr>
  34.     <tr align="center">
  35.         <td><input type="checkbox" class="checkbox"></td>
  36.         <td>1</td>
  37.         <td>手机数码</td>
  38.         <td>手机数码类商品</td>
  39.         <td><a href="">修改</a>|<a href="">删除</a></td>
  40.     </tr>
  41.     <tr align="center">
  42.         <td><input type="checkbox" class="checkbox"></td>
  43.         <td>2</td>
  44.         <td>电脑办公</td>
  45.         <td>电脑办公类商品</td>
  46.         <td><a href="">修改</a>|<a href="">删除</a></td>
  47.     </tr>
  48.     <tr align="center">
  49.         <td><input type="checkbox" class="checkbox"></td>
  50.         <td>3</td>
  51.         <td>鞋靴箱包</td>
  52.         <td>鞋靴箱包类商品</td>
  53.         <td><a href="">修改</a>|<a href="">删除</a></td>
  54.     </tr>
  55.     <tr align="center">
  56.         <td><input type="checkbox" class="checkbox"></td>
  57.         <td>4</td>
  58.         <td>家居饰品</td>
  59.         <td>家居饰品类商品</td>
  60.         <td><a href="">修改</a>|<a href="">删除</a></td>
  61.     </tr>
  62.     <tr align="center">
  63.         <td><input type="checkbox" class="checkbox"></td>
  64.         <td>5</td>
  65.         <td>牛奶制品</td>
  66.         <td>牛奶制品类商品</td>
  67.         <td><a href="">修改</a>|<a href="">删除</a></td>
  68.     </tr>
  70.     <tr align="center">
  71.         <td><input type="checkbox" class="checkbox"></td>
  72.         <td>6</td>
  73.         <td>大豆制品</td>
  74.         <td>大豆制品类商品</td>
  75.         <td><a href="">修改</a>|<a href="">删除</a></td>
  76.     </tr>
  77.     <tr align="center">
  78.         <td><input type="checkbox" class="checkbox"></td>
  79.         <td>7</td>
  80.         <td>海参制品</td>
  81.         <td>海参制品类商品</td>
  82.         <td><a href="">修改</a>|<a href="">删除</a></td>
  83.     </tr>
  84.     <tr align="center">
  85.         <td><input type="checkbox" class="checkbox"></td>
  86.         <td>8</td>
  87.         <td>羊绒制品</td>
  88.         <td>羊绒制品类商品</td>
  89.         <td><a href="">修改</a>|<a href="">删除</a></td>
  90.     </tr>
  91.     <tr align="center">
  92.         <td><input type="checkbox" class="checkbox"></td>
  93.         <td>9</td>
  94.         <td>海洋产品</td>
  95.         <td>海洋产品类商品</td>
  96.         <td><a href="">修改</a>|<a href="">删除</a></td>
  97.     </tr>
  98.     <tr align="center">
  99.         <td><input type="checkbox" class="checkbox"></td>
  100.         <td>10</td>
  101.         <td>奢侈用品</td>
  102.         <td>奢侈用品类商品</td>
  103.         <td><a href="">修改</a>|<a href="">删除</a></td>
  104.     </tr>
  105.     <tr align="center">
  106.         <td><input type="checkbox" class="checkbox"></td>
  107.         <td>11</td>
  108.         <td>家居饰品</td>
  109.         <td>家居饰品类商品</td>
  110.         <td><a href="">修改</a>|<a href="">删除</a></td>
  111.     </tr>
  112. </table>
  113. <script>
  114.     $(function () { //jq函数
  115.         //获取从零开始的所有的偶数行并赋值class属性
  116.         $("tr:gt(0):even").addClass("ji");
  117.         //获取从零开始的所有的奇数行并赋值class属性
  118.         $("tr:gt(0):odd").addClass("ou");
  120.         var oddColor;
  121.         //鼠标移到某元素之上
  122.         $("tr:gt(0)").mouseover(function () {
  123.             //当鼠标落到该元素上，获取该元素的背景色
  124.             oddColor = $(this).css("backgroundColor");
  125.             //改变该元素的背景色
  126.             $(this).css("backgroundColor",'beige');
  128.         });
  129.         //鼠标从某元素上移开
  130.         $("tr:gt(0)").mouseout(function () {
  131.             $(this).css("backgroundColor",oddColor);
  132.         });
  133.     });
  134. </script>
  135. </body>
  136. </html>

全选全不选：

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>商品全选</title>
  7.     <script src="../js/jquery-3.4.1.js"></script>
  8. </head>
  9. <body>
  10. <!--
  11. 商品全选
  12.     1. 全选 点击全选按钮,所有复选框都被选中
  13.     2. 反选 点击反选按钮,所有复选框状态取反
  14. -->
  15. <button id="btn1">1. 全选</button>
  16. <button id="btn2">2. 反选</button>
  17. <br/>
  18. <input type="checkbox">电脑
  19. <input type="checkbox">手机
  20. <input type="checkbox">汽车
  21. <input type="checkbox">别墅
  22. <input type="checkbox" checked="checked">笔记本
  24. <script>
  25.     //获取全部的复选框,全选则全部复选框值checked值为true
  26.     var $btn1 = $('#btn1');
  27.     $btn1.click(function () {
  28.         //给所有的type属性为checkbox的checked的值都设置为true
  29.         $("input[type='checkbox']").prop('checked',true);
  30.     });
  31.     //
  32.     $('#btn2').click(function () {
  33.         $("input[type='checkbox']").each(function () {
  34.             //遍历获取复选框的checked的值，取反
  35.             $(this).prop('checked', !$(this).prop('checked'));
  36.         })
  37.     });
  38. </script>
  39. </body>
  40. </html>

QQ表情选择：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>QQ表情选择</title>
  6.     <script src="../js/jquery-3.4.1.js"></script>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             list-style: none;
  12.         }
  14.         .emoji {
  15.             margin: 50px;
  16.         }
  18.         ul {
  19.             overflow: hidden;
  20.         }
  22.         li {
  23.             float: left;
  24.             width: 48px;
  25.             height: 48px;
  26.             cursor: pointer;
  27.         }
  29.         .emoji img {
  30.             cursor: pointer;
  31.         }
  32.     </style>
  35. </head>
  36. <body>
  37. <div class="emoji">
  38.     <ul>
  39.         <li><img src="../img/01.gif" height="30" width="30" alt=""/></li>
  40.         <li><img src="../img/02.gif" height="30" width="30" alt=""/></li>
  41.         <li><img src="../img/03.gif" height="30" width="30" alt=""/></li>
  42.         <li><img src="../img/04.gif" height="30" width="30" alt=""/></li>
  43.         <li><img src="../img/05.gif" height="30" width="30" alt=""/></li>
  44.         <li><img src="../img/06.gif" height="30" width="30" alt=""/></li>
  45.         <li><img src="../img/07.gif" height="30" width="30" alt=""/></li>
  46.         <li><img src="../img/08.gif" height="30" width="30" alt=""/></li>
  47.         <li><img src="../img/09.gif" height="30" width="30" alt=""/></li>
  48.         <li><img src="../img/10.gif" height="30" width="30" alt=""/></li>
  49.         <li><img src="../img/11.gif" height="30" width="30" alt=""/></li>
  50.         <li><img src="../img/12.gif" height="30" width="30" alt=""/></li>
  51.         <li><img src="../img/13.gif" height="30" width="30" alt=""/></li>
  52.         <li><img src="../img/14.gif" height="30" width="30" alt=""/></li>
  53.     </ul>
  54.     <p id="word">
  55.         <strong>请发言：</strong>
  56.         <img src="../img/12.gif" height="22" width="22" alt=""/>
  57.     </p>
  58. </div>
  59. <script>
  60.     $(".emoji img").click(function () {
  61.         //赋值this的内容
  62.        console.log($(this).clone());
  63.         //添加到父对象中
  64.        $("#word").append($(this).clone());
  65.     })
  66.     //绑定父对象的子对象点击事件，
  67.     $('#word').on('click',"img",function(){
  68.         //该字元素
  69.         $(this).remove();
  70.     })
  71. </script>
  72. </body>
  73. </html>