`

jQuery支持的方法

阅读更多

字符串,数组和对象相关的工具方法
<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支持jar包

    **jQuery支持jar包详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。通常,jQuery是作为JavaScript文件直接在HTML中引用的,但有时开发者可能...

    使用 jQuery 简化 Ajax 开发

    - **链式调用**:jQuery 支持方法链式调用,使得一系列操作可以流畅地串联起来。例如: ```javascript $('&lt;p&gt;&lt;/p&gt;').html('Hey World!').css('background', 'yellow').appendTo("body"); ``` - **文档就绪处理**...

    解决chrome对jQuery的支持问题

    "解决chrome对jQuery的支持问题"这个主题就聚焦于这样一个常见问题:Chrome浏览器对jQuery的`$(document).ready()`函数的执行时机。 `$(document).ready()`,也常被写为`$(function() {...})`,是jQuery中的一个...

    jquery的几种使用方法

    8. **选择器**:jQuery支持CSS选择器,甚至扩展了一些特有的选择器,如`:first`, `:last`, `:even`, `:odd`, `:contains()`, `:input`, `:visible`, `:hidden`等,使元素选取更为精准。 9. **版本选择**:jQuery有...

    jquery 导出excel方法

    当需要将数据从网页导出为Excel格式时,jQuery提供了多种方法来实现这一功能。下面将详细介绍jQuery导出Excel的方法,以及相关知识点。 1. **jQuery插件:TableExport** 文件`tableExport.jquery.plugin-a891806`...

    jQuery支持鼠标滚动的时间轴

    本项目“jQuery支持鼠标滚动的时间轴”是利用jQuery的强大功能,结合特定的插件,来实现一个动态的时间轴效果,使得用户可以通过鼠标滚动浏览时间轴上的各个事件。 首先,我们需要引入jQuery库本身,它为我们的页面...

    jQuery通用方法库

    ”意味着这个库可能还附带了代码提示支持,方便开发者记忆和使用jQuery的方法。 至于标签"javascript",这表明该库是基于JavaScript语言的,它是Web开发的标准脚本语言,用于向HTML添加动态功能。"jquery-1.4.2.min...

    jquery 教程 详细解释了jquery的使用方法

    这个“jQuery 教程”旨在为初学者提供详细的jQuery使用方法。 一、jQuery特点 1. 轻量级:jQuery库文件小巧,原始版本大约几十KB,经过压缩后通常不超过18KB,这使得它在网页加载时不会增加太多负担。 2. 强大选择...

    eclipse上支持jquery插件

    3. **jQuery插件**:对于Eclipse,有几种插件可以实现jQuery支持,例如“JSDT (JavaScript Development Tools)”和“WTP (Web Tools Platform)”。它们通过集成jQuery的库信息,提供了代码完成、语法高亮和错误检测...

    JQuery1.4.1与JQuery1.8.3

    5. **插件支持**:jQuery 1.4.1 为插件开发提供了更好的支持,使得社区能够开发出大量优秀的第三方插件,丰富了jQuery的功能。 ### jQuery 1.8.3 发布于2012年,jQuery 1.8.3 是一个更成熟和稳定版本,继续对功能...

    jquery-base64加密解密,支持中文

    标题"jquery-base64加密解密,支持中文"表明这个示例着重于使用`jQuery`进行Base64编码和解码,并且特别强调了对中文字符的支持。在Web开发中,中文字符的编码可能会引起问题,因为它们不在标准ASCII范围内。`jQuery...

    jquery1.4.2 jquery1.4.2

    jQuery的$.ajax()方法是进行异步请求的主要工具,支持GET、POST等多种HTTP请求类型,同时提供了方便的回调函数处理响应数据。例如,$.ajax({ url: “data.txt”, success: function(data) { alert(data); } })。 五...

    jquery标签支持图文排列带按钮的选项卡

    本项目涉及的主题是“jQuery标签支持图文排列带按钮的选项卡”,这是一个常见的交互设计元素,常用于展示大量的信息,如产品介绍、新闻动态或用户评论,以提高用户体验并节省页面空间。 一、jQuery选项卡基础 选项...

    jquery例子大全 jquery demo

    `.delegate()` 和 `.live()`(在jQuery 1.7后被 `.on()` 替代)则支持事件代理,使得动态生成的元素也能响应事件。 ### 四、jQuery AJAX jQuery 的 AJAX 功能强大,如 `.ajax()`, `.get()`, `.post()` 等方法使得...

    jquery插件使用方法大全

    2. **DOM操作**:jQuery 提供了一系列方法,如`$(document).ready()`来替代body标签的onload事件,确保DOM加载完毕后执行代码。`$("#msg").show("fast")`和`.hide("slow")`等方法实现了元素的渐入渐出效果。 3. **...

    JQuery DreamWaveCS4 支持

    当安装了jQuery支持包后,DWCS4用户可以在编写HTML、CSS和JavaScript时,享受到jQuery特定的功能支持,例如自动完成jQuery选择器、方法和属性,这极大地减少了查找文档和手动输入代码的时间。 "jQuery_api_for_dw4...

    jquery-easyui-1.8.6 最后一个支持IE7的最新版本

    这一变化意味着1.8.6版保留了与早期jQuery版本的兼容性,而之后的版本可能不再支持一些在jQuery 1.x中可用的特性或方法。jQuery 3.x引入了许多改进和优化,包括性能提升、代码重构以及对现代浏览器特性的更好支持,...

    jQuery图片批量上传支持多图片上传预览插件.zip

    本文将深入探讨标题为"jQuery图片批量上传支持多图片上传预览插件"的相关知识点,帮助开发者理解和实现这一功能。 一、jQuery库的优势 jQuery的核心理念是“Write Less, Do More”,它通过封装JavaScript常用操作...

    让VS支持JQuery提示

    然而,尽管Visual Studio内置了对多种语言的支持,但默认情况下可能并不包含对JavaScript库如jQuery的智能提示。本文将详细阐述如何在VS中启用jQuery的代码提示功能,以提升JavaScript开发的便捷性。 首先,让我们...

    jQuery支持图片放大缩小查看效果

    e-smart-zoom-jquery.js插件 页面上提供了两个按钮,可以让你的图片点击放大或者缩小 当然,对于懒人来说,真是懒得点击 那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果 ...

Global site tag (gtag.js) - Google Analytics