文档章节

9.停下来说说jquery

o
 oneboi
发布于 2016/11/25 13:06
字数 678
阅读 2
收藏 0

#1. javacript时代到jquery时代 不同浏览器对javacript解析的差异性,导致做兼容处理的成本的上升,聪明人很快发现了这个痛点,于是, 抹平浏览器差异的jQuery库出现了。

jQuery:用更少的代码,实现更强悍的功能

jQuery由一小撮对浏览器极其熟稔的极客负责抹平不同浏览器的差异,其他开发 者只需要基于jQuery进行开发,可以更好地关注业务实现,而不是把时间花在 适配不同的浏览器上。

jQuery解决一个浏览器兼容性问题

#2. 满眼的全是DOM jQuery使得开发无刷新动态页面(AJAX)或者单页应用(SPA)变得 相当简单。

标准的HTML页面是静态的,被浏览器渲染后就产生了一个DOM树 输入图片说明

jQuery让静态的文档动起来,通过提供一系列的选择符,jQuery使开发者能够 极其方便地选中一组DOM节点,对其进行操作。

这就是jQuery的开发范式。jQuery没有引入什么新的概念,只是朴素地,让你能够更简单 地、低成本地操作DOM:

  1. 用选择符选定一组DOM节点
  2. 操作选中的DOM节点,比如:修改文本、改变属性、挂接事件监听函数、变换DOM等等。
  3. 基本不用考虑跨浏览器的兼容性

#3. jquery的一个简单实例 用jQuery实现一个小时钟 我们试着用jQuery实现一个简单的时钟页面,实现思路很简单:

  1. 引入jquery库 jquery库将创建一个全局对象:$。开发者需要的API都挂接在这个对象上。 它其实是一个类工厂,负责将指定的DOM对象转化为jquery对象。

  2. 在DOM文档就绪后,启动一个定时器 使用$(document).ready()可以监听DOM文档就绪事件,通常简写成$(...)。

  3. 在定时器里更新div#clock的文本 "div#clock"是一个选择符,使用这个选择符,jquery库可以找到那个 特定的DOM对象,并将其转化为jQuery对象。

  4. jquery封装后的DOM对象有一堆的方法供你调用,我们使用text()方法更新其文本

<html>
<head>
	<!--引入jquery库,这将创建一个全局的对象:$ -->
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
	<!--div#clock作为我们的时钟模板,将被定时刷新-->
	<div id="clock"></div>
</body>
</html>


//监听DOM就绪事件
$(function(){
	//启动定时器
	setInterval(function(){
		//取当前时间
		var d = new Date();

		//使用text()方法更新DOM对象的文本内容
		$("#clock").text(d.toString());

	},1000/*1000毫秒触发1次*/);
});

© 著作权归作者所有

上一篇: 10.jQuery的不足
下一篇: 8.repeat指令
o
粉丝 2
博文 89
码字总数 29764
作品 0
昆明
私信 提问
转:为什么 $("a").click()无效。

今天做表格前台导出到xls时,想自动触发a的点击。但失败。最后找到这个文件。 我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的...

noonoo
2015/01/29
3.2K
1
北京:美空网招聘前端【学徒】程序员,公司直招!

美空网,专注二线模特艺人的互联网平台,让你称为行业明显。 我们这里上班9:30 很爽吧 ,但是我们这里下班6:30,的确有点晚。 目前我们这里只有冰箱和微波炉,以后可能还会有更多的东西! ...

谢小呆
2012/05/18
2K
34
jQuery.extend和jQuery.fn.extend的区别

jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来。很多地方说的也不详细。这里详细说说之间的区别. 工具/原料 jQuery库。 javascript 方法/步骤 我们先把jQuer...

zwjjap
2015/07/23
58
0
When jQuery miss iframe is IE

好吧,请原谅我标题党了。 但是请原谅,我遇到的问题就是这样子的,Parent页面里面有一个Child的iframe,两个页面里面都引用了jQuery,但是在第二个页面就会抛出异常(也就是说我在第二个页面...

就是我啊
2013/12/26
641
5
41个很棒的jQuery教程

这里是很棒的jQuery教程的一个大集合,并包括步骤说明。 41个jQuery教程列表如下: 1. JQuery for Absolute Beginners: The Complete Series 2.An Intensive Exploration Of jQuery 3.10 Th...

小卒过河
2011/07/23
4.3K
7

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
63
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
59
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部