JQuery入门—JQuery程序的代码风格详细介绍


Posted in Javascript onJanuary 03, 2013

《jQuery权威指南》第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法;后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础。本节为大家介绍jQuery程序的代码风格。 

1.1.5 jQuery程序的代码风格
1.“$”美元符的使用
在jQuery程序中,使用最多的莫过于“$”美元符了,无论是页面元素的选择、功能函数的前缀,都必须使用该符号,可以说它是jQuery程序的标志。
2. 事件操作链接式书写
在编写页面某元素事件时,jQuery程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用,我们通过一个示例加以阐述。
示例1-2 jQuery事件的链式写法
(1)功能描述
在页面中,有一个<div>标记,在该标记内,包含二个<div>标记,一个为主题,另一个为内容,页面首次加载时,被包含的内容<div>标记是不可见的,当用户单击主题<div>标记时,改变自身的背景色,并将内容<div>标记显示出来。
(2)实现代码
新建一个HTML文件1-2.html,加入如代码清单1-2所示的代码。
代码清单1-2 jQuery事件的链式写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery事件的链式写法</title> 
<script language="javascript" type="text/javascript" 
src="Jscript/jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
.divFrame{width:260px;border:solid 1px #666; 
font-size:10pt} 
.divTitle{background-color:#eee;padding:5px} 
.divContent{padding:5px;display:none} 
.divCurrColor{ background-color:Red} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$(".divTitle").click(function(){ 
$(this).addClass("divCurrColor") 
.next(".divContent").css("display","block"); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="divFrame"> 
<div class="divTitle">主题</div> 
<div class="divContent"> 
<a href="#">链接一</a><br /> 
<a href="#">链接二</a><br /> 
<a href="#">链接三</a> 
</div> 
</div> 
</body> 
</html>

在上述文件的代码中,加粗的代码是链式写法。
代码功能说明:当用户单击Class名称为"divTitle"的元素时,自身增加名称为"divCurrColor"的样式;同时,将接下来的Class名称为"divContent"元素显示出来。可以看出,两个功能的实现通过"."符号链接在一起。
(3)页面效果
执行HTML文件1-2.html,实现的页面效果如图1-3所示。

JQuery入门—JQuery程序的代码风格详细介绍

点击后:

JQuery入门—JQuery程序的代码风格详细介绍

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 #Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 #Javascript
Javascript 判断是否存在函数的方法
Jan 03 #Javascript
JavaScript中“基本类型”之争小结
Jan 03 #Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 #Javascript
javascript学习(二)javascript常见问题总结
Jan 02 #Javascript
javascript学习(一)构建自己的JS库
Jan 02 #Javascript
You might like
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
提交表单时执行func方法实现代码
2013/03/17 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Python基础篇之初识Python必看攻略
2016/06/23 Python
python字典操作实例详解
2017/11/16 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python openpyxl使用方法详解
2019/07/18 Python
python找出因数与质因数的方法
2019/07/25 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python ORM编程基础示例
2020/02/02 Python
python实现飞行棋游戏
2020/02/05 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
手机业务员岗位职责
2013/12/13 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
统计员岗位职责范本
2015/04/14 职场文书
毕业生政审意见范文
2015/06/04 职场文书
python删除csv文件的行列
2021/04/06 Python
MySQL表的增删改查基础教程
2021/04/07 MySQL
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
德劲DE1102数字调谐收音机机评
2022/04/07 无线电