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

《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所示。

点击后：

赞 (0)

相关推荐

  • JQuery入门——用bind方法绑定事件处理函数应用介绍

    JQuery入门——用bind方法绑定事件处理函数应用介绍

    1.bind()功能是为每个选择元素的事件绑定处理函数,其语法如下:bind(type, [data], fn) 其中type为一个或多个类型的字符串,如click或change,也可以自定义:可以被type调用的类型包括blur.focus.load.resize.scroll.unload.click.dbclick.mousedown等事件.参数data是作为event.data属性值传递对象的额外数据对象.参数fn是绑定到每个选择元素的事件中的处理函数. 2.示例代码: 复制代码 代码如

  • JQuery入门——事件切换之toggle()方法应用介绍

    JQuery入门——事件切换之toggle()方法应用介绍

    1.在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn.fn2.fn3.fn4等函数依次调用. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • JQuery入门——用one()方法绑定事件处理函数(仅触发一次)

    JQuery入门——用one()方法绑定事件处理函数(仅触发一次)

    1.one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:one(type, [data], fn) 其中参数type为事件类型,即需要触发什么类型的事件:参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象:fn为绑定事件时所要触发的函数. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • JQuery入门——移除绑定事件unbind方法概述及应用

    JQuery入门——移除绑定事件unbind方法概述及应用

    1.在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • JQuery入门——用映射方式绑定不同事件应用示例

    JQuery入门——用映射方式绑定不同事件应用示例

    1.通过映射的方式,给对象绑定多个事件. 2.示例代码: 复制代码 代码如下: <!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"> <hea

  • jquery入门—选择器实现隔行变色实例代码

    jquery入门—选择器实现隔行变色实例代码

    1.JQuery选择器继承了CSS.path语音的部分语法,允许通过标签名.属性名.内容对DOM元素进行快速.准确的选择. 2.JQuery选择器与JavaScript相比,具有代码简单.完善的检测机制的优势. 3.使用JQuery选择器实现隔行变色,示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T

  • JQuery入门—编写一个简单的JQuery应用案例

    一.官方网站下载:http://jquery.com 二.引入JQuery文件库 下载完后不用安装,只需将文件导入页面中即可,即在<head></head>中加入如下代码:<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script> 三.编写一个弹出对话框的简单应用. 复制代码 代码如

  • jquery入门必备的基本认识及实例(整理)

    1.Juqery是javascript的优秀框架.它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互. jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择.jQuery

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

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

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

  • 微信小程序父子组件通信详细介绍

    组件间的基本通信方式有以下几种: WXML 数据绑定:用于父组件向子组件的指定属性设置数据. 事件:用于子组件向父组件传递数据,可以传递任意数据. 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent() 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法. 父组件通过 properties 属性给子组件传递数据: // 父组件 home.wxml <search-input placeholderText="搜明星.达人">

  • jQuery源码分析之init的详细介绍

    init 构造器 由于这个函数直接和 jQuery() 的参数有关,先来说下能接受什么样的参数. 源码中接受 3 个参数: init: function (selector, context, root) { ... } jQuery() ,空参数,这个会直接返回一个空的 jQuery 对象,return this. jQuery( selector [, context ] ) ,这是一个标准且常用法,selector 表示一个 css 选择器,这个选择器通常是一个字符串,#id 或者 .cl

  • 微信 小程序开发环境搭建详细介绍

    微信 小程序开发环境搭建详细介绍

    微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

  • jquery 抽奖小程序实现代码

    jquery 抽奖小程序实现代码

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序.最后介绍了后面关于抽奖小程序的一些后面更新的方向和Math.random的一些小知识.(最终结果保存在:http://runjs.cn/detail/rq3bbhto,点击可查看效果) 下面先看一个简单的抽奖小程序的例子: html: <div class="g-lottery-box&quo

  • jQuery异步上传文件插件ajaxFileUpload详细介绍

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url   上传处理程序地址. 2,fileElementId   需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,sc

  • Android中程序的停止状态详细介绍

    很多人遇到过广播收不到的问题,比如Google Play推广安装广播没有收到等,诸如这些问题,又都是什么原因呢,这篇文章将进行回答. 从Android 3.1(HoneyComb) 也就是API 12开始,Android引入了一套新的启动控制,这就是程序的停止状态.那让我们看一下Google对于程序的停止状态的描述. 什么是程序的停止状态 复制代码 代码如下: Starting from Android 3.1, the system's package manager keeps track

  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String   canvas组件的唯一标识符 binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something w

随机推荐