欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JQuery基础知识

程序员文章站 2022-04-17 18:49:21
...

引用jQuery的方法

1、官网下载原代码

jQuery 官网下载
项目中创建一个js文件保存下载的原代码

配置成功验证：

JQuery基础知识

2、CDN引用-引用其它网站的资源

Bootstrap 中文网
又拍云

jQuery工厂函数$()``jQuery()的四种使用场景

$()基本语法: $(选择器).操作()

1、$(选择器): 返回 jQuery 对象，然后可以调用jQuery方法
2、$(js 对象): 将 js 对象包装成 jQuery 对象，调用jQuery方法
3、$(html 文本): 将 html 文本包装成一个 jQuery 对象并返回
4、$(callback): 当 html 文档结构加载完成后就会立即执行这个回调

演示代码：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <script src="lib/jQuery_v3.5.1.js"></script>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. <div class="mot">
    10. 

  10.     <span>1</span>
    11. 

  11.     <span>2</span>
    12. 

  12.     <span>3</span>
    13. 

  13. </div>
    14. 

  14. <div class="hai">
    15. 

  15.     <span>4</span>
    16. 

  16.     <span>5</span>
    17. 

  17.     <span>6</span>
    18. 

  18. </div>
    19. 

    20. 

  20. </body>
    21. 

  21. <script>
    22. 

  22.     // console.log($);
    23. 

    24. 

  24.     // 1、`$(选择器)`: 返回 jQuery 对象，然后可以调用jQuery方法
    25. 

  25.     $('.mot').css({
    26. 

  26.         "background-color": "yellow",
    27. 

  27.         "font-size": "2rem"
    28. 

  28.     })
    29. 

    30. 

  30.     // 2、`$(js 对象)`: 将 js 对象包装成 jQuery 对象，调用jQuery方法
    31. 

  31.     var spans = document.querySelectorAll(".hai span");
    32. 

  32.     // spans===> jQuery对象
    33. 

  33.     $(spans).css("background-color", "green");
    34. 

    35. 

  35.     // 3、`$(html 文本)`: 将 html 文本包装成一个 jQuery 对象并返回
    36. 

  36.     $("<h3>jQuery学习</h3>").insertBefore(".hai");
    37. 

    38. 

  38.     // 4、`$(callback)`: 当 html 文档结构加载完成后就会立即执行这个回调
    39. 

  39.     $(function () {
    40. 

  40.         $(document.body).css({
    41. 

  41.             "background-color": "wheat",
    42. 

  42.             "font-size": "1.5rem",
    43. 

  43.         });
    44. 

  44.     });
    45. 

    46. 

  46. </script>
    47. 

  47. </html>
    48.

效果图：

JQuery基础知识

jQuery查询结果的处理方式

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <script src="lib/jQuery_v3.5.1.js"></script>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

    10. 

  10. <div class="mot">
    11. 

  11.     <span>1</span>
    12. 

  12.     <span>2</span>
    13. 

  13.     <span>3</span>
    14. 

  14.     <span>4</span>
    15. 

  15.     <span>5</span>
    16. 

  16.     <span>6</span>
    17. 

  17. </div>
    18. 

    19. 

  19. </body>
    20. 

  20. <script>
    21. 

  21.     var spans = $("div > span");
    22. 

  22.     // 类数组
    23. 

  23.     console.log(spans);
    24. 

    25. 

  25.     // 1. toArray():将查询结果转为真正的数组
    26. 

  26.     console.log(spans.toArray());
    27. 

    28. 

  28.     // 2. $.each(): 遍历指定的对象和数组,回调的参数顺序与forEach不一样
    29. 

  29.     spans.each(function (index, value) {
    30. 

  30.         $(this).css("color", "red");
    31. 

  31.       });
    32. 

    33. 

  33.     // 3. $.map(): 处理数组中的每个元素,并将处理结果封装为新的数组返回。
    34. 

  34.     var arr = $.map(spans, function (value, index) {
    35. 

  35.         if (index % 2) return value;
    36. 

  36.       });
    37. 

  37.     console.log(arr);
    38. 

  38.     $(arr).css("color", "blue");
    39. 

    40. 

  40.     // 4. index(): 返回jQuery查询集合中的索引
    41. 

  41.     spans.click(function () {
    42. 

  42.         console.log("点击了第: ", $(this).index() + 1, " 个<li>");
    43. 

  43.     });
    44. 

    45. 

  45. </script>
    46. 

  46. </html>
    47.

效果图：

JQuery基础知识

总结

1、jQuery 宗旨: 写得更少,而做得更多，和我一样—-少说多做。
2、jQuery 常用操作有 DOM 查询, Ajax。

上一篇： jquery中隐藏元素用什么方法

下一篇： 一个完整的可运行的C源程序是由什么构成的

推荐阅读