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[...] . 这两者有什么区别?

JS基础-jQuery的引入/$()的四大功能/jQuery对象的处理

jQuery的使用

1. jQuery的引入方式

1.1 CDN静态资源库引用

1.2 本地引用

2. jQury的工厂函数$()

3. jQuery对象

3. jQuery查询结果的处理

学习心得

相关文章