技术文章
当前位置:首页 > jQuery技术文章 > JQuery程序的代码风格详细介绍

JQuery程序的代码风格详解

  • 发布时间:
  • 作者:码农之家原创
  • 点击:83

这篇文章主要知识点是关于jquery入门、代码风格、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
  • 类型:前端开发大小:167.1 MB格式:PDF出版:水利水电出版社作者:阮晓龙
立即下载

更多jQuery相关的学习资源可以参阅 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所示。

 

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

点击后:

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

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jquery点击元素后滚动条滚、 同域jQuery(跨)iframe操作DO、 jQuery中Find选择器的用法和、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jquery实现显示已选用户实例方法

下一篇:jquery插件制作方法

展开 +

收起 -

JQuery代码 相关电子书
学习笔记
网友NO.622007

jquery实现div拖拽宽度示例代码

本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" titlediv width resize/title !--引用jquery-- script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"/script script type="text/javascript" function bindResize(el) { //初始化参数 var els = document.getElementById('menu').style; //鼠标的 X 和 Y 轴坐标 x = 0; //邪恶的食指 $(el).mousedown(function (e) { //按下元素后,计算当前鼠标与对象计算后的坐标 x = e.clientX - el.offsetWidth - $("#menu").width(); //在支持 setCapture 做些东东 el.setCapture ? ( //捕捉焦点 el.setCapture(), //设置事件 el.onmousemove = function (ev) { mouseMove(ev || event); }, el.onmouseup = mouseUp ) : ( //绑定事件 $(document).bind("mousemove", mouseMov……

网友NO.721643

jquery 全选、全不选、反选效果的实现代码【推荐】

jquery 全选、全不选、反选效果的实现代码【推荐】 首先:引入jquery titleharan.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse/titlemeta http-equiv="content-type"content="text/html; charset=UTF-8"/script src="/js/jquery-1.8.3.min.js"type="text/javascript"/script!-- 引入Jquery -- 样式: styletype="text/css"!--#div1{ width:980px; margin:0 auto; position:relative; text-align:left; padding-left:400px; line-height:30px; border:1px dotted #0075c5;}li{ display:block; list-style:none; float:left; position:relative; padding-left:20px;}.clr{ height:20px;}--/style body布局: divid="div1" divclass="clr"/div !--选项开始-- inputtype="checkbox"/ahref="haran.info"haran.info_脚本编程/abr/ inputtype="checkbox"/ahref="haran.info"haran.info_网站编程/abr/ inputtype="checkbox"/ahref="haran.info"haran.info_系统管理/abr/ inputtype="checkbox"/ahref="haran.info"haran.info_服务器配置/abr/ inputtype="checkbox"/ahref="haran.info"haran.info_系……

网友NO.899829

通过jquery获取上传文件名称、类型和大小的实现代码

在文件上传到服务器之前,我们可以通过jquery来获取上传文件的名称,类型和尺寸大小。 通常情况下,当用户通过input type='file'标签来上传文件时,我们可以看到上传文件的名称。HTML5 File API为我们提供了一种安全的方式,让我们在客户端访问计算机中的文件,并更好的对这些文件执行操作。 支持File API的浏览器有IE10+,Firefox4+,Safari5.0.5+,Opera11.1+和Chrome。 File API在表单的文件输入字段的基础上,又添加了一些直接访问文件信息的接口。HTML5在DOM中为文件输入元素添加了一个files集合。通过文件输入字段选择了一个或多个文件时,files集合中包含一组File对象,每个File对象对应着一个文件。每个文件都有下列的只读属性: name:本地文件系统中的文件名。 size:文件的字节数。 type:文件的MIME类型。 lastModifiedDate:文件上一次被修改的时间。 通过这个fi……

网友NO.382939

jQuery实现放大镜效果实例代码

在没给大家做详细文字说明之前,先给大家分享一段简单的jquery实现放大镜效果代码,需要的朋友可以直接拿去代码。 $(function(){var mouseX = 0; //鼠标移动的位置Xvar mouseY = 0; //鼠标移动的位置Yvar maxLeft = 0; //最右边var maxTop = 0; //最下边var markLeft = 0; //放大镜移动的左部距离var markTop = 0; //放大镜移动的顶部距离var perX = 0; //移动的X百分比var perY = 0; //移动的Y百分比var bigLeft = 0; //大图要移动left的距离var bigTop = 0; //大图要移动top的距离//改变放大镜的位置function updataMark($mark){//通过判断,让小框只能在小图区域中移动 if(markLeft0){markLeft = 0;}else if(markLeftmaxLeft){markLeft = maxLeft;}if(markTop0){markTop = 0;}else if(markTopmaxTop){markTop = maxTop;}//获取放大镜的移动比例,即这个小框在区域中移动的比例perX = markLeft/$(".small").outerWidth();perY = markTop/$(".small").outerHeight();bigLeft = -perX*$(".big")……

网友NO.606125

基于jquery的DIV随滚动条滚动而滚动的代码

核心代码: script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"/script script type="text/javascript" $(function() { $(window).scroll(function() { var top = $(window).scrollTop()+200; var left= $(window).scrollLeft()+320; $("#editInfo").css({ left:left + "px", top: top + "px" }); }); }); /script div id="editInfo" div用户名:input type="text" //div div密码:input type="text" //div div年龄:input type="text" //div div备注:input type="text" //div divinput type="button" value="保存" //div /div div /div 在线演示 http://demo.jb51.net/js/2012/jquery_demo/jquery_div.html 记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定!……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息