从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

时间 2019-11-17

标签开始 web jquery 概念页面加载事件栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！css

1、jQuery的概念

一、什么是 JavaScript 库？

JavaScript 开发的过程当中，处理浏览器的兼容很复杂并且很耗时，因而一些封装了这些操做的库应运而生。这些库还会把一些经常使用的代码进行封装。html

把一些经常使用到的方法写到一个单独的 js 文件，使用的时候直接去引用这js文件就能够了，这个 js 文件就是 JavaScript 库。（好比咱们本身写的 common.js 就是一个 js 库。）前端

二、常见的 JS 库

常见的JavaScript 库：jQuery、Prototype、MooTools。其中jQuery是最经常使用的一个。java

三、什么是 jQuery？

jQuery 就是一个 JavaScript 函数库，没有什么特别的。里面封装了一大堆的方法方便咱们的开发，其实就是一个增强版的 common.js。所以咱们学习jQuery，其实就是学习jQuery这个 js 文件中封装的一大堆方法。jquery

四、jQuery 能作什么？

jQuery 自己就是一堆 JavaScript 函数，JavaScript 是作什么的，jQuery 就是作什么的。毕竟 jQuery 知识 JavaScript 编写的函数库而已，有些功能 jQuery 没有封装，则还须要经过本身写原生 JavaScript 来实现。git

五、为何要学 jQuery？

jQuery设计的宗旨是 ' Write Less，Do More '，即倡导写更少的代码，作更多的事情。github

它封装JavaScript经常使用的功能代码，提供一种简便的操做，优化 HTML 文档操做、事件处理、动画设计和 Ajax 交互。编程

jQuery的核心特性能够总结为：浏览器

具备独特的链式语法和短小清晰的多功能接口；
具备高效灵活的css选择器，而且可对CSS选择器进行扩展；
拥有便捷的插件扩展机制和丰富的插件。
兼容各类主流浏览器。

极大地简化了 JavaScript 编程。

六、jQuery下载

jQuery官网

2、jQuery 的顶级对象

jQuery 中的顶级对象是：jQuery，可使用$ 代替。

jQuery中全部属性和方法均可以使用$.属性或方法 的方式来使用。

大多数状况下，jQuery 中几乎都是方法，属性不多。

3、jQuery对象和DOM对象互转

注意：经过 DOM 方式和 jQuery 方法获取的同一个元素，不是相同的对象。

存在的问题：DOM对象调用jQuery的方法不能实现，jQuery对象调用DOM的方法也不能实现。因此要将DOM对象和jQuery对象互转。

DOM对象转jQuery对象：$(DOM对象)

jQuery对象转DOM对象：jQuery对象[0]

为何 DOM 和 jQuery 要互转，最开始就用 jQuery很差吗？

由于有一些兼容或功能没有封装在 jQuery 里面，必须经过原生 js 操做，因此须要 jQuery对象转DOM对象。当这一步操做完以后，再次转回 jQuery 对象，能够更方便的操做页面元素。

一、案例：网页开关灯（使用类选择器方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls {
            background-color: #000;
        }
    </style>
</head>
<body>

<input type="button" value="开/关" id="btn">

<script src="common.js"></script>
<script src="jquery-1.12.4.js"></script>
<script>
    // DOM原生方式
    document.getElementById("btn").onclick = function (ev) {
        if(document.body.className !== "cls") {
            document.body.className = "cls";
        } else {
            document.body.className = "";
        }
    }

    // jQuery转DOM方式
    $("#btn").click(function () {
        if ($("body")[0].className === "cls") {
            $("body")[0].className = "";
        } else {
            $("body")[0].className = "cls";
        }
    });

    // jQuery方式
    $("#btn").click(function () {
        if ($("body").hasClass("cls")) {
            $("body").removeClass("cls");
        } else {
            $("body").addClass("cls");
        }
    });

</script>
</body>
</html>

一、jQuery的方方式绑定事件没有 on

二、className 是DOM对象的方法，jQuery不能调用。

三、hasClass 是否有某个类；removeClass 移除某个类；addClass 增长一个类。

二、案例：网页开关灯（使用CSS方式）

$("#btn").click(function () {
  if($(this).val() === "关灯") {
    $("body").css("backgroundColor", "#000");
    $(this).val("开灯");
  } else {
    $("body").css("backgroundColor", "");
    $(this).val("关灯");
  }
});

一、this 是 DOM 的属性，因此要转成 jQuery 属性。

二、jQuery 控制 css 样式使用 css("属性名字","属性值")方法，属性的名字能够是DOM中的写法（好比：backgroundColor），可也以使用css样式写法（好比：background-color）。

三、jQuery对象.val();表示获取该对象 value 属性的值；

四、jQuery对象.val("值");表示设置该对象 value 属性的值；

4、页面加载事件

一、DOM中页面加载事件

window.onload = function (ev) {
  console.log("1");
};
window.onload = function (ev) {
  console.log("2");
};

因为这是赋值的方式，因此只会打印第二个，第一个被覆盖了。

特色：整个页面的全部元素，文本，图片等所有加载完才会执行。

二、jQuery中页面加载事件

2.一、方式一：DOM转jQuery方式

$(window).load(function () {
  console.log("load:1");
});
$(window).load(function () {
  console.log("load:2");
});

load:1 和 load:2 都会打印，由于这至关于方法调用，调用多少次执行多少次。

特色：整个页面的全部元素，文本，图片等所有加载完才会执行。

2.二、方式二：DOM转jQuery方式

$(document).ready(function () {
  console.log("ready:1");
});
$(document).ready(function () {
  console.log("ready:2");
});

ready:1 和 ready:2 都会打印。

特色：不是整个页面的全部元素，而是页面中的基本元素加载完后就执行，因此比使用 load 的方式快一些。

2.三、方式三：jQuery方式（推荐）

$(function () {
  console.log("jQuery:1");
});
$(function () {
  console.log("jQuery:2");
});

jQuery:1 和 jQuery:2 都会打印。

$ 也能够换成 jQuery。

特色：不是整个页面的全部元素，而是页面中的基本元素加载完后就执行，因此比使用 load 的方式快一些。