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 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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函数
2011/05/31 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python中defaultdict的用法详解
2017/06/07 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
学校后勤人员职责
2013/12/27 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
雷锋电影观后感
2015/06/10 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android