微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > jQuery入门基础

博主信息

博文 62

粉丝 7

访问量 74180

专题推荐

更多>

jQuery入门基础

jQuery就是一个由JavaScript编写的轻量库，简单的说就是封装了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。

1. 配置 jQuery 本地编程环境

官网下载: jQuery 下载
CDN:Bootstrap 中文网,又拍云
Composer: composer require components/jquery
CDN 与官网下载到本地的对比
- 官网下载总是可以获取最新版本,如果网站需要离线浏览只能选择它, 但资源下载会延缓网站打开速度
- CDN 可以让用户选择最近的节点下载,并且用户浏览器可能在访问其它站点时已经缓存了这个库,速度很快
composer 下载的 jQuery,就像一个普通文件一样,直接用<script src=""></script>引入

<!-- 以下为本地的引用方法 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
</body>
</html>

2. 熟悉\$()工厂函数的四种使用场景

2.1 $(选择器, 上下文)或者jQuery(selector,context)

简要的说是：接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象

    // $(): 工厂函数
    // 基本语法: $(选择器).操作();
    // 1. $(选择器, 上下文)或者jQuery(selector,context): 返回jQuery对象
    // 原生
    document.querySelectorAll("li").forEach(function (item) {
      item.style.color = "red";
    });
    // jquery
    $("li").css("color", "green");
    //   $("li", "#first").css("color", "blue");
    $("#first li").css("color", "red");

2.2 $(js对象)或者jQuery(js对象)

    // 2. $(js对象), 返回一个jQuery对象, 将js对象包装成JQ对象
    var lis = document.querySelectorAll("#second li");
    lis.forEach(function (item) {
      item.style.backgroundColor = "yellow";
    });
    //   lis===> jQuery对象
    $(lis).css("background-color", "cyan");

2.3 $(html文本)或者jQuery(html文本)

    // 3. $(html文本), 将html文本包装成一个jQuery对象并返回
    // html文本:  hello不是,   <p>hello</p>是
    $("<h3>Laravel开发</h3>").insertBefore("#first");

2.4 $(callback)或者jQuery(callback)

    // 4. $(callback): 当html文档结构加载完成后就会立即执行这个回调
    $(function () {
      $(document.body).css({
        "background-color": "wheat",
        "font-size": "18px",
      });
    });

3. 实例演示对 jQuery 查询结果的处理方式

3.1 toArray():将查询结果转为真正的数组

// 1. toArray():将查询结果转为真正的数组
  var lis = $("ul > li");
    cl(lis);
    cl(lis.length);
    cl(lis.get(3));
    for (var i = 0; i < lis.length; i++) {
      // 原生
      lis.get(i).style.color = "red";
    }
    lis.toArray().forEach(function (item, index) {
      if (index >= 2) cl("元素" + index + " : " + item);
    });

3.2 $.each()

  // 2. $.each(): 回调的参数顺序与forEach不一样, $().each(callback)
    lis.each(function (index, value) {
  // 原生
  this.style.color = "green";
  jQuery
      $(this).css("color", "blue");
    });

3.3 $.map()

  // 3. $.map(), 必须要有返回值, 回调参数的参数与$.each()的回调参数的参数完全相反
    var arr = $.map(lis, function (value, index) {
      if (index % 2) return value;
    });
    cl(arr);
    cl($(arr));
    $(arr).css("color", "red");

3.4 index(): 返回jQuery查询集合中的索引

  // 4. index(): 返回jQuery查询集合中的索引
  jQuery对象是一个类数组,具有从0开始递增的正整数索引,并有一个length属性
  cl(lis);
  lis.click(function () {
    cl("点击了第: ", $(this).index() + 1, " 个<li>");
  });