jQuery-初识jQuery

2024-03-22 14:58:10

看此文章前必须先掌握JavaScript

JQuery 是什么？

jQuery 是一款优秀的 JavaScript 库，从命名可以看出 jQuery 最主要的用途是用来做查询（jQuery=js+Query）.
在 jQuery 官方 Logo 下方还有一个副标题（write less, do more）, 体现了 jQuery 除了查询以外,还能让我们对 HTML 文档遍历和操作、事件处理、动画以及 Ajax 变得更加简单

如何使用JQuery？

原生JS的固定写法

window.onload = function (ev) { 
	alert("hello word"); }

jQuery的固定写法

$(document).ready(function () {
    alert("hello word");
});

体验 JQuery

原生 JS 设置背景

window.onload = function () {
  var div1 = document.getElementsByTagName("div")[0];
  var div2 = document.getElementsByClassName("div2")[0];
  var div3 = document.getElementById("div3");
  div1.style.backgroundColor = "red";
  div2.style.backgroundColor = "green";
  div3.style.backgroundColor = "yellow";
};

使用 jQuery 设置背景

$(function () {
  var $div1 = $("div");
  var $div2 = $(".div2");
  var $div3 = $("#div3");
  $div1.css({
    backgroundColor: "red",
    width: "200px",
    height: "300px",
  });
  $div2.css({
    backgroundColor: "green",
  });
  $div3.css({
    backgroundColor: "yellow",
  });
});

为什么要使用 JQuery？

强大选择器: 方便快速查找 DOM 元素
- 如上面实例所展示一样，通过 jQuery 查找 DOM 元素要比原生 js 快捷很多
- jQuery 允许开发者使用 CSS1-CSS3 几乎所有的选择器,以及 jQuery 独创的选择器

链式调用: 可以通过.不断调用 jQuery 对象的方法

如上面实例所展示一样，jQuery 可以通过.（点）.不断调用 jQuery 对象的方法，而原生 JavaScript 则不一定

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // 报错,必须分开写
    div[0].style.backgroundColor = "red".width = 200+"px";
//    div[0].style.width = 200+"px";

    // 2.jQuery
    $(document).ready(function () {
    // 不报错,后面还可以接着继续写
        $("div").eq(1).css('background', 'yellow').css('width', '200px');
    });
</script>

隐式遍历(迭代): 一次操作多个元素

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
//    div.style.backgroundColor = "red";// 无效
    for(var i = 0; i<div.length; i++){
        div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
        // 隐式遍历(迭代)找到的所有div
        $("div").css('background', 'yellow');
    });
</script>

读写合一: 读数据/写数据使用是一个函数

<script>
    $(document).ready(function () {
        // 读取数据
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 写入数据
        $("div").eq(0).text("新的数据");
    });
</script>

事件处理
DOM 操作(C 增 U 改 D 删)
样式操作
动画
丰富的插件支持
浏览器兼容(前端开发者痛点)

如何使用jQuery？

下载jQuery库
- 下载地址: http://code.jquery.com/
引入下载的jQuery库

<head>
    <meta charset="UTF-8">
    <title>01-初识jQuery</title>
    <script src="code/js/jquery-1.12.4.js"></script>
</head>

编写jQuery代码

<script>
    $(document).ready(function () {
      // 所有jQuery代码写在这里面
         alert("hello LNJ");
    });
</script>