JavaEE 之 jQuery 简化 JavaScript

资料 青牛 ⋅ 于 2019-06-28 15:33:10 ⋅ 151 阅读

4.1 jQuery概述

4.1.1 什么是jQuery

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 jquery 把所有的操作都封装成相应 的方法

通俗的说jquery先写好很多的JS方法 然后我们通过外部引用 用人家已经写好的方法就可以了

它的设计思想是write less,do more(用更少的代码完成更多的功能)
file

JavaScript 是js原生技术 jQuery 框架技术(使用更简单 但是功能更丰富)

4.1.2 jQuery用途

  1. 访问和操作DOM元素(最常用) --> document对象进行了深入的封装 DOM document object Model

  2. 控制页面样式

  3. 对页面事件进行处理

扩展新的jQuery插件与Ajax技术完美结合(echarts 统计图)

总结来看

jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率

4.2 jQuery入门程序

4.2.1 下载并导入jQuery

第一步 去官网下载jquery

进入jQuery官网:jQuery
file

file
此处需要注意,jquery分为两个版本,一个开发版和一个发布版,对比如下

file
而我们使用的就是jquery-1.9.1.js 这是jquery 的版本号为1.9.1的开发版js库;

将其放入我们项目的js文件夹
file

在需要的页面引入即可
file

4.2.2 jQuery入门使用

4.2.2.1 jQuery的语法结构
file

工厂函数 $() :将DOM对象转化为jQuery对象

选择器 selector:获取需要操作的DOM 元素

方法action():jQuery中提供的方法,其中包括绑定事件处理的方法

“$”等同于“ jQuery ”

4.2.2.2 jQuery对象与DOM对象

file

4.2.2.3 DOM对象与jquery对象的转换(了解)

file
file
4.3 jQuery入门总结
file

4.4 jQuery练习:案例支持 : 优化人员管理系统的JS操作

我们使用jQuery的目的很简单就是简化我们现有操作,那么接下来我们也是按数据的 添加 修改 删除 查询 操作来看下 jQuery到底给我们做了怎么样的优化

前期准备,一定要看好是否已经引用了jquery文件
file

已经引入了没有什么问题,那么怎么看引入的是否正确呢?

执行下面的代码即可
file

如果页面可以弹出Hello,Jquery的话就说明jquery已经正常工作了,为啥?因为上面的代码

是将document对象通过工厂构造函数 $() 转换为jquery对象后调用这个对象的 ready()方法,然后在ready()方法的参 数里面写了一个

匿名JS方法编写弹窗消息,而这个ready方法就是页面加载的时候出发执行的方法,所以页面加载可以看到消息说明 jqueyr正在工作;

我们准备玩了jquery,我们就可以使用jquery完成我们的代码优化了

4.4.1 查询优化

jQuery 主要针对JavaScript进行了封装,把好多以前的属性调用都封装成了方法,所以用起来更加便捷; 那现在让我们找到我们已经写好的查询方法

file
在查询方法中jQuery可以帮助我们优化的有两处

  1. 按ID获取页面数据

以前我们是这么写的
file

现在有了jquery你就可以这么写了

file
怎么样是不是方便了不少

  1. 给标签之间的的内容赋值

以前我们是这么写的
file

现在你可以这么写
file

验证是否报错
file

功能正常,这也验证了jQuery所倡导的,用更少的代码完成更多的功能;

4.4.2 添加优化

之前的添加代码
file

现在的添加代码
file

优化了什么呢?

file
4.4.3 删除优化

删除操作中并不涉及对DOM对象的操作,所以jQuery也帮不上什么忙

4.4.4 更新优化

更新优化就很多了,我们先来看看更新优化之前的代码

展示要更新的JS

JavaScript原生的
file

此处我们需要注意一个细节,就是jQuery展示和隐藏标签也是采用的方法,如果你想隐藏某个标签

$(selector).hide();

如果你想显示某个标签

$(selector).show();

举个例子:

JavaScript原生的隐藏form表单的写法

file
jquery优化后的隐藏form表单的写法

file
怎么样是不是很灵活?

最后我们再检查检查哪里需要优化吧;

JavaScript原生的显示添加form的JS
file

jquery优化之后的

file
到此 人员管理系统的JS部分优化完毕

核心知识点 : 数据的操作方式 进行简化 ­­> 数据分析

jquery 本身是一个非常伟大的JS框架

jquery 非常简单的 document 操作 ­­> 前段工程师

版权声明:原创作品,允许转载,转载时务必以超链接的形式表明出处和作者信息。否则将追究法律责任。来自海牛部落-青牛,http://hainiubl.com/topics/36800
点赞
成为第一个点赞的人吧 :bowtie:
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,可用Emoji的自动补全, 在输入的时候只需要 ":" 就可以自动提示了 :metal: :point_right: 表情列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif,教程
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter