从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在这里我会从 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对象和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的概念，页面加载事件的更多相关文章
- jQuery 页面加载事件
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload ...
- Web访问原理-从输入URL到页面加载完成的过程中都发生了什么事情？
从输入URL到页面加载完成的过程中都发生了什么事情?--这是一个经典的面试题: 主要是关于计算机网络方面的知识基础,对于非科班计算机自学web开发的同学可能理解起来就很困难. StackOverFlo ...
- 所有DOM元素加载之前执行的页面加载事件[jquery]
<script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...
- web开发的性能准则（减少页面加载时间方面）
准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 jQuery（二）获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- [leetcode]156.Binary Tree Upside Down颠倒二叉树
Given a binary tree where all the right nodes are either leaf nodes with a sibling (a left node that ...
- Django model进阶
Django-model进阶 QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. >>> Ent ...
- Python开发——函数【装饰器、高阶函数、函数嵌套、闭包】
装饰器 装饰器本质就是函数,为其他函数添加附加功能. 原则: 不修改被修饰函数的源代码 不修改被修饰函数的调用方法 装饰器知识储备:装饰器 = 高阶函数 + 函数嵌套 + 闭包 案例:求函数运行时间! ...
- mybatis进阶-5resultMap总结
resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...
- etcd-v2第四集
coreos把etcd的image放到自家的quay.io,而不是hub.docker,或许是竞争关系,但国内下载quay.io容器极难,反正shadowsocks是下载不了. 幸好有热心爱好者搬运到 ...
- Python3实战系列之六（获取印度售后数据项目）
问题:续接上一篇.说干咱就干呀,勤勤恳恳写程序呀! 目标:此篇我们试着把python程序打包成.exe程序.这样就可以在服务器上运行了.实现首篇计划列表功能模块的第三步: 3..exe文件能在服务器上 ...
- Kali proxychains
1.什么是proxychains 在linux系统中有很多软件是不支持代理的,但是proxychains 却可以让不支持代理的软件 也能走代理通道,支持HTTP,HTTPS,SOCKS4,SOCKS5 ...
- 《Linux就该这么学》第四天课程
秦时明月经典语录: 侠道:五步之内,百人不当.十年磨剑,一孤侠道——荆轲 我发了一些课堂笔记,供你们参考 原创地址:https://www.linuxprobe.com/chapter-03.htm ...
- mark 三年工作总结
在新公司加班,正在看<HBase 权威指南>,看Michael Stack为本书写的序,介绍HBase最初的发展,Lars在HBase 使用和推广做出的贡献. 突然想到,我还有一篇工作三年 ...
- 启动 mysql 时报错
通过mysql -u用户名 -p密码 的命令连接 Mysql数据库时 报错 "can't connect to local mysql serverthrough socket'/var/ ...