雨羊的博客

1. jQuery 基础

概念：一个 JavaScript 框架。简化 JS 开发。
jQuery 版本：
- 1.x：兼容 ie678,使用最为广泛的，官方只做 BUG 维护，功能不再新增。因此一般项目来说，使用 1.x 版本就可以了。
- 2.x：不兼容 ie678，很少有人使用，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x。
- 3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。
jQuery 对象和 JS 对象区别与转换
- jQuery 对象在操作时，更加方便。
- jQuery 对象和 js 对象方法不通用的。
- jQuery 对象转 js 对象：jQuery 对象[索引] 或者 jQuery 对象。get(索引)，一个元素索引为 0。
- js 对象转 jQuery 对象：$(js 对象)
- 通过 $ 获取的对象为 jQuery 对象，而不是 js 对象。

使用 jQuery 对象的时候不需要再遍历数组。

// 将所有div中的内容改为aaa
var div = $("div");
div.html("aaa");

事件绑定例子：通过内部方法实现

$("#div1").click(function () {
    alert("abc");
});

样式控制：CSS 方法
- $("#div1").css("background-color","red");
- $("#div1").css("backgroundColor","pink");
- 第二种写法鼠标放上去以后按 ctrl 会变蓝，可以检验对错。
入口函数：
- $(document).ready(function(){});
- $().ready(function(){}); ready 函数仅能用于当前文档，无需选择器，所以 document 选择器可以不要。
- $(function(){}); $ 的默认事件就是 ready，所以，ready 也可以省略。这三种写法相同。
- $(function(){}); 和 window.onload 的区别：
  - window.onload 就是一个页面加载完以后执行的函数，只能定义一次，如果定义多次，后边的会将前边的覆盖掉。
  - $(function(){}); ：可以定义多次的。
jQuery 对象的 click 方法中可以使用 this，代表调用点击的 js 对象，HTML 调用函数中需要传递 this 参数才可以使用。
clone() 克隆对象
serialize() 将表单序列化为字符串，action=register&username=abc&password=123

2. 选择器

基本选择器：
- 标签选择器：$("html标签名") 获得所有匹配标签名称的元素。
- id 选择器：$("#id的属性值") 获得与指定 id 属性值匹配的元素。
- 类选择器：$(".class的属性值") 获得与指定的 class 属性值匹配的元素。
- 并集选择器：$("选择器1,选择器2....") 获取多个选择器选中的所有元素。
层级选择器：
- 后代选择器：$("A B")：选择 A 元素内部的所有 B 元素。
- 子选择器：$("A > B") 选择 A 元素内部的所有 B 子元素。
属性选择器：
- 属性名称选择器：$("A[属性名]")：包含指定属性的选择器。
- 属性选择器：$("A[属性名='值']")：包含指定属性等于指定值的选择器
  - $("A[属性名!='值']")：包含指定属性不等于指定值的选择器
  - $("A[属性名^='值']")：包含指定属性的值以指定值开头的选择器
  - $("A[属性名$='值']")：包含指定属性的值以指定值结尾的选择器
  - $("A[属性名*='值']")：包含指定属性的值含有指定值的选择器
- 复合属性选择器：$("A[属性名='值'][]...")：包含多个属性条件的选择器
  - ```
  // <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
  $("#b7").click(function () {
      $("div[id][title*='es']").css("backgroundColor","pink");
  });
```
过滤选择器：
- 首元素选择器：:first 获得选择的元素中的第一个元素
  - ```
  // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
  $("#b1").click(function () {
      $("div:first").css("backgroundColor","pink");
  });
```
- 尾元素选择器：:last 获得选择的元素中的最后一个元素
- 非元素选择器：:not(selector) 不包括指定内容的元素
  - ```
  // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
  $("#b3").click(function () {
      $("div:not(.one)").css("backgroundColor","pink");
  });
```
- 偶数选择器：:even 偶数，从 0 开始计数
- 奇数选择器：:odd 奇数，从 0 开始计数
- 等于索引选择器：:eq(index) 指定索引元素
- 大于索引选择器：:gt(index) 大于指定索引元素
- 小于索引选择器：:lt(index) 小于指定索引元素
- 标题选择器：:header 获得标题（h1~h6）元素，固定写法
  - ```
  // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
  $("#b9").click(function () {
      $(":header").css("backgroundColor","pink");
  });
```
下拉框加上 multiple="multiple" 属性后可以变成多选的下拉框，可以用来做权限授予。

表单过滤选择器：

可用元素选择器：:enabled 获得可用元素

// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
$("#b1").click(function () {
    $("input[type='text']:enabled").val("aaa");
});

不可用元素选择器：:disabled 获得不可用元素
选中选择器：:checked 获得单选/复选框选中的元素

// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
$("#b3").click(function () {
    alert($("input[type='checkbox']:checked").length);
});

选中选择器：:selected 获得下拉框选中的元素，注意被选中的为 option

// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
$("#b4").click(function () {
    alert($("#job > option:selected").length);
});

3. DOM 操作

内容操作：
- html()：获取/设置元素的标签体内容，空参为获取，有参数为设置。
- text()：获取/设置元素的标签体纯文本内容，设置纯文本的时候，会把此标签体内全部内容(包含子标签)都替换为文本，如果设置的内容中有 HTML 标签，也会以文本的形式展示(html()方法可以以标签形式展示)，多个空格展示为一个空格。
- val()：获取/设置元素的 value 属性值。
通用属性操作
- attr()：获取/设置元素的属性，一个参数(属性名)为获取，两个参数(属性名，属性值)为设置。
- removeAttr()：删除属性
- prop()：获取/设置元素的属性
- removeProp()：删除属性
- attr 和 prop 区别？
  - 如果操作的是元素的固有属性(id 和 name 不属于固有属性，class 为 div 的固有属性)，则建议使用 prop，prop 获取 id 和 name 的话获取不到。
  - 如果操作的是元素自定义的属性，则建议使用 attr，元素的 checked, selected, disabled 状态无法使用 attr 获取。
  - 总结：一般使用 attr 即可，涉及到上面提到的三个使用 prop。
对 class 属性操作
- addClass()：添加 class 属性值
- removeClass()：删除 class 属性值
- toggleClass()：切换 class 属性
  - 判断如果元素对象上存在 class="one"，则将属性值 one 删除掉。如果元素对象上不存在 class="one"，则添加。
- css()：获取/设置 CSS 属性值。
CRUD 操作：两个对象都为 jQuery 对象
- append()：父元素将子元素追加到末尾
  - 对象 1.append(对象2)：将对象 2 添加到对象 1 元素内部，并且在末尾，并且原对象 1 会消失
- prepend()：父元素将子元素追加到开头
  - 对象 1.prepend(对象2)：将对象 2 添加到对象 1 元素内部，并且在开头
- appendTo()：
  - 对象 1.appendTo(对象2)：将对象 1 添加到对象 2 内部，并且在末尾
- prependTo()：
  - 对象 1.prependTo(对象2)：将对象 1 添加到对象 2 内部，并且在开头
- after()：添加元素到元素后边
  - 对象 1.after(对象2)：将对象 2 添加到对象 1 后边。对象 1 和对象 2 是兄弟关系
- before()：添加元素到元素前边
  - 对象 1.before(对象2)：将对象 2 添加到对象 1 前边。对象 1 和对象 2 是兄弟关系
- insertAfter()：
  - 对象 1.insertAfter(对象2)：将对象 1 添加到对象 2 后边。对象 1 和对象 2 是兄弟关系
- insertBefore()：
  - 对象 1.insertBefore(对象2)：将对象 1 添加到对象 2 前边。对象 1 和对象 2 是兄弟关系
- remove()：移除元素
  - 对象.remove()：将对象删除掉
- empty()：清空元素的所有后代元素
  - 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性

4. jQuery 动画

默认显示和隐藏方式
- show([speed],[easing],[fn]])：显示，刚开始即为显示
- hide([speed],[easing],[fn]])：隐藏
- toggle([speed],[easing],[fn])：切换
参数解释
- speed：动画的速度。可以设置为 "slow","normal", "fast" 或表示动画时长的毫秒数值(如：1000)
- easing：用来指定切换效果，默认是"swing"，可用参数"linear"
  - swing：动画执行时效果是先慢，中间快，最后又慢
  - linear：动画执行时速度是匀速的
- 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]])：淡入淡出切换

5. jQuery 遍历

js 的遍历方式：for(初始化值;循环结束条件;步长)
jquery对象.each(function([index,[element]]){});
- 对于数组中的每个对象，去执行括号中的函数。
- 函数的两个参数为可选项，也可以只传递 index，但不能直接传递 element。
- index：就是元素在集合中的索引。
- element：就是集合中的每一个元素对象，是 js 对象，需要参数传递。
- this：集合中的每一个元素对象，是 js 对象，可以直接使用。
- 回调函数返回值：
  - false：如果当前 function return false，则结束循环(break)。
  - true：如果当前 function return true，则结束本次循环，继续下次循环(continue)，默认在最后返回 true。
$.each(object, [callback])：object 可以是 jQuery 对象，也可以是 js 对象，其余与上遍历函数类似。
for..of: jQuery 3.0 版本之后提供的方式，for(元素对象 of 容器对象)

6. 事件绑定

标准的绑定方式
- jquery对象.事件方法(回调函数);
- 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
  - 表单对象.submit();//让表单提交
  - ```
  //会阻止表单的提交
  $("form").submit(function() {
      return false;
  });
```
on 绑定事件/off 解除绑定
- jueryq对象.on("事件名称",回调函数) 绑定事件
- jquery对象.off("事件名称") 解绑事件，不局限于用 on 绑定的事件。
  - 如果 off 方法不传递任何参数，则将组件上的所有事件全部解绑
事件切换：toggle
- jq对象.toggle(fn1,fn2...);
  - 当单击 jq 对象对应的组件后，会执行 fn1.第二次点击会执行 fn2.....
- 注意：1.9 版本 toggle 方法删除(不能切换事件，只保留切换动画功能)，jQuery Migrate（迁移）插件可以恢复此功能。

可以链式编程绑定多个事件：

$("#name").mouseover(function () {
    alert("鼠标来了...")
}).mouseout(function () {
    alert("鼠标走了...")
});

7. 插件

在 jQuery 插件的范围里， this 关键字代表了这个插件将要执行的 jQuery 对象，但是在其他包含 callback 的 jQuery 函数中，this 关键字代表了原生的 DOM 元素。
$ 就是 jQuery 对象，$() 就是 jQuery()，在里面可以传参数，作用就是获取元素。
$ 可以调用那些不需要操作对象的方法（像 Java 代码中的静态方法，不用声明对象就可以操作）。
插件：增强 jQuery 的功能

实现方式：

$.fn.extend(object)：增强通过 jQuery 获取的对象的功能，如 $("#id")

<!DOCTYPE html>
<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">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框


        //1.定义jqeury的对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check:function () {
               //让复选框选中
                //this:调用该方法的jq对象
                this.prop("checked",true);
            },
            uncheck:function () {
                //让复选框不选中
                this.prop("checked",false);
            }
        });
        $(function () {
           // 获取按钮
            //$("#btn-check").check();
            //复选框对象.check();
            $("#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>

$.extend(object)：增强 JQeury 对象自身的功能 $/jQuery

<!DOCTYPE html>
<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">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            max:function (a,b) {
                //返回两数中的较大值
                return a >= b ? a:b;
            },
            min:function (a,b) {
                //返回两数中的较小值
                return a <= b ? a:b;
            }
        });
        //调用全局方法
        var max = $.max(4,3);
        //alert(max);
        var min = $.min(1,2);
        alert(min);
    </script>
</head>
<body>
</body>
</html>

如果觉得文章对你有用，请随意赞赏

前端 jquery

JQuery 学习笔记

https://blog.rainsheep.cn/archives/1582911792906

作者

Rainsheep

发布于

2020-02-29

更新于

2023-12-28

许可协议

CC BY 4.0