21-[jQuery]-介绍，引入方式，与js的区别
1、jQuery介绍
jQury官网：https://jquery.com/
2、jQuery文件的引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的引入</title>
</head>
<body>
<div>1111</div>
</body>
<!--都是在body后面--> <!--1. 引入jQuery:-->
<script src="jquery-3.2.1.js"></script> <!--2. JQuery代码-->
<script type="text/javascript">
$(document).ready(function () {
alert(111);
})
</script>
</html>
* jquery-3.2.1.js 用在开发环境
* jquery-3.2.1.min.js 用在生产环境
网上的jQuery文件： http://libs.baidu.com/jquery/2.0.0/jquery.min.js
2、js的痛点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的痛点</title>
<style type="text/css">
div{
background-color: #1b6d85;
height: 50px;
width: 500px;
display: none;
margin-bottom: 10px;
}
</style>
</head>
<body>
<button id="btn">展示</button>
<div></div>
<div></div>
<div></div> </body> <script type="text/javascript"> //当html执行完，加载函数
window.onload = function () {
//1.获取便签
var oBtns = document.getElementById('btn');
var oDivs = document.getElementsByTagName('div'); //2.点击函数
oBtns.onclick = function () { //3.增加样式
for(var i=0; i<oDivs.length; i++){
oDivs[i].style.display = 'block';
oDivs[i].innerHTML = 'div被展示了';
}
} } </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的痛点</title>
<style type="text/css">
div{
background-color: #1b6d85;
height: 50px;
width: 500px;
display: none;
margin-bottom: 10px;
}
</style>
</head>
<body>
<button id="btn">展示</button>
<div></div>
<div></div>
<div></div> </body>
<!--外部引入式：网上连接-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--静态文件-->
<script src="jquery-3.2.1.js"></script> <script type="text/javascript"> //jQuery代码
//如果使用jQuery操作上面的案例，很简单，三句代码搞定
$(function () {
$('#btn').click(function () {
$('div').css('display','block');
$('div').html('div被展示了');
}) }) </script>
</html>
3.jQuery入口函数
// js的入口函数
<script type="text/javascript"> window.onload = function () {
alert(111);
};
</script>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
//书写jquery的方式 入口函数
$(document).ready(function () {
});
//等价于
$(function () {
})
</script>
（1）如果没有引入jquery ：$ is not defined
（2）jquery是js的一个库文件，既然是库文件，那么就会抛出来一个构造函数或者对象
4.JavaScript和jquery的区别
- Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
- jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
- jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法
（1）DOM文档加载的步骤
. 解析HTML结构。
. 加载外部脚本和样式表文件。
. 解析并执行脚本代码。
. DOM树构建完成。
$(document).ready()
. 加载图片等外部文件。
. 页面加载完毕。
window.onload()
（2）执行时间不同
.window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
如果不写 window.onload 代码的执行顺序是 从上到下
. $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
（3）编写个数不同
. window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
.$(document).ready()可以同时编写多个，并且都可以得到执行
（4）简化写法不同
. window.onload没有简化写法
.$(document).ready(function(){})可以简写成$(function(){});
21-[jQuery]-介绍，引入方式，与js的区别的更多相关文章
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- Electron中Jquery的引入方式
原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...
- Python--前端基础之JavaScript（JS的引入方式，JS的变量、常量和标识符，JS的数据类型，运算符，流程控制，JavaScript的对象）
JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...
- jQuery的封装方式与JS中new的实现原理
function jQuery() { return new jQuery.fn.init(); } jQuery.fn = jQuery.prototype = { init: function() ...
- css js 的引入方式和书写位置
css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...
- 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS 引入方式 基本数据类型 运算符 控制语句 循环 异常
一.JS引入方式 什么是JavaScript? JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览 ...
- JavaScript 基础(一) - JavaScript的引入方式，JavaScript 变量命名规则，JS 的五种基本数据类型，ECMAScript 算数运算符，逻辑运算符
JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- docker集群部署
一.使用自定义网桥连接跨主机容器 要是Linux可以工作在网桥模式,必须安装网桥工具bridge-utils,运行命令:# yum install bridge-utils 查看桥连状态:# brct ...
- [EntityFramework] 对 DateTime 类型使用 SQL 服务器时间或者字段默认值
DateTime 类型在 SQL 服务器上如果设置了默认值,在 EntityFramework 添加新行的时候想使用该默认值,则不能对新增加的实体的 DateTime 字段赋值. 但是如果新增加的实体 ...
- GBK与UTF-8编码错误转换后，无法再正确恢复
字符集错误转换导致的问题 UTF-8格式编码的字节流,按GBK字符集转换为字符串,会出现乱码,这很正常.但将其重新转为字节流,再用UTF-8字符集转为字符串,还是乱码.这就让我产生了疑惑,虽然使用错误 ...
- 前端 网络三剑客之html 01
一.引语 1.html是什么? 1.超文本标记语言(Hypertext Markup Language):简称HTML或html.是通过标签语言来标记要显示的网页中的各个部分. 2.它遵循一套浏览器的 ...
- 铁乐学python_Day41_线程01
线程概念的引入背景 进程 之前我们已经了解了操作系统中进程的概念,程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程. 程序和进程的区别就在于: 程序是 ...
- [转载]Matlab中插值函数汇总和使用说明
http://blog.sciencenet.cn/blog-457143-679275.html MATLAB中的插值函数为interp1,其调用格式为: yi= interp1(x,y,xi,' ...
- HBase HA的分布式集群部署（适合3、5节点）
本博文的主要内容有: .HBase的分布模式(3.5节点)安装 .HBase的分布模式(3.5节点)的启动 .HBase HA的分布式集群的安装 .HBase HA的分布式集群的启动 .H ...
- Uva10048 Audiophobia （Floyd）
题意:有一个无向带权图,求出两点之间路径的最大边权值最小能为多少. 思路:使用floyd算法跑一边以备查询,每一次跑的过程中dp[i][j]=min(dp[i][j],max(dp[i][k],dp[ ...
- redis-Sentinel配置
Sentinel介绍 Redis的主从模式下,主节点一旦发生故障不能提供服务,需要人 工干预,将从节点晋升为主节点,同时还需要修改客户端配置. 对于很多应用场景这种方式无法接受. Redis从 2.8 ...
- 3223. 文艺平衡树【平衡树-splay】
Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 ...