大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、jQuery的概念

1、什么是 JavaScript 库?

JavaScript 开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

把一些常用到的方法写到一个单独的 js 文件,使用的时候直接去引用这js文件就可以了,这个 js 文件就是 JavaScript 库。(比如我们自己写的 common.js 就是一个 js 库。)

2、常见的 JS 库

常见的JavaScript 库:jQuery、Prototype、MooTools。其中jQuery是最常用的一个。

3、什么是 jQuery?

jQuery 就是一个 JavaScript 函数库,没有什么特别的。里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的 common.js。因此我们学习jQuery,其实就是学习jQuery这个 js 文件中封装的一大堆方法。

4、jQuery 能做什么?

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

5、为什么要学 jQuery?

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

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

jQuery的核心特性可以总结为:

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

极大地简化了 JavaScript 编程。

6、jQuery下载

jQuery官网

二、jQuery 的顶级对象

jQuery 中的顶级对象是:jQuery,可以使用$ 代替。

jQuery中所有属性和方法都可以使用$.属性或方法 的方式来使用。

大多数情况下,jQuery 中几乎都是方法,属性很少。

三、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 对象,可以更方便的操作页面元素。

1、案例:网页开关灯(使用类选择器方式)

<!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>

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

2、className 是DOM对象的方法,jQuery不能调用。

3、hasClass 是否有某个类;removeClass 移除某个类;addClass 增加一个类。

2、案例:网页开关灯(使用CSS方式)

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

1、this 是 DOM 的属性,所以要转成 jQuery 属性。

2、jQuery 控制 css 样式使用 css("属性名字","属性值") 方法,属性的名字可以是DOM中的写法(比如:backgroundColor),可也以使用css样式写法(比如:background-color)。

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

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

四、页面加载事件

1、DOM中页面加载事件

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

由于这是赋值的方式,所以只会打印第二个,第一个被覆盖了。

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

2、jQuery中页面加载事件

2.1、方式一:DOM转jQuery方式

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

load:1 和 load:2 都会打印,因为这相当于方法调用,调用多少次执行多少次。

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

2.2、方式二:DOM转jQuery方式

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

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

特点:不是整个页面的所有元素,而是页面中的基本元素加载完后就执行,所以比使用 load 的方式快一些。

2.3、方式三:jQuery方式(推荐)

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

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

$ 也可以换成 jQuery。

特点:不是整个页面的所有元素,而是页面中的基本元素加载完后就执行,所以比使用 load 的方式快一些。

从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件的更多相关文章

  1. jQuery 页面加载事件

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload ...

  2. Web访问原理-从输入URL到页面加载完成的过程中都发生了什么事情?

    从输入URL到页面加载完成的过程中都发生了什么事情?--这是一个经典的面试题: 主要是关于计算机网络方面的知识基础,对于非科班计算机自学web开发的同学可能理解起来就很困难. StackOverFlo ...

  3. 所有DOM元素加载之前执行的页面加载事件[jquery]

    <script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...

  4. web开发的性能准则(减少页面加载时间方面)

    准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...

  5. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  6. 从零开始学 Web 之 jQuery(二)获取和操作元素的属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. node.js中fs文件系统模块的使用

    node.js中为我们提供了fs文件系统模块,实现对文件或目录的创建,修改和删除等操作. fs模块中,所有的方法分为同步和异步两种实现. 有 sync 后缀的方法为同步方法,没有 sync 后缀的方法 ...

  2. js 库

    plupload.full.min.js 前端上传利器 jQuery WeUI - V1.0.1 微信公众号开发利器

  3. VS中程序包错误,引用错误该如何解决

    1.找到包的文件.packages.config 对应于: 2.删除掉 packages.config 报错的项.然后再重新添加一次.就没有解决的不了的问题. 是不是很爽.....

  4. docker 镜像存放路径的修改

    可以通过在启动时使用--graph参数来指定存储路径. 或者使用systemd来管理服务, 就在/lib/systemd/system/docker.service中修改这一行: 1.ExecStar ...

  5. [字符串][NOIP2012]Vigenère密码

    Vigenère密码 题目描述 16世纪法国外交家Blaise de Vigenère设计了一种多表密码加密算法——Vigenère密码.Vigenère密码的加密解密算法简单易用,且破译难度比较高, ...

  6. Linux学习小记(1)

    学习Linux,进行阶段性总结,权当笔记方便日后翻阅和查看. 在此特别推荐peida的博客,他的有关Linux的理解个人感觉深入浅出,很适合入门的小白来理解和学习. 说一说针对IP的修改,ifconf ...

  7. HBase总结(十一)hbase Java API 介绍及使用示例

    几个相关类与HBase数据模型之间的对应关系 java类 HBase数据模型 HBaseAdmin 数据库(DataBase) HBaseConfiguration HTable 表(Table) H ...

  8. 2019.02.16 bzoj5466: [Noip2018]保卫王国(链分治+ddp)

    传送门 题意简述: mmm次询问,每次规定两个点必须选或者不选,求树上的带权最小覆盖. 思路: 考虑链分治+ddpddpddp 仍然是熟悉的套路,先考虑没有修改的状态和转移: 令fi,0/1f_{i, ...

  9. Noxim Overview

    PE+Router= Tile Node Architectural Elements: Buffer.h, Router.h, LocalRoutingTable.h, Tile.h, NoC.h, ...

  10. 2019swpuj2ee作业2--HTTP协议

    简介: HTTP协议:超文本传输协议.它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器.在七层模型中属于应用层.是一种请求/响应式的协议. 主要特点:   (1)支持客户端/服 ...