首页 前端知识 我耀学IT: Jquery-JavaScript代码库-初识篇

我耀学IT: Jquery-JavaScript代码库-初识篇

2024-02-23 11:02:43 前端知识 前端哥 10 59 我要收藏

1.1 计算机基础

1.1.1 硬件:

硬盘:计算机永久存储数据的载体,所有计算机所要使用的信息都存储在这里

内存:计算机暂时存储数据的载体,主要负责将数据从硬盘中传输到CPU中,平衡速率差

CPU:计算机的核心,大脑,主要处理单元,所有的信息都由CPU进行运算得出结果

[我耀学IT]  硬件相当于人的身体,而软件相当于人的灵魂

1.1.2软件:

客户端应用

客户端应用指的是通过在电脑或是移动设备中安装对应的客户端,用户通过打开并操作客户端进行的软件操作,如:穿越火线、刺激战场、微信...

CS软件 : client-->server

互联网应用-我们的未来方向

互联网应用指的是通过浏览器输入网站地址进行的软件操作,如:淘宝、京东、英雄联盟官网、王者荣耀抽奖小程序...

例1:游戏

浏览器现在已经有成千上万款游戏,诸如“1刀999”、“贪玩黄月”等,轻量级的游戏也成为了主流。

例2:应用

电商、管理系统、浏览器应用数不胜数,从互联网概念提出到现在各类软件陆续都转变成了以浏览器为载体。

BS软件:browser-->server

例1:京东商城

例2:网上移动营业厅

1.1.3常用快捷功能键:

全选 Ctrl+A

复制 Ctrl+C

粘贴 Ctrl+V

剪切 Ctrl+X

撤销 Ctrl+Z

保存 Ctrl+S

反撤销 Ctrl+Y

1.2 初始JQuery

1.2.1 简介

JQuery是一个JavaScrpit函数库

JQuery是一个轻量级的"写的少,做的多"的JavaScript库。

JQuery库包含以下功能:

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

提示: 除此之外,JQuery还提供了大量的插件。

1.2.2 JQuery是什么

JQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。JQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做 更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

JQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。JQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.2.3 为什么要使用JQuery

目前网络上有大量开源的 JS 框架, 但是 JQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。很多大公司都在使用 JQuery, 例如:

Google Microsoft IBM Netflix

1.3 环境介绍

1.3.1安装HBuilder X开发工具

1.4 案例编写

1.4.1 使用HBuilder X编译第一个JQuery程序

需求:

使用编辑器完成第一个JQuery程序

*实现步骤:*

在HBuilder X中新建一个项目

打开index.html页面

在<body></body>标签中写入一个段落内容

通过JQuery语句对该段落实现一个隐藏的功能

涉及知识点

(1).网页中添加JQuery

1>1> JQuery 下载 JQuery 库

有两个版本的 JQuery 可供下载:

1> Production version - 用于实际的网站中,已被精简和压缩。

2> Development version - 用于测试和开发(未压缩,是可读的代码)

以上两个版本都可以从 JQuery 中下载。

JQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

<head> 

<script src="jquery-1.8.3.min.js"></script> 

</head>

提示: 将下载的文件放在网页的同一目录下,就可以使用JQuery。

2>从 CDN 中载入 JQuery, 如从 Google 中加载 JQuery

如果不希望下载并存放 JQuery,那么也可以通过 CDN(内容分发网络) 引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,

如果你站点用户是国外的可以使用谷歌和微软。

Staticfile CDN:

<head> 
​
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 
​
</script> 
​
</head>

百度 CDN:

<head> 
​
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 
​
</script> 
​
</head>

又拍云 CDN:

<head> 
​
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">     
​
</script> 
​
</head>

新浪 CDN:

<head> 
​
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">  
​
</script> 
​
</head>

Google CDN:

<head> 
​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
​
</script> 
​
</head>

不大推荐使用Google CDN来获取版本,因为Google产品在中国不稳定

Microsoft CDN:

<head> 
​
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">
​
</script> 
​
</head>

优势:

许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 JQuery。所以结果是,当他们访问您的站点时,会从缓存中加载 JQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 JQuery 使用的版本

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2558.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!