jQuery支持的方法

最新推荐文章于 2025-06-27 16:26:29 发布

平民-王子

最新推荐文章于 2025-06-27 16:26:29 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery CSS Ajax JavaScript 出版 ViewUI

本文链接：https://blog.youkuaiyun.com/libinxuan520/article/details/83768942

jQuery 专栏收录该内容

11 篇文章

订阅专栏

字符串，数组和对象相关的工具方法

<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>