源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-11-23 11:25 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JQuery入门—JQuery程序的代码风格详细介绍
《jQuery权威指南》第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法;后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础。本节为大家介绍jQuery程序的代码风格。  [b]1.1.5 jQuery程序的代码风格[/b] [b]1.“$”美元符的使用[/b] 在jQuery程序中,使用最多的莫过于“$”美元符了,无论是页面元素的选择、功能函数的前缀,都必须使用该符号,可以说它是jQuery程序的标志。 [b]2. 事件操作链接式书写[/b] 在编写页面某元素事件时,jQuery程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用,我们通过一个示例加以阐述。 [b]示例1-2 jQuery事件的链式写法[/b] [b](1)功能描述[/b] 在页面中,有一个<div>标记,在该标记内,包含二个<div>标记,一个为主题,另一个为内容,页面首次加载时,被包含的内容<div>标记是不可见的,当用户单击主题<div>标记时,改变自身的背景色,并将内容<div>标记显示出来。 [b](2)实现代码[/b] 新建一个HTML文件1-2.html,加入如代码清单1-2所示的代码。 代码清单1-2 jQuery事件的链式写法
[u]复制代码[/u] 代码如下:
<!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"元素显示出来。可以看出,两个功能的实现通过"."符号链接在一起。 [b](3)页面效果[/b] 执行HTML文件1-2.html,实现的页面效果如图1-3所示。 [img]http://files.jb51.net/file_images/article/201301/2013010315262084.jpg[/img] 点击后: [img]http://files.jb51.net/file_images/article/201301/2013010315262085.jpg[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部