jQuery初级入门

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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,如果代码复杂的话,一定要给代码加上注释,便于日后阅读和分享

 

总之,养成良好的编码风格和习惯

 

 

Task2jQuery对象和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前面没有空格

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值