JQuery常用方法

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

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>	

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值