- 浏览: 287000 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
cheetah_ysc:
不错不错,我喜欢!
Java固定时间间隔执行 -
voyage_mh:
阿选百度竟然一下可以吧你百度出来
使用DWR注解Annotation
字符串,数组和对象相关的工具方法
<html>
<head>
<base href="<%=basePath%>">
<title>字符串,数组和对象相关的工具方法</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<script type="text/javascript">
//访问浏览器属性
for ( var key in $.browser) {
document.writeln("当前浏览器的" + key + "属性为:" + $.browser[key] + "<br />");
}
//去除字符串前后的空白
document.writeln("$.trim(' ddd'));的结果是" + $.trim(" ddd") + "<br />");
//遍历数组
$.each( [ "java", "ajax", "java ee" ], function(index, val) {
document.writeln("['java' , 'ajax' ,'java ee']的第" + index + "个元素为:"
+ val + "<br />");
});
//以指定函数过滤数组
var grepResult = $.grep( [ "java", "ajax", "java ee" ],
function(val, index) {
//当数组元素的字符个数大于5时被保留
return val.length > 5;
});
document.writeln("['java' , 'ajax' ,'java ee']里数组元素的字符个数大于5的还有:"
+ grepResult + "<br />");
//以旧数组创建新数组
var mapResult = $.map( [ "java", "ajax", "java ee" ], function(val, index) {
//当数组元素和索引值连缀在一起作为新的数组元素
return val + index
});
document.writeln("以['java' , 'ajax' ,'java ee']创建的新数组为:" + mapResult);
//创建div元素
var div = $("<div>aa<div>");
//以相同的两个div创建数组
var divArr = [ div, div ];
document.writeln("divArr.length的值为:" + divArr.length + "<br />");
//执行$.unique去除重复元素
document.writeln("$.unique(divArr).length的结果为:" + $.unique(divArr).length
+ "<br />");
var str = "aa";
//以两个相同的字符串创建数组
var strArr = [ str, str ];
document.writeln("strArr.length的值为:" + strArr.length + "<br />");
//执行$.unique不能去除重复元素
document.writeln("$.unique(strArr).length的结果为:" + $.unique(strArr).length
+ "<br />");
</script>
</body>
</html>
数据存储的相关方法
<body>
<script type="text/javascript">
var target = $("<div>java</div>");
//向jQuery对象里添加book数据
target.data("book" , "Java");
//访问jQuery对象里的book数据,将输出"Java"
alert(target.data("book"));
//删除jQuery对象里的book数据
target.removeData("book");
//再次访问jQuery对象里的book数据,将输出"undefined"
alert(target.data("book"));
</script>
</body>
操作属性的相关方法
<body>
<img />
<img />
<div>
<img />
<img />
<img />
</div>
<script type="text/javascript">
//获取body下的img元素,并为这些img元素设置src属性值
$("body>img").attr("src", "logo.jpg").attr("alt", "Java");
//获取div下的img元素,并为这些img元素设置src属性值
$("div>img").attr("src", function(index) {
return index + 1 + ".gif";
});
</script>
</body>
操作CSS属性的相关方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>操作CSS属性的相关方法</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<style type="text/css">
.test {
background-color: #ccccff;
border: 2px dotted red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="test1">
整体添加CSS样式的元素
</div>
<br />
<div id="test2">
采用css(properties)方法添加CSS样式的元素
</div>
<br />
<div id="test3" style="position: absolute;">
可以自由移动的元素
</div>
<script type="text/javascript">
//为id为test1的元素设置class="text"
$("#test1").addClass("test");
//为id为test2的元素设置内联CSS样式 , css(properties), properties是一个形如{key:value}的对象
$("#test2").css( {
border : "1px solid black",
color : "#888888"
});
//获取id为test3的元素
var target = $("#test3")
//设置背景色
.css("background-color", "#cccccc").css("padding", 10)
//设置宽度
.width(200)
//设置高度
.height(80)
//设置位置
.css("left", 100).css("top", 164);
//获取target的位置
var posi = target.position();
alert("target的X座标为:" + posi.left + "\n" + "target的Y座标为:" + posi.top);
</script>
</body>
</html>
操作HTML元素内容的相关属性
<body>
<div></div>
<div></div>
<input id="book" name="book" type="text" />
<br />
<input id="desc" name="desc" type="text" />
<br />
<select id="gender">
<option value="male">
男人
</option>
<option value="female">
女人
</option>
</select>
<br />
<select id="publish" multiple="multiple">
<option value="phei">
电子工业出版社
</option>
<option value="tsinghua">
清华大学出版社
</option>
</select>
<br />
<script type="text/javascript">
//设置body下的div元素的内容
$("body>div").html("Ajax");
//设置所有input、select和textarea的值
$("body>input").val("XML");
//为所有的<select.../>元素设置value值
$("select").val( [ "female", "tsinghua"]);
//仅获取jQuery元素的text部分,下面将输出java:Java
alert($("<div>java:<span>Java</span></div>").text());
</script>
</body>
操作DOM节点的相关方法
<body>
<div id="test1"></div>
<div id="test2" style="border: 1px solid black;">
id为test2的元素
</div>
<script type="text/javascript">
//直接将一段HTML字符串添加到id为test1的元素的内部的尾端
$("#test1").append("<b>XML</b>");
//创建一个<span.../>元素
var span = document.createElement("span");
span.innerHTML = "Java"
//将一个DOM元素添加到id为test1的元素的内部的顶端
$("#test1").prepend(span);
//将id为test1的元素添加到id为test2的元素内部的尾端
$("#test1").appendTo("#test2");
</script>
</body>
操作DOM节点的相关方法(在指定的节点添加节点)
<body>
<div id="test1" style="border: 1px dotted black;">
id为test1的元素
</div>
<br />
<div id="test2" style="border: 1px solid black;">
id为test2的元素
</div>
<hr />
<script type="text/javascript">
//直接将一段HTML字符串插入到id为test1的元素的的前面
$("#test1").before("<b>Ajax</b>");
//直接将一段HTML字符串插入到id为test1的元素的的后面
$("#test1").after("<b>XML</b>");
//将id为test2的元素插入hr元素之后
$("#test2").insertAfter("hr");
</script>
</body>
操作DOM节点的相关方法(包裹DOM节点)
<body>
<span id="test1">id为test1的元素</span>
<br />
<span id="test2">id为test2的元素</span>
<script type="text/javascript">
//将每个span元素之外再包裹一个带点线边框的div元素
$("span").wrap("<div style='border:1px dotted black'></div>");
//将每个span元素内部成分再包裹一个灰色背景的span元素
$("span").wrapInner("<span style='background-color:#dddddd'></span>");
</script>
</body>
操作DOM节点的相关方法(替换,删除,复制)
<body>
<div>
<span id="test1">id为test1的元素</span>Java
</div>
<span id="test2">id为test2的元素</span>
<script type="text/javascript">
//将div元素内容全部清空
$("div").empty()
//重新添加字符串
.append("重新添加");
//删除所有id为test2的span元素
$("span").remove("#test2");
//取得页面中div元素,并复制该元素
$("div").clone()
//添加背景色
.css("background-color", "#cdcdcd")
//添加到body元素尾部
.appendTo("body");
</script>
</body>
发表评论
-
基于jQuery的级联下拉效果
2010-11-25 22:17 2573基于jQuery的级联下拉效果 先看效果 JSP代码 ... -
基于jQuery的标签页效果
2010-11-25 20:25 1847JSP代码 <%@ page language ... -
基于jQuery的菜单
2010-11-25 20:23 1142JSP代码 <%@ page language=&qu ... -
基于jQuery的可编辑表格
2010-11-25 20:18 4828可编辑的表格 通过js来处理,分四步: 要解决内部单 ... -
使用jQuery技术进行用户名校验
2010-11-25 20:15 1216使用jQuery技术进行用户名校验 主要是在js代码中处理( ... -
jQuery中Ajax相关方法
2010-11-24 22:36 1346Ajax相关方法,两个工具方法(serialize(),ser ... -
jQuery动画效果相关方法
2010-11-24 22:31 987动画效果相关的方法 <html> < ... -
jQuery事件相关方法
2010-11-24 22:29 1110jQuery事件相关方法 <body> & ... -
jQuery操作类数组的工具方法
2010-11-24 16:54 1238jQuery对象提供了几个常用的方法来操作类数组: < ... -
jQuery入门与介绍,jQuery对象
2010-11-24 16:47 1114jQuery是一个非常优秀的JavaScript库。 ...
相关推荐
**jQuery支持jar包详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。通常,jQuery是作为JavaScript文件直接在HTML中引用的,但有时开发者可能...
- **链式调用**:jQuery 支持方法链式调用,使得一系列操作可以流畅地串联起来。例如: ```javascript $('<p></p>').html('Hey World!').css('background', 'yellow').appendTo("body"); ``` - **文档就绪处理**...
"解决chrome对jQuery的支持问题"这个主题就聚焦于这样一个常见问题:Chrome浏览器对jQuery的`$(document).ready()`函数的执行时机。 `$(document).ready()`,也常被写为`$(function() {...})`,是jQuery中的一个...
8. **选择器**:jQuery支持CSS选择器,甚至扩展了一些特有的选择器,如`:first`, `:last`, `:even`, `:odd`, `:contains()`, `:input`, `:visible`, `:hidden`等,使元素选取更为精准。 9. **版本选择**:jQuery有...
当需要将数据从网页导出为Excel格式时,jQuery提供了多种方法来实现这一功能。下面将详细介绍jQuery导出Excel的方法,以及相关知识点。 1. **jQuery插件:TableExport** 文件`tableExport.jquery.plugin-a891806`...
本项目“jQuery支持鼠标滚动的时间轴”是利用jQuery的强大功能,结合特定的插件,来实现一个动态的时间轴效果,使得用户可以通过鼠标滚动浏览时间轴上的各个事件。 首先,我们需要引入jQuery库本身,它为我们的页面...
”意味着这个库可能还附带了代码提示支持,方便开发者记忆和使用jQuery的方法。 至于标签"javascript",这表明该库是基于JavaScript语言的,它是Web开发的标准脚本语言,用于向HTML添加动态功能。"jquery-1.4.2.min...
这个“jQuery 教程”旨在为初学者提供详细的jQuery使用方法。 一、jQuery特点 1. 轻量级:jQuery库文件小巧,原始版本大约几十KB,经过压缩后通常不超过18KB,这使得它在网页加载时不会增加太多负担。 2. 强大选择...
3. **jQuery插件**:对于Eclipse,有几种插件可以实现jQuery支持,例如“JSDT (JavaScript Development Tools)”和“WTP (Web Tools Platform)”。它们通过集成jQuery的库信息,提供了代码完成、语法高亮和错误检测...
5. **插件支持**:jQuery 1.4.1 为插件开发提供了更好的支持,使得社区能够开发出大量优秀的第三方插件,丰富了jQuery的功能。 ### jQuery 1.8.3 发布于2012年,jQuery 1.8.3 是一个更成熟和稳定版本,继续对功能...
标题"jquery-base64加密解密,支持中文"表明这个示例着重于使用`jQuery`进行Base64编码和解码,并且特别强调了对中文字符的支持。在Web开发中,中文字符的编码可能会引起问题,因为它们不在标准ASCII范围内。`jQuery...
jQuery的$.ajax()方法是进行异步请求的主要工具,支持GET、POST等多种HTTP请求类型,同时提供了方便的回调函数处理响应数据。例如,$.ajax({ url: “data.txt”, success: function(data) { alert(data); } })。 五...
本项目涉及的主题是“jQuery标签支持图文排列带按钮的选项卡”,这是一个常见的交互设计元素,常用于展示大量的信息,如产品介绍、新闻动态或用户评论,以提高用户体验并节省页面空间。 一、jQuery选项卡基础 选项...
`.delegate()` 和 `.live()`(在jQuery 1.7后被 `.on()` 替代)则支持事件代理,使得动态生成的元素也能响应事件。 ### 四、jQuery AJAX jQuery 的 AJAX 功能强大,如 `.ajax()`, `.get()`, `.post()` 等方法使得...
2. **DOM操作**:jQuery 提供了一系列方法,如`$(document).ready()`来替代body标签的onload事件,确保DOM加载完毕后执行代码。`$("#msg").show("fast")`和`.hide("slow")`等方法实现了元素的渐入渐出效果。 3. **...
当安装了jQuery支持包后,DWCS4用户可以在编写HTML、CSS和JavaScript时,享受到jQuery特定的功能支持,例如自动完成jQuery选择器、方法和属性,这极大地减少了查找文档和手动输入代码的时间。 "jQuery_api_for_dw4...
这一变化意味着1.8.6版保留了与早期jQuery版本的兼容性,而之后的版本可能不再支持一些在jQuery 1.x中可用的特性或方法。jQuery 3.x引入了许多改进和优化,包括性能提升、代码重构以及对现代浏览器特性的更好支持,...
本文将深入探讨标题为"jQuery图片批量上传支持多图片上传预览插件"的相关知识点,帮助开发者理解和实现这一功能。 一、jQuery库的优势 jQuery的核心理念是“Write Less, Do More”,它通过封装JavaScript常用操作...
然而,尽管Visual Studio内置了对多种语言的支持,但默认情况下可能并不包含对JavaScript库如jQuery的智能提示。本文将详细阐述如何在VS中启用jQuery的代码提示功能,以提升JavaScript开发的便捷性。 首先,让我们...
e-smart-zoom-jquery.js插件 页面上提供了两个按钮,可以让你的图片点击放大或者缩小 当然,对于懒人来说,真是懒得点击 那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果 ...