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 计算两个整数的百分比值
Dec 26 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
使用zrender.js绘制体温单效果
Oct 31 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
php三维数组去重(示例代码)
2013/11/26 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
vuejs如何配置less
2017/04/25 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python中的rjust()方法使用详解
2015/05/19 Python
python实现浪漫的烟花秀
2019/01/30 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
python中np是做什么的
2020/07/21 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
大学生毕业自荐信
2013/10/10 职场文书
年会活动策划方案
2014/01/23 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
感恩教育活动总结
2014/05/05 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
解析redis hash应用场景和常用命令
2021/08/04 Redis
详解Python中__new__方法的作用
2022/03/31 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers