day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）

本文链接：https://blog.csdn.net/qq_38454176/article/details/104251406

今日内容

1. JQuery 基础：

概念
快速入门
JQuery对象和JS对象区别与转换
选择器
DOM操作
案例

今日源码：
链接：https://pan.baidu.com/s/1KiG0c_V8Hsv8lPgLEROwoQ
提取码：mtjk

JQuery相关开发文档
链接：https://pan.baidu.com/s/1b7osJTHy9pQFapr_9rDanw
提取码：a7wc

JQuery 基础：

1. 概念：一个JavaScript框架。简化JS开发

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

2. 快速入门

1. 步骤：

1. 下载JQuery

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，
最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
jquery-xxx.js 与 jquery-xxx.min.js区别：
1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

2. 导入JQuery的js文件：导入min.js文件

3. 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <!--导入jquery框架-->
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
<script>
   //使用JQuery获取元素对象
    var div1 = $("#div1");
   alert(div1.html());
    var div2 = $("#div2");
   alert(div2.html());
</script>
</body>
</html>

3. JQuery对象和JS对象区别与转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者相互转换
* jq – > js : jq对象[索引] 或者 jq对象.get(索引)
* js – > jq : $(js对象)
互换之后可以调用对方的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
<script>
  //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以将其当做数组来使用
  //对divs中所有的div 让其标签体内容变为"aaa"
  for (var i = 0; i < divs.length; i++) {
      //divs[i].innerHTML = "aaa";
      $(divs[i]).html("ccc"); /*js -- > jq */
  }

    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
  alert($divs.length);//也可以当做数组使用

  //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb";

  /*jq -- > js */
  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "eee";

</script>
</body>
</html>

4. 选择器：筛选具有相似特征的元素(标签)

1. 基本操作学习：

1. 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        // 给b1按钮添加单击事件
       /* window.onload = function(){
            //1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });

        }*/
     
       /*   //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
       $(function () {
            //1.获取b1按钮
           $("#b1").click(function(){
               alert("abc");
           });
       });*/

      $(function(){
          // $("#div1").css("background-color","red");
          $("#div1").css("backgroundColor","pink");
      });

        /*
             window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
          */

        /* function fun1(){
             alert("abc");
         }

         function fun2(){
             alert("bcd");
         }
         window.onload = fun1;
         //window.onload = fun2;
 		*/

        /* $(function(){
             alert(123);
         });

         $(function(){
             alert(234);
         });
  */
    </script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">
</body>
</html>

2. 入口函数

 $(function () {
         
   			 });

jquery入口函数(dom文档加载完成之后执行该函数中的代码)，即不管定义在什么位置，浏览器都会加载解析到。

window.onload 和 $(function) 区别

window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
$(function) 可以定义多次的

3. 样式控制：css方法

 // $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");

2. 分类