- 浏览: 463785 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuan_bin1990:
您好,请问下demo如何运行啊,准备研究研究,但不知道入口啊。 ...
ssh2(struts2+spring2.5+hibernate3.3)自动生成代码程序 -
luyulong:
[b][/b][i][/i][ ...
jQuery进度条插件 jQuery progressBar -
txin0814:
mark..
读取文件目录 -
vurses:
[align=center][color=red][size= ...
include 与 jsp:include区别 -
Roshan2:
http://lijiejava.iteye.com/blog ...
Spring AOP 入门实例
一、简介
1.1、概述
随着WEB2.0及 ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、 Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中
能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需 求而非实现细节上,从而提高项目的开发速度。
jQuery是继prototype 之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
它具有如下一些特点:
1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离,便于代码和维护和修改。
7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。
jQuery的设计会改变你写JavaScript代码的方式,降低你学习使用JS操作网页的复杂度,提高网页JS开发效率,无论对于js初学者还是资深专家,jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同的Web应用程序中。
官方站点:http://jquery.com/ 中文站点:http://jquery.org.cn/
1.2、目的
通过学习本文档,能够对jQuery有一个简单的认识了解,清楚JQuery与其他JS框架的不同,掌握jQuery的常用语法、使用技巧及注意事项。
二、使用方法
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如:
引入之后便可在页面的任意地方使用jQuery提供的语法。
三、学习教程及参考资料
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程:《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
(说明:以上文档都放在了【附件】中)
四、语法总结和注意事项
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。有如下两种方法:
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("new content");
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("new content");
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content
$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300
$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法
5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容
6、扩展我们需要的功能
$.extend({
min: function(a, b){return a b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
$("p").trigger("click"); //触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于:
var tempArr=[0,1,2];
for(var i=0;i 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim(" hello, how are you? "); //返回"hello,how are you? "
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
如:
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
发表评论
-
js技巧
2010-06-16 21:50 765事件源对象 event.srcElement.tagName ... -
js操作table(创建并设置样式)与图片控制
2010-06-16 21:29 1448一、操作table Html代码 .Ta ... -
js得到窗口/对象尺寸/刷新父页面的多种方法
2010-06-16 21:27 1419网页可见区域宽:document.body.clientWid ... -
js之类型转换与引用类型(Boolean/Number/String)
2010-06-16 21:26 1252一、类型转换 1.转换成 ... -
js之本地对象(Array/Date)
2010-06-16 21:26 955一、Array类 1.创建Array对 ... -
js之自定义对象/URI编码
2010-06-16 21:25 1033一、定义对象 1.对象初始化器方式 格式:objectNam ... -
js之正则表达式
2010-06-16 21:22 969一、RegExp 1.定义 Java ... -
javascript keyCode
2010-06-16 21:21 708keycode 8 = BackSpace BackS ... -
JavaScript实用小技巧
2010-06-16 21:17 9191. oncontextmenu="window.e ... -
js日期时间函数(经典+完善+实用)
2010-06-16 20:55 744Date.prototype.isLeapYear 判断闰年D ... -
jQuey语法总结和注意事项
2010-06-16 20:51 10601、关于页面元素的引用 通过jquery的$()引 ... -
Javascript技巧
2010-05-19 16:39 6931. oncontextmenu="window.e ... -
ajax 夸域取数据
2010-05-09 18:46 824package org.test; impor ... -
页面校验通用js
2010-04-25 22:06 827/***************************** ... -
字符串转换成json的三种方式
2010-04-10 09:29 980使用ajax的开发项目过程中,经常需要将json格式的字符串返 ... -
js function汇总
2010-04-10 08:55 9661。无对话框关闭窗口 Js代码 wind ... -
JSEclipse 在线安装
2009-11-30 16:30 1266JSEclipse是个Eclipse下的免费Javascrip ... -
精通 JS正则表达式
2009-11-16 12:14 754正则表达式可以: •测试字符串的某个模式。例如,可以对一个输入 ... -
js创建表格
2009-09-28 16:17 2497添加table <table class=& ... -
子窗体于父窗体之间值的传递
2009-09-28 16:15 1158其中window.parent相对于框架(iframe )来 ...
相关推荐
该项目是一款基于Vue、JavaScript、HTML和CSS构建的myshop电商平台设计源码,总计包含94个文件,涵盖32个PNG图片、22个JavaScript文件、13个Vue组件文件、13个JPG图片文件、3个GIF图片文件、3个SCSS样式文件,以及其他必要的配置和管理文件。
基于c语言的对自己电脑系统测试.zip
基于Labview的--转子动平衡测控系统
基于c语言的青蛙过河小游戏.zip
酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统-酒店管理系统 1、资源说明:酒店管理系统源码,本资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 2、适用人群:计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者,作为参考资料,进行参考学习使用。 3、资源用途:本资源具有较高的学习借鉴价值,可以作为“参考资料”,注意不是“定制需求”,代码只能作为学习参考,不能完全复制照搬。需要有一定的基础,能够看懂代码,能够自行调试代码,能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件: ① 系统环境:Windows ② 开发语言:Java ③ 框架:SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDE
本项目为基于DWR技术的Java与JavaScript无刷新聊天室设计源码,包含31个文件,涵盖9个Java源文件、4个JavaScript脚本文件、4个JAR库文件、3个XML配置文件以及其他相关文件,旨在实现一个无需刷新的即时聊天功能。
CSDN海神之光上传的全部代码均可运行,亲测可用,直接替换数据即可,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,可私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描博主博客文章底部QQ名片; 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
基于asp.net的兼职就业平台设计与实现.docx
手写数字识别
2024C++期末大作业-英语翻译机.zip 电子词典模拟软件 1.创建关键词中英文词典 2.显示关键词中英文词典 3.输入英文关键字,查阅英汉词典 4.输入中文关键字,查阅英汉词典 5.退出
在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统-在线考试系统 1、资源说明:在线考试系统源码,本资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 2、适用人群:计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者,作为参考资料,进行参考学习使用。 3、资源用途:本资源具有较高的学习借鉴价值,可以作为“参考资料”,注意不是“定制需求”,代码只能作为学习参考,不能完全复制照搬。需要有一定的基础,能够看懂代码,能够自行调试代码,能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件: ① 系统环境:Windows ② 开发语言:Java ③ 框架:SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDE
在Java中使用DES进行加解密的示例DESUtil,注意,DES算法为不安全算法,主要因为它的56位密钥太短,容易被暴力破解。建议使用更安全的加密算法,如AES。
重要说明:图片数量太多,图片分辨率都调整为104x128 数据集类型:图像分类用,不可用于目标检测无标注文件 数据集格式:仅仅包含jpg图片,每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数):225639 分类类别数:262 更多信息:https://blog.csdn.net/FL1623863129/article/details/142592763
VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip VMware-player-full-17.5.0-22583795.zip
3d_magic.apk
旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统-旅游管理系统 1、资源说明:旅游管理系统源码,本资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 2、适用人群:计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者,作为参考资料,进行参考学习使用。 3、资源用途:本资源具有较高的学习借鉴价值,可以作为“参考资料”,注意不是“定制需求”,代码只能作为学习参考,不能完全复制照搬。需要有一定的基础,能够看懂代码,能够自行调试代码,能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件: ① 系统环境:Windows ② 开发语言:Java ③ 框架:SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDE
oracle的OCI库文件19.23,dbru,java
本文件是一份关于 Matlab 软件基础入门的文本文件,旨在为初学者提供基本的 Matlab 软件使用方法和技巧。文件内容涵盖了 Matlab 的基本概念、语法规则、常用函数以及一些实用的编程技巧。通过本文件的学习,读者可以快速掌握 Matlab 软件的基本操作,为进一步学习和应用 Matlab 软件打下坚实的基础。 本文件的内容丰富、结构清晰,适合初学者系统学习和掌握 Matlab 软件的基础知识和技能。同时,本文件也提供了一些实用的编程技巧和应用实例,帮助读者更好地理解和应用 Matlab 软件。
ofd阅读器版本 3.0
漏洞 Chrome 浏览器惊现严重漏洞