JQuery常用方法

元素操作与表单数据序列化

最新推荐文章于 2024-07-25 21:42:12 发布

原创最新推荐文章于 2024-07-25 21:42:12 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

54 篇文章

订阅专栏

前端

54 篇文章

订阅专栏

文章目录

1.取得指定元素下的所有子元素

<!--导入JQuery的js文件-->
		<script src="../js/juery.min.js"></script>
		<script>
			$(function(){
				var div=$("div").children();
				console.log(div.html());
			})
		</script>
		
	</head>
	<body>
		<p>Hello</p>
		<div>
			<span>Hello Again</span>
		</div>
		<p>And Again</p>
	</body>

在这里插入图片描述

2.取得指定元素下的所有指定子元素

<script>
			$(function(){
				var div=$("div").children(".selected");
					console.log(div.html());				
			})
		</script>
		
	</head>
	<body>
		
		<div>
			<p class="selected">Hello</p>
			<span>Hello Again</span>
			<p>And Again</p>
		</div>
		
	</body>

在这里插入图片描述

3.查找父元素下的指定子元素

<script>
			$(function(){
				var div=$("p").find("span");
					console.log(div.html());				
			})
		</script>
		
	</head>
	<body>
		<p>
			<span>Hello</span>,how are you?
		</p>
	</body>

在这里插入图片描述

4.取得指定元素的祖先元素

<script>
			$(function(){
				var temp=$("span").parents();
					console.log(temp);				
			})
		</script>
		
	</head>
	<body>
		<div>
			<p><span>Hello</span></p>
			<span>Hello Again</span>
		</div>
	</body>

在这里插入图片描述

5.取得指定元素的父元素

<script>
			$(function(){
				var temp=$("span").parents("div[class='div1']");
					console.log(temp.length);				
			})
		</script>		
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				<p>
					<span>Hello</span>
				</p>
			</div>
		</div>
	</body>

在这里插入图片描述

6.为指定的元素追加子元素

<script>
			$(function(){
				var temp=$("p").append("<h1>这是追加的内容！</h1>");
			
			})
		</script>		
	</head>
	<body>
		<p>I would like to say:</p>
	</body>

在这里插入图片描述

7.删除元素本身（谁调用删除谁）

<script>
			$(function(){
				var temp=$("p:first").remove();			
			})
		</script>		
	</head>
	<body>
		<p>Hello</p>
		how are
		<p>you?</p>
	</body>

在这里插入图片描述

8.表单中的数据序列化

方便提交到服务器端

<script>
			$(function(){
				$("input[type='button']").click(function(){
					var data=$("form").serialize();
					console.log("需要提交的数据"+data);
				})
			})
		</script>		
	</head>
	<body>
		<form action="cart_submit" method="post">
			<fieldset>
				<legend>title or explanatory caption</legend>
				用户名：<input type="text" name="ename"/><br /><br />
				编号：<input type="text" name="empno"/><br /><br />
				职位：<input type="text" name="job"/><br /><br />
				薪资：<input type="text" name="sal"/><br /><br />
				佣金：<input type="text" name="comm"/><br /><br />
				<input type="button" value="提交"/><input type="reset" value="重置"/>
			</fieldset>
		</form>
	</body>

在这里插入图片描述