简述JQuery

本人小白一枚，欢迎大家一起讨论学习，如有错误，还望大家指教。

简述：

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

使用：

在使用这个这个框架之前，我们需要下载这js文件，官方下载地址。目前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的js文件时，我们导入min.js文件即可。这里我们说明一下：jquery-xxx.js是开发版本，是给我们开发人员使用的，因为该文件有良好的缩进和注释。而jquery-xxx.min.js属于生产版本，因该文件没有注释和缩进使得体积更少，便于程序的加载。

获取JQuery对象：
var jq = $(jq选择器);JQuery对象和Js对象的方法是不通用的。但两者可以相互转换。相对来说，操作JQuery对象时，更加快捷方便。

• jq对象转化为js对象：jq对象[索引]或者jq对象.get(索引)
• js对象转化为jq对象：$(js对象)

JQ入口函数：

// 与js入口函数不同的是，jq入口函数可以定义多次，
// 而js入口函数window.onload()方法只能定义一次，如果定义多次或定义将前面定义覆盖
$(functioin() {要执行的代码块});

JQ选择器：筛选具有相似特征的元素即便签。

• 基本选择器：
  • 标签选择器（元素选择器）： 用法$("html标签名")获得所有匹配标签名称的元素。
  • id选择器： 用法$("#id的属性值")获得与指定id属性匹配的元素。
  • 类选择器： 用法$(".class的属性值")获得与指定class属性值匹配的元素。
  • 并集选择器： 用法$("选择器1, 选择器2....")获得多个选择器选中的所有元素。
• 层级选择器：
  • 后代选择器： 用法$("A B")选择A元素内部的所有B元素。
  • 子选择器： 用法$("A > B")选择A元素内部的所有B元素子元素。
• 属性选择器：
  • 属性名称选择器： 用法$("html标签名[属性名]")包含指定属性的选择器。
  • 属性选择器： 用法$("html标签名[属性名='属性值']")包含指定属性等于指定值的选择器。
  • 复合属性选择器： 用法$("html标签名[属性名='属性值'][ ]....")包含多个属性条件的选择器。
• 过滤选择器：注意冒号前后不能用空格，否则过滤不出指定的元素，如$("div:first").css("backgroundColor", "pink");
  • 首元素选择器： 用法:first获得选择的元素中的第一个元素。
  • 尾元素选择器： 用法:last获得选择的元素中的最后一个元素。
  • 非元素选择器： 用法:not(selector)不包含指定内容的元素。
  • 偶数选择器： 用法:even获得偶数索引元素，索引从0开始。
  • 奇数选择器： 用法:odd获得奇数索引元素，索引从0开始。
  • 等值索引选择器： 用法:eq(index)获取指定索引元素。
  • 大于索引选择器： 用法:gt(index)获取大于指定索引元素。
  • 小于索引选择器： 用法:lt(index)小于指定索引元素。
  • 标题选择器： 用法:header获得标题（h1~h6）元素，固有写法。
• 表单过滤选择器：
  • 可用元素选择器： 用法:enabled获得可用元素。
  • 不可用元素选择器： 用法:disabled获得元素。
  • 选中选择器： 用法:checked获得单选/复选框选中的元素。
  • 选中选择器： 用法:selected获得下拉框选中的元素。

DOM操作

• 内容操作：
  • html()： 获取/设置元素的标签体的内容。例如：<a><font>内容</font></a> 结果：<font>内容</font>
  • text()： 获得/设置元素的标签体纯文本内容。例如：<a><font>内容</font></a> 结果：内容
  • val()： 获取/设置元素的value属性值。
• 属性操作：
  • 通用属性操作：
    • attr()： 获得/设置元素的属性，如果操作的是元素自定义的属性，则建议使用此方法。
    • removeAtrr()： 删除属性。
    • prop()： 获取/设置元素的属性，如果操作的是元素的固有属性，则建议使用此方法。
    • removeProp()： 删除属性。
  • class属性操作：
    • addClass()： 添加class属性值。
    • removeClass()： 删除class属性值。
    • toggleClass()： 切换class属性，例如：toggleClass("one")判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加。
    • css()： 设置元素的css样式。
  • CRUD操作：
    • append()： 父元素将子元素追加到末尾，对象1.append(对象2)： 将对象2添加对象1元素内部，并且在末尾。
    • appendTo()： 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾。
    • prepend(): 父元素将子元素追加到开头，对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。
    • prependTo()： 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头。
    • after(): 添加元素到元素后边，对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系。
    • insertAfter()： 对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系
    • before(): 添加元素到元素前边，对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系。
    • insertBefore()： 对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关系。
    • remove(): 移除元素，对象.remove():将对象删除掉。
    • empty(): 清空元素的所有后代元素，对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点。

JQ高级

• 动画：jq有三种方式显示和隐藏元素。
  • 默认显示和隐藏方式：
    • show([speed, [easing], [fn]]) : 显示隐藏的匹配元素，并在动画完成后可选地触发一个回调函数。
      • speed： 动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
      • easing： 用来指定切换效果，默认是"swing"，可用参数"linear"。
        • swing： 动画执行时效果是 先慢，中间快，最后又慢。
        • linear： 动画执行时速度是匀速的。
      • fn： 在动画完成时执行的函数，每个元素执行一次。
    • hide([speed, [easing], [fn]])： 隐藏显示的元素，并在动画完成后可选地触发一个回调函数。
    • toggle([speed], [easing], [fn])： 元素为可见则切换为隐藏；元素为隐藏反之，并在动画完成后可选地触发一个回调函数。
  • 滑动显示和隐藏方式：方法的参数同默认方式一样
    • slideDown([speed], [easing], [fn])： 可以使匹配的元素以“滑动”的方式显示出来，并在动画完成后可选地触发一个回调函数。
    • slideUp([speed, [easing], [fn]])： 可以使匹配的元素以“滑动”的方式隐藏起来，并在动画完成后可选地触发一个回调函数。
    • slideToggle([speed], [easing], [fn]) ： 元素为可见则切换为隐藏；元素为隐藏反之，并在动画完成后可选地触发一个回调函数。
  • 淡入淡出显示和隐藏方式：方法的参数同默认方式一样
    • fadeIn([speed], [easing], [fn])： 匹配的元素来实现淡入效果，并在动画完成后可选地触发一个回调函数。
    • fadeOut([speed], [easing], [fn])： 匹配的元素来实现淡出效果，并在动画完成后可选地触发一个回调函数。
    • fadeToggle([speed, [easing], [fn]])： 元素为可见则切换为隐藏；元素为隐藏反之，并在动画完成后可选地触发一个回调函数。
• 遍历：jq提供了三种方式遍历，在3.0之后出现了另一种。
  • js的遍历方式： for(初始化值;循环结束条件;步长)
  • jq的遍历方式：
    • 一：jq对象.each(callback)
      • 语法： jquery对象.each(function(index,element){});
        • index： 就是元素在集合中的索引
        • element： 就是集合中的每一个元素对象
      • 回调函数返回值：
        • true： 如果当前function返回为false，则结束循环(break)。
        • false： 如果当前function返回为true，则结束本次循环，继续下次循环(continue)
    • 二：$.each(object, [callback])
    • 三：for…of 该方法是jq 3.0 版本之后提供的方式，用法为 for(元素对象 of 容器对象)
• 事件绑定
  • jq标准的绑定方式： jq对象.事件方法(回调函数); 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为，如表单对象.submit(); 让表单提交
  • on绑定事件/off解除绑定
    • jq对象.on(“事件名称”,回调函数)
    • jq对象.off(“事件名称”)： 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
• 事件切换：toggle
  • jq对象.toggle(fn1,fn2…)： 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…，注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。 jquery-migrate-1.0.0.js
• 插件：用来增强JQuery的功能，实现方式有两种。
  • $.fn.extend(object)： 增强通过JQuery获取的对象的功能。
  • $.extend(object)： 增强JQuery对象自身的功能。

插件小案例1：

<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       $.fn.extend({
           check:function () {
               this.prop("checked", true);
           },
           uncheck:function () {
               this.prop("checked", false);
           }
       });

        $(function() {
            $("#btn-check").click(function () {
                $("input[type=checkbox]").check();
            });
            $("#btn-uncheck").click(function () {
                $("input[type=checkbox]").uncheck();
            });
        });
    </script>
</head>
<body>
	<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
	<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
	<br/>
	<input type="checkbox" value="football">足球
	<input type="checkbox" value="basketball">篮球
	<input type="checkbox" value="volleyball">排球
</body>
</html>

插件小案例2：

<html>
<head>
    <meta charset="UTF-8">
    <title>02-增强JQuery对象自身的功能</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            min:function (v1, v2) {
                return v1 >= v2 ? v2 : v1;
            },
            max:function (v1, v2) {
                return v1 >= v2 ? v1 : v2;
            }
        });
        $(function () {
            alert("最小值：" + $.min(1, 2) + "，最大值：" + $.max(5, 4));
        });
    </script>
</head>
<body>
</body>
</html>