`

jQuery支持的方法

jQueryCSSAjaxJavaScript出版 
阅读更多

字符串，数组和对象相关的工具方法 
<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操作类数组的工具方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery的几种使用方法

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

    jquery 导出excel方法

    下面将详细介绍jQuery导出Excel的方法，以及相关知识点。 1. **jQuery插件：TableExport** 文件`tableExport.jquery.plugin-a891806`可能是一个名为TableExport的jQuery插件，它允许开发者将HTML表格数据导出为...

    解决chrome对jQuery的支持问题

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

    jquery支持jar包

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

    jQuery支持鼠标滚动的时间轴

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

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

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

    jquery手册jquery的学习jquery的学习

    jQuery的`$.ajax()`函数是进行异步数据请求的主要方法，支持GET和POST等多种HTTP请求方式。`$.getJSON()`和`$.getScript()`分别用于获取JSON数据和加载JavaScript脚本。`$.load()`则用于局部刷新页面内容。 七、...

    jquery插件使用方法大全

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

    jquery的jar包 入门基础

    此外，jQuery还支持更复杂的选择器，如`:first`、`:last`、`:even`等。 操作DOM元素是jQuery的另一个关键特性。`.html()`, `.text()`, `.val()`等方法用于获取或设置元素的内容。例如，`$('p').html('新的文本')` ...

    让VS支持JQuery提示

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

    jQuery的异步调用

    其中最核心的方法就是"$.ajax"函数，它几乎提供了所有可能的Ajax操作的选项，包括但不限于数据类型、超时设置、缓存控制等。通过"$.ajax"函数的配置，开发者可以灵活地控制网络请求的各个方面。 而"$.ajax"函数中的...

    jquery常用方法总结

    通过 `$()` 获取到的对象实际上是 jQuery 对象，这些对象封装了一些特定的方法，不同于 DOM 对象的方法。因此，在使用时需要注意区别。 #### 二、jQuery 对象与 DOM 对象的转换 在 jQuery 中，DOM 对象和 jQuery ...

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

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

    常用的几个jquery版本文件

    - jQuery 3.x系列：这是目前的主流版本，对ES6有良好的支持，同时保持了良好的浏览器兼容性，包括对IE9及更高版本的支持。 - jQuery 4.x系列：较新版本，进一步提升了性能和API一致性，但可能不再支持某些旧浏览器...

    jquery.ui-1.6rc6的jquery.ui.all.js 和 jquery-1.3.2.js和jQueryDocXML2CHM-090214.chm，jquery1.3中文文档

    综上所述，这些资源为使用 jQuery 1.3.2 和 jQuery UI 1.6rc6 的开发者提供了全面的支持，包括库的代码文件和详尽的中文文档。无论是在创建交互式的用户界面，还是在进行高效的 DOM 操作，这些工具都能极大地提高...

    JQuery1.4.1与JQuery1.8.3

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

    eclipse上支持jquery插件

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

    最新版JQuery-jquery-3.2.1.min.js

    `jQuery.isArray()`是一个判断对象是否为数组的方法。在jQuery 3.x中，这个方法也被移除，因为它与JavaScript的原生`Array.isArray()`方法功能重叠。现在推荐直接使用原生的`Array.isArray()`来检查一个变量是否为数...

    锋利的jquery-第一版

    jQuery还支持链式调用，这意味着一个方法的返回值仍是jQuery对象，可以接着调用其他方法，如`$("div").hide().fadeIn()`, 先隐藏所有`&lt;div&gt;`，然后逐渐显示它们。 事件处理是jQuery的核心功能之一。使用`on()`方法...

    jquery各版本，jquery1.3-1.7,jquery文件

    jQuery1.6的主要改进是分离了DOM元素的选择与操作，创建了独立的$.attr和$.prop方法，以更准确地区分属性（attributes）和特性（properties）。这使得开发者在处理表单控件状态等特性时有了更清晰的区分。 jQuery...

Magicbox
Global site tag (gtag.js) - Google Analytics