
上QQ阅读APP看书,第一时间看更新
1.5 jQuery编码风格
编码风格是程序开发人员在编写源代码时形成的约定俗成的书写风格,良好的编码风格使代码具有可读性,也有利于后期的代码维护。
1.5.1 $的作用
$是jQuery程序的标志:在jQuery程序中使用最多的就是美元符$。无论是页面元素的选择器,还是功能函数的前缀,都必须使用该符号。因此,它不仅可以用作选择器,还可以用作jQuery的工具函数前缀。
1.5.2 连缀的编程模式
在对DOM元素进行多个操作时,为了避免过度使用临时变量或不必要的重复代码,在大多数jQuery代码中采用了一种称为连缀的编程模式。它可以对一个对象进行多重操作,并将操作结果返回给该对象,以便于将返回结果应用于该对象的下一次操作。下面通过示例3演示实现连缀的书写方法。
示例3:
样式代码:

结构代码:

行为代码:

运行结果如图1.5所示。

图1.5 连缀书写
由示例3可知,单击<h2>时,为它本身添加红色的背景,并为紧随其后的元素<p>添加样式,使隐藏的<p>元素显示出来,这就是jQuery的连缀模式。示例3中出现的css()方法,也是jQuery中用于进行CSS操作的方法之一,它的作用是为匹配的元素添加CSS样式。语法格式如下:

若要使用css()方法为页面中的<p>元素设置文本颜色为蓝色,可以写作:$("p").css("color","blue")。
注意
css()方法与addClass()方法的区别如下:
css()方法为所匹配的元素设置给定的CSS样式。
addClass()方法为所匹配的元素添加一个或多个类,该方法不会移除已经存在的类,仅在原有基础上追加新的类样式。
基于结构与样式分离的原则,通常在实际应用中为某元素添加样式时,使用addClass()方法比css()方法的频率高得多,因此建议使用addClass()方法为元素添加样式。