jQuery的发展历史:
由于javascript存在很多缺陷:
1,复杂的DOM操作
2,浏览器兼容性
为了简化javascript开发,一些javascript库诞生了,这些javascript库里,封装了很多预定义的函数和对象,而且解决了浏览器的兼容性等问题
现在流行的javascript库有哪些?
(1)prototype,最早成型的javascript库,对javascript的内置对象做了大量的扩展,但是由于他成型较早,对面向对象的思想把握不是很好
(2)Dojo,强大之处在于提供了很多其他库没有的功能,比如,离线存储的API,基于SVG/VML的矢量图形库,适用于企业级的javascript库,并且得到了IBM,SUN等公司的支持,但是缺点是:学习困难,文档不齐,最严重的就是API不稳定
(3)YUI,雅虎公司开发的,封装了一些比较丰富的功能,例如DOM操作和Ajax应用,还包括了一些CSS文件,文档完备代码规范
(4)ExtJS,简称Ext,原本是对YUI的扩展,现在可以利用jQuery等作为基础库,功能很强大,但是缺点侧重于界面,本身比较臃肿,而且不是完全免费,用于商业用途需要付费
(5)MooTools完全彻底的面向对象编程思想,核心代码8k,语法简洁,文档完备
(6)jQuery,轻量级的javascript库,强大的选择器,出色的DOM操作,事件处理,完善的浏览器兼容性
现在jQuery已经从其他库中脱颖而出,是web开发人员的最佳选择
jQuery是继prototype原型之后,又一个优秀的javascript库,由John resig创建于2006年的一个开源项目
如何学习它:
1,获取jQuery最新版本
去http://jquery.com
2,在文件中导入:
<script type="text/javascript"src="jquery/jquery-1.4.2.min.js"></script>
3,编写第一个jquery代码
编写之前,说明:
(1)在jquery中,$就是jquery的简写形式,例如$(“#content”)和 jquery(“#content”)是等价的,$.ajax和jquery.ajax是等价的
(2)这段代码类似于javascript的window.onload方法
区别在于:
(1)Window.onload 要等到文档中所有的内容加载完毕后(包括图片),才能执行
$(document).ready(); 只要DOM结构绘制完毕就执行,可能DOM元素关联的东西还没加载完
(2)window.onload不能同时编写多个,只执行第一个window.onload,$(document).ready()可以执行多个
(3)Window.onload没有简写形式,$(document).ready()有,$(function(){});
jQuery的代码风格(按照规范写代码)
便于日后维护
1,链式操作风格
注意:
(1)对于同一个对象,不超过3个操作的,可以直接写成一行
(2)同一个对象多个操作,建议每行写一个操作
2,如果代码复杂的话,一定要给代码加上注释,便于日后阅读和分享
总之,养成良好的编码风格和习惯
Task2,jQuery对象和DOM对象
一定要撇清jQuery对象和DOM对象:
DOM对象:节点树,每个节点是一个节点对象,获得方法:document.getElementById(),document.getElementsByTagName(),document.getElementsByName()
如果一个对象是jQuery对象,那么就可以使用jQuery对象里的方法,jQuery对象和DOM对象的方法一定要严格区分
(一)
jQuery对象和DOM对象的相互转换,为什么要转换呢?
不同的对象,他们的方法是不同的
在相互转换之前,先约定好定义变量的风格
(1)因为jQuery封装的一些对象,是一个数组对象,通过[index]得到相应的DOM对象
(2)通过jQuery的get(index)方法获得相应的DOM对象
(二)
DOM对象转化成jQuery对象
方法:$(DOM对象)
Task3,jQuery选择器
1,CSS(层叠样式表),使网页的结构和表现样式完全分离
设置某个元素的样式,需要先找到这个元素,那么找到这个元素的机器就是CSS选择器
(1)标签选择器 td{} li{}
(2)Id选择器 #id{}
(3)类选择器 .class{}
(4)群组选择器 td p div{}
(5)后代选择器 div p{}
(6)通配选择器 *{}
jQuery选择器:
jQuery选择器完全继承了CSS的风格,利用jQuery选择器,可以定位到指定的DOM元素
CSS选择器找到元素后添加样式,jQuery选择器找到元素后添加行为
$()
学习jQuery之前,先看几个传统的获得元素,添加事件的例子:
通过这几个案例,我们发现动态的给元素绑定事件,但是重复的使用getElementById,getElementsByTagName(),特别繁琐,接下来,我们学习一下使用jQuery进行操作
jQuery选择器:
基本选择器
层次选择器
过滤选择器
表单选择器
1,基本选择器:
(根据给定的id匹配元素)
2,层次选择器
(根据元素之间的层次关系匹配特定元素),例如后代元素,子元素,相邻元素和兄弟元素
3,过滤选择器
通过特定的过滤规则,筛选出所需的DOM元素
过滤选择器和CSS的伪类相似,都是以一个 :开头
按照过滤规则,过滤选择器分为
基本过滤,
内容过滤,
可见性过滤,
属性过滤,通过元素的属性来获取相应的元素
子元素过滤,:nth()
注意:
找到的元素的父元素的子元素
:nth-child前面没有空格

本文介绍了jQuery的发展历程及其在解决JavaScript复杂DOM操作和浏览器兼容性问题方面的优势。对比多种JavaScript库,jQuery以其轻量级、强大的选择器及优秀的浏览器兼容性成为Web开发首选。文章还概述了jQuery的学习方法和基础用法。

被折叠的 条评论
为什么被折叠?



