![jQuery开发指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/891/26793891/b_26793891.jpg)
上QQ阅读APP看书,第一时间看更新
1.4 语法结构
通过“$(document).ready();”可以发现,这条jQuery语句主要包含3大部分:$()、document和ready(),分别被称为工厂函数、选择器和方法。
1.4.1 工厂函数$()
所谓工厂函数,就是指这些内建函数都是类对象。当调用它们时,实际上是创建了一个类实例,意思是当调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象。由于JavaScript本身不是严格的面向对象的语言(不包含类),所以JavaScript并没有严格的“工厂函数”,但是在JavaScript中可以利用函数模拟类。
1.4.2 选择器
选择器是jQuery最基础的功能,其基本语法如下:
![](https://epubservercos.yuewen.com/1351C6/15253390205247806/epubprivate/OEBPS/Images/Figure-T16_28324.jpg?sign=1738822836-0wk4NYl0nyQnRhQPl6pNt7GnE9lYzwBY-0-d7d3f2bde0426ead42d303f80a81c092)
ID选择器、标签选择器、类选择器的用法如下:
![](https://epubservercos.yuewen.com/1351C6/15253390205247806/epubprivate/OEBPS/Images/Figure-T16_28325.jpg?sign=1738822836-s5AEjWTtTmDwkjG7WLG8JsoECTuvQzFJ-0-896b387bacab84b2d39760cc0dd4290e)
1.4.3 事件处理方法
jQuery最重要的方法就是事件处理方法,主要用来绑定DOM元素的事件和事件处理方法。在jQuery中,还有许多基础事件,如鼠标事件(click)、键盘事件(mouseover())和表单事件(onblur)等,都可以通过这些事件方法进行绑定。
下面制作一个网站的左导航特效,当单击导航项时,为ID名是current的导航项添加class为current的类样式代码如下。
示例2:
样式代码:
![](https://epubservercos.yuewen.com/1351C6/15253390205247806/epubprivate/OEBPS/Images/Figure-T16_28326.jpg?sign=1738822836-pKApzRkHy9MXHAaNnhCusHjFr0u0PC1V-0-3603bdec40644ac5204220e4a5a8176c)
结构代码:
![](https://epubservercos.yuewen.com/1351C6/15253390205247806/epubprivate/OEBPS/Images/Figure-T17_28328.jpg?sign=1738822836-wzyYzAPMB7Hv3zXv8FtqmCymOv1RyWyM-0-bea3bbbb1353f7467a6490aba8399f57)
行为代码:
![](https://epubservercos.yuewen.com/1351C6/15253390205247806/epubprivate/OEBPS/Images/Figure-T17_28329.jpg?sign=1738822836-1z4KbvIkONsj42PE9nuCMQgp56v4Vz9i-0-b84bac6310ad8f26e42102db25ac93ea)
运行结果如图1.4所示。
![](https://epubservercos.yuewen.com/1351C6/15253390205247806/epubprivate/OEBPS/Images/Figure-P17_1679.jpg?sign=1738822836-SfN52J4r7KNsNTbJRWdwI2NmQsWrkUkT-0-7243316c0f5ed9ed55571db2d52db590)
图1.4 左侧导航特效
addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是为每个匹配的元素添加指定的样式类名。语法格式如下:
![](https://epubservercos.yuewen.com/1351C6/15253390205247806/epubprivate/OEBPS/Images/Figure-T17_28330.jpg?sign=1738822836-pFmfhRi8HO0kxqp3zlFIotnnKsy9LobX-0-8c92eb4fc60fa374f19d4042f4c8f76c)
其中,样式名可以是一个,也可以是多个,多个样式名需要用空格隔开。
注意
addClass选择器与使用选择器获取DOM元素不同,获取ID为current的元素时,current前需要加ID的符号#;而使用addClass()方法添加class为current的类样式时,该类名前不带有类符号“.”。