jQuery简单介绍之学习一

为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了。JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。
当前流行的 JavaScript 库有:

jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR

jQuery是继prototype之后又一个优秀的Javascript库,是一个由John Resig创建于2006年1月的开源项目。
现在的jQuery团队主要包括核心库、UI和插件等。

jQuery凭借着简洁的语法和跨平台的兼容性,极大地简化了javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。

jQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
轻量级
jQuery非常轻巧,采用Dean Edwards编写的Packer(http://dean.edwards.name/packer/)压缩后,大小不到30KB。如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。
强大的选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。
出色的DOM操作的封装

jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。

jquery的优势

可靠的事件处理机制
吸收了javascript专家Dean Edwards编写的事件处理函数的精华,使得jQuery在处理事件绑定的时候非常可靠。在预留退路、循序渐进以及非入侵式变成思想方面,jQuery做得非常不错。
完善的Ajax
使开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
不污染顶级变量
jQuery只建立一个名为jQuery对象,其所有的函数方法都在这个对象之下。
出色的浏览器兼容性

jQuery修复了一些浏览器之间的差异,使开发者不必在开展项目前建立浏览器兼容库

链式操作方式
jQuery中最有特色的莫过于它的链式操作方式 —— 即对发生在同一个jQuery对象上的一组动作,可以直接连写而无需重复获取对象。
隐式迭代 
行为层与结构层的分离
开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使jQuery开发人员和HTML或其他页面开发人员各司其职,摆脱开发冲突或个人单干的开发模式。
丰富的插件支持  后期扩展非常方便..
jQuery的易扩展性,吸引了来自全球的开发者编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持,而且还不断有新插件面世。
完善的文档

jQuery的文档非常丰富。

DOM解析HTML页面,将页面元素解释为元素节点、属性节点和文本节点。
而通过DOM解析HTML页面元素,所得到的DOM元素就是DOM对象。


DOM对象可以使用JavaScript中的方法。

* JavaScript类库(javascript框架):
* 定义:封装了很多预定义的对象和实用函数。
* 作用:能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。
* Web1.0与Web2.0:
* Web1.0:以内容为中心(门户网站)
* Web2.0:以人为中心(社交网站)
* Web3.0:基于移动互联网的社交网站
* 富客户端与瘦客户端:
* 富客户端:在瘦客户端基础上,加上增删改查功能。
* 瘦客户端:做页面数据的静态展示。
* jQuery:
* 官方团队:
* 核心研发团队:核心内容
* UI研发团队:UI设计
* 插件制作团队:支持插件
* 分类:
* Web版本:我们主要学习
* UI版本:集成UI内容
* mobile版本:针对移动开发
* qunit:用于js测试

* 版本:以下版本具体根据公司要求情况!

* 1.4.2版本:企业开发主流
* 1.8.3版本:学习研究主流
* 1.11.0版本:目前最新版本
* 2.1.0版本:目前最新版本(不再支持IE6.0\7.0\8.0等浏览器)
* 版本提供两个:
* 正常版本:代码及注释(学习研究)
* 压缩版本:代码(开发使用)GZIP
* jQuery的优势:
* 不污染顶级变量
* 顶级变量(顶级对象):在jQuery中只有一个对象,jQuery或$
* 不污染:只能做调用操作,不能做增删改操作。
* 链式操作方式:一次性得到最终结果
* 隐式迭代:只关注输入和输出内容。
* 行为层与结构层的分离
* 行为层:逻辑处理
* 结构层:HTML代码标签
* DOM对象与jQuery对象:
* DOM对象:通过DOM解析HTML页面元素,所得到的DOM元素。
* jQuery对象:通过jQuery包装DOM对象后产生的对象。(jQuery对象底层还是DOM对象)
* DOM对象转换成jQuery对象:$(DOM对象)
* jQuery对象转换成DOM对象:
* jQuery对象是一个数组对象:jQuery对象[索引值]
* jQuery提供了get(index)方法
* DOM对象与jQuery对象之间不能直接调用对方的属性和方法。
* 选择器:相当于jQuery的根基
* 九大选择器(分类)
* 学完的感受:记不住
* 建议:回去强加练习
* 要求:只要可以查找帮助文档
* DOM操作:jQuery中封装DOM(对比原生DOM的使用方法)
* 查找节点:
* 元素节点:所有的选择器
* 文本节点:text()
* 属性节点:
* attr()
* removeAttr()
* 创建节点;
* 元素节点:$(HTML代码)
* 文本节点:text()
* 属性节点:attr()
* 插入:内部与外部
* 删除节点:
* remove():删除自身节点及后代节点
* empty():删除后代节点,自身节点保留(清空)
* 复制节点:
* jQuery的clone(Boolean):表示是否复制事件。
* js的cloneNode(Boolean):表示是否复制后代节点。
* 替换节点:
* replaceWith():前面的元素是被替换元素;后面的元素是替换元素
* replaceAll():就是颠倒了的replaceWith()
* html()方法:直接操作HTML代码(等价于innerHTML属性)
* 遍历节点:
* 子节点:children()
* 父节点:parent()
* 上一个兄弟节点:prev()
* 下一个兄弟节点:next()
* 所有兄弟节点:siblings()
* find():通用遍历方法
* 包裹节点:
* wrap():分别包裹
* wrapAll():一起包裹
* wrapInner():包裹内部
* 事件处理:jQuery中的特殊事件
* Ajax操作:异步交互
* 插件:jQuery的一大特点
* 元素与节点的区别:
* 元素:HTML页面的标签内容,HTML页面中还有元素的属性,元素的文本内容。
* 节点:DOM将HTML页面的内容分成元素节点、属性节点及文本节点。

猜你喜欢

转载自blog.csdn.net/qq_30764991/article/details/80890366