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 相关文章推荐
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Javascript----文件操作
2007/01/18 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python变量作用范围实例分析
2015/07/07 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python探索之ModelForm代码详解
2017/10/26 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python socket实现简单聊天室
2018/04/01 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
wxpython布局的实现方法
2019/11/01 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
历史学专业推荐信
2013/11/06 职场文书
社区党务公开实施方案
2014/03/18 职场文书
三好学生评语大全
2014/12/29 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
浅谈Redis的几个过期策略
2021/05/27 Redis