微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > JS基础-jQuery的引入/$()的四大功能/jQuery对象的处理

博主信息

博文 58

粉丝 3

访问量 76691

专题推荐

更多>

jQuery的使用

1. jQuery的引入方式

1.1 CDN静态资源库引用

CDN方式引用, 即内容分发方式
BootCDN或者又拍云的CDN的速度都可以
- BootCDN网址: https://www.bootcdn.cn/
- 又拍云湾沚: https://upcdn.b0.upaiyun.com/

<!-- CDN方式引用 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

1.2 本地引用

把jQuery下载到本地, 同样以引入外部js文件的方式引入.

<script scr="jquery-3.5.1.min.js"></script>

2. jQury的工厂函数$()

$(selector)的返回值为一个jQuery对象.
使用语法: $(selector).operator() , 即: $(选择器).操作函数() .
jQuery是自动循环, 所以jQuery很少循环.
类似给 console.log 函数起别名 cl , $ 是 jquery 函数的一个别名.
工厂函数$()的四大功能
- 1. 选择器功能
  - 工厂函数$()的选择器功能, 能很好的体现jQuery的特点: 写得少, 做得多.

- `$(选择器)` 的返回值是**jQuery对象**.

1. 根据HTML元素创建jQuery对象
- $(HTML元素对象) : 把HTML元素对象封装成jQuery对象, 然后就能调用jQuery对象提供的方便的方法进行操作.
1. 根据带有HTML标签的文本创建jQuery对象.
- $(htmlStr) : 把带有HTML标签的文本解析成html元素对象, 再将其封装成jQuery对象.
1. $(回调函数) : 当HTML文档结构加载完成后, 会自动加载这个回调函数.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery工厂函数$()的四大功能</title>
    <!-- 引入本地jQuery文件 -->
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <ul id="first">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <ul id="second">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</body>
<script>
    // jQuery工厂函数的四大功能
    // 1. 选择器功能
    /* 把第一个列表的字体颜色变成橙色 */
    /* 使用JS原生操作 */
    document.querySelectorAll('#first > li').forEach(function(ele) {
        ele.style.color = 'orange';
    });
    /* 使用jQuery实现 */
    $('#first > li').css('color', 'orange');
    // 2. 创建jQuery对象
    /* 把第二个列表的第二个列表项的背景色设置为黄色 */
    /* 用js原生操作获取第二个列表的第二个li元素 */
    var li2 = document.querySelector('#second > li:nth-of-type(2)');
    /* 把li元素封装成jQuery对象, 再调用css()方法设置背景色 */
    $(li2).css('background-color', 'yellow');
    // 3. 把带有HTML标签的文本解析成html元素对象, 再将其封装成jQuery对象.
    /* 把htmlStr字符串解析成HTML元素对象, 并在浏览器中显示 */
    var htmlStr = '<span>hello jQuery!</span>';
    $(htmlStr).css('color', 'red').appendTo($('body'));
    // 4. $(回调函数): 当HTML文档结构加载完成后, 会自动加载这个回调函数.
    /* 弹出"页面加载完毕"的提示框 */
    $(function() {
        alert('页面加载完毕');
    });
</script>
</html>

3. jQuery对象

jQuery对象可以封装1个或多个js对象, 包括但不限于HTML元素对象.
可以使用类似访问数组元素的方式访问jQuery对象封装的元素. 如: $('div')[0] .
也可以调用jQuery对象的get()方法来获取其封装的元素: $('div').get(1) .
有 length 属性, 值是jQuery对象封装的元素个数.
jQuery对象提供了很多方便操作HTML元素的各种属性的方法.
jQuery对象没有 forEach() 方法, 但提供了 $.each() 静态方法遍历其中的元素.
- $.each() 方法的使用方法:

  $.each(jQuery对象, function(当前元素索引, 当前元素) {
      // do something...
  });

$.each() 也可以当做非静态方法调用:

  jQuery对象.each(function(当前元素索引, 当前元素) {
      // do something...
  });

调用jQuery对象的 toArray() 方法, 可以将其封装的所有元素转换成真正的js对象数组, 然后就能使用 forEach() 方法遍历其元素了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery对象</title>
    <!-- CDN方式引用, 即内容分发方式 -->
    <!-- BootCDN或者又拍云的CDN的速度都可以 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 本地引用 -->
</head>
<body>
    <ul id="first">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <ul id="second">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</body>
<script>
    // console.log函数起别名
    var cl = console.log.bind(console);
    // 封装所有元素的jQuery对象
    var $all = $('*');
    cl($all);
    // length属性返回封装的元素个数
    cl($all.length);
    // 获取封装的元素
    /* 方法1: 类似数组的array[index]方式 */
    cl($all[0]);
    /* 方法2: 调用get(index)方法 */
    cl($all.get(1));
    // 调用toArray()方法转成js数组
    cl($all.toArray());
    // 遍历封装的元素
    /* 方法1: $.each()静态方法: */
    $.each($all, function(index, ele) {
        cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);
    })
    /* 方法2: 动态调用$.each()方法: */
    $all.each(function(index, ele) {
        cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);
    });
    /* 方法3: 用toArray()方法转成js数组, 然后用forEach遍历 */
    $all.toArray().forEach(function(ele, index) {
        cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);
    });
</script>
</html>

3. jQuery查询结果的处理

1. 使用 toArray() 方法转成js数组来处理查询结果中的对象.
1. 使用 $.each() / $(selector).each() 来处理查询结果中的对象.
1. 使用 $.map(jQuery查询结果, function(当前元素, 当前元素索引) {...}) 来遍历jQuery查询结果, 并使用传入的回调函数处理遍历的每个对象, 将回调函数处理后返回的对象组成数组.
1. 为jQuery查询结果绑定事件处理脚本.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq查询结果的处理</title>
    <!-- CDN方式引用, 即内容分发方式 -->
    <!-- BootCDN或者又拍云的CDN的速度都可以 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 本地引用 -->
</head>
<body>
    <ul id="first">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        var cl = console.log.bind(console);
        // 1. 使用 `toArray()` 方法转成js数组来处理查询结果中的对象.
        /* 见上一节实例, 略 */
        // 2. 使用 `$.each()` / `$(selector).each()` 来处理查询结果中的对象.
        /* 见上一节实例, 略 */
        // 3. 使用$.map()遍历并处理jQuery查询结果
        var $lis = $('li');
        /* 返回偶数索引的元素 */
        var array = $.map(lis, function(ele, index) {
            if (index % 2 == 0) {
                return ele;
            }
        });
        /* 背景色改成橙色 */
        $(array).css('background-color', 'orange');
        // 4. 为jQuery查询结果绑定事件处理脚本.
        lis.click(function(event) {
            // index()使用方式1:
            // cl('点击了第' + (lis.index(event.target) + 1) + "个元素");
            // index()使用方式2:
            cl('点击了第' + (event.target.index() + 1) + "个元素");
        });
    </script>
</body>
</html>

学习心得

jQuery是JS的一个类库, 是为了简化JS操作出现的. jQuery能做的, JS都能做.
jQuery的特点: 写得少, 做得多.
jQuery的方法基本都是自动循环的, 所以jQuery很少循环.
一个奇怪的情况, 如果以CDN的方式引入jQuery, cl($('*')) 显示的是 jQuery.fn.init[...] , 即, $(selector)的返回结果是jQuery对象; 而如果引入本地的jQuery文件, 上述表达式显示的结果是 S.fn.init[...] . 这两者有什么区别?

批改老师：