笔记来源：尚硅谷jQuery教程(jquery从入门到精通)

jQuery简介

1、jQuery 初识

What?

  • jQuery官网：http://jquery.com/
  • 一个优秀的 JS 函数库
  • 使用了jQuery的网站超过 90%
  • 中大型 WEB 项目开发首选
  • Write Less，Do More！！！

Why?

  • HTML 元素选取（选择器）
  • HTML 元素操作
  • CSS 操作
  • HTML 事件处理
  • JS 动画效果
  • 链式调用 a().b().c()…
  • 读写合一
  • 浏览器兼容
  • 易扩展插件
  • ajax 封装

How?

1. 引入jQuery库

  1. <!-- 引入jQuery -->
  2. <!--服务器本地库-->
  3. <script src="js/jquery-3.6.0.js"></script>
  4. <!--CDN远程库-->
  5. <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->

2. 使用jQuery

  • jQuery核心函数：$/jQuery
  • jQuery核心对象：执行$()返回的对象
  1. // 绑定文档加载完成的监听
  2. $(function () {
  3.     // 绑定监听事件
  4.     var $btn02 = $("#btn02");
  5.     $btn02.click(function () {
  6.         var username = $("#username").val();
  7.         username && alert(username);
  8.     });
  9. })

01-jQuery简介 - 图1

区别 2 种 JS 库文件

  • 开发版（测试版）
  • 生产版（压缩版）

区别 2 种引用 JS 库的方式

  • 服务器本地库

  • CDN远程库

    • 项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担
    • https://www.bootcdn.cn/：搜索jQuery，复制<script>标签到项目中即可使用

区别jQuery的不同版本

  • 1.x

    • 兼容老版本 IE
    • 文件更大

  • 2.x

    • 部分 IE8 及以下支持
    • 文件小，执行效率更高

  • 3.x

    • 完全不再支持 IE8 及以下版本
    • 提供了一些新的 API
    • 提供不包含 ajax / 动画 API 的版本

2、jQuery 的 2 把利器

  1. // jQuery核心代码
  2. (function(window){
  3.     var jQuery = function(){
  4.         return new jQuery.fn.init();
  5.     }
  6.     window.$ = window.jQuery = jQuery
  7. })(window)

jQuery 核心函数

简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery

引入jQuery库后，直接使用即可

  • 当函数用：$(xxx)

  • 当对象用：$.xxx()

  1. // jQuery函数：直接可用
  2. console.log($, typeof $);  // ƒ ( selector, context ) {}    function
  3. console.log(jQuery === $); // true

jQuery 核心对象

简称：jQuery对象

得到jQuery对象：执行jQuery函数返回的就是jQuery对象

使用jQuery对象：$obj.xxx()

  1. // jQuery对象：执行jQuery函数得到它
  2. console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true

01-jQuery简介 - 图2

3、jQuery 函数的使用

作为一般函数调用：$(param)

  1. 参数为函数：当 DOM 加载完成后，执行此回调函数
  2. 参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象
  3. 参数为 DOM 对象：将 dom 对象封装成jQuery对象
  4. 参数为 html 标签字符串（用得少）：创建标签对象并封装成jQuery对象

作为对象使用：$.xxx()

  • $.each()：隐式遍历数组
  • $.trim()：去除两端的空格
  1. // 需求1.点击按钮：显示按钮的文本，显示一个新的输入框
  2. // 1、参数为函数：当 DOM 加载完成后，执行此回调函数
  3. $(function () { // 绑定文档加藏完成的监听
  4.     // 2、参数为选择器字符：查找所有匹配的标签并将它们封装成`jQuery`对象
  5.     $("#btn").click(function () {
  6.         // alert(this.innerHTML); // this是什么？发生事件的dom元素（<button>）
  7.         // 3、参数为 DOM 对象：将 dom 对象封装成`jQuery`对象
  8.         alert($(this).html());
  9.         // 4、参数为 html 标签字符串（用得少）：创建标签对象并封装成`jQuery`对象
  10.         $('<input type="text" name="msg3"><br/>').appendTo("div");
  11.     });
  13.     // 需求2.遍历输出数组中所有元素值
  14.     var arr = [3, 7, 4];
  15.     $.each(arr, function (index, item) {
  16.         console.log(index, item); // 0 3    1 7    2 4
  17.     });
  19.     // 需求3.去掉“my atguigu”两端的空格
  20.     var str = "    my atguigu   ";
  21.     console.log('===' + str + '===');           // ===    my atguigu   ===
  22.     console.log('===' + str.trim() + '===');    // ===my atguigu===
  23.     console.log('===' + $.trim(str) + '===');   // ===my atguigu===
  24. })

4、jQuery 对象的使用

理解

即执行jQuery核心函数返回的对象

jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）

jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom

属性和方法

  • 基本行为：操作标签的基本方法

  • 属性：操作内部标签的属性或值

  • CSS：操作标签的样式

  • 文档：对标签进行增删改操作

  • 筛选：根据指定的规则过滤内部的标签

  • 事件：处理事件监听相关

  • 效果：实现一些动画效果

这里我们先学习jQuery对象的基本行为，其他的不放在当前章节中

基本行为

  • size()/length：包含的 DOM 元素个数
  • [index]/get(index)：得到对应位置的 DOM 元素
  • each()：遍历包含的所有 DOM 元素
  • index()：得到在所在兄弟元素中的下标
  1. // 需求1.统计一共有多少个按钮
  2. // `size()`/`length`：包含的 DOM 元素个数
  3. var $buttons = $('button');
  4. console.log($buttons.length); // 4
  6. // 需求2.取出第2个button的文本
  7. console.log($('button:nth-child(2)').text()); // 测试二
  8. // `[index]`/`get(index)`：得到对应位置的 DOM 元素
  9. console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML); // 测试二 测试二
  11. // 需求3.输出所有button标签的文本
  12. // `each()`：遍历包含的所有 DOM 元素
  13. // $buttons.each(function (index, domEle) {
  14. //     console.log(index, domEle.innerHTML); // 0 "测试一"   1 "测试二"   2 "测试三"    3 "测试四"
  15. // });
  16. $buttons.each(function () {
  17.     console.log(this.innerHTML); // 测试一 测试二 测试三 测试四
  18. });
  20. // 需求4.输出’测试三’按钮是所有按钮中的第几个
  21. console.log($("#btn3").index()); // 2

伪数组

  • Object对象
  • length属性
  • 数值下标属性
  • 没有数组特别的方法：forEach()，push()，pop()，splice()
  1. // 伪数组
  2. console.log($buttons instanceof Array); // false
  3. //自定义一个伪数组
  4. var weiArr = {}
  5. weiArr.length = 0;
  6. weiArr[0] = 'atguigu';
  7. weiArr.length = 1;
  8. weiArr[1] = 123;
  9. weiArr.length = 2;
  10. for (var i = 0; i < weiArr.length; i++) {
  11.     var obj = weiArr[i];
  12.     console.log(i, obj); // 0 "atguigu"    1 123
  13. }
  14. console.log(weiArr.forEach, $buttons.forEach); //undefined undefined