2022-9-9前段JQuser知识

宜昌李国勇

已于 2022-09-12 19:47:33 修改

阅读量199

点赞数

分类专栏：前段

于 2022-09-09 10:03:48 首次发布

本文链接：https://blog.csdn.net/weixin_44568816/article/details/126777238

版权

javascript html 前端

前段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

01.jquery属性操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".b1").click(function(){
					var pv = $('.p1').html()
					console.log(pv)
					pv = $('.p1').text()
					console.log(pv)
					
					var username = $(':input[type=text]').val()
					console.log(username)
				})
			})
			
			// //click点击函数
			// $(function(){
			// 	$('.b1').click(function(){  		
			// 		//1.利用 html函数 = 获取页面元素的html代码，如果有标签，一并获取。
			// 		var pv=$('.p1').html()
			// 		//text():获取页面元素的纯文本内容。如果有标签，忽略
			// 		pv=$('.p1').text()
					
			// 		var username=$(':input[type=text]').val()
			// 	})
			// })
		</script>
	</head>
	<body>
		<p class="p1">床前明月光，
		疑是地上霜。
		<a>举头望明月</a>，
		低头思故乡。</p>
		<input type="text" name="username" value="spike" />
		<button class="b1">点我</button>
	</body>
</html>

02.each方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var arr = ['a','b','c']
				$.each(arr, function(i,v) {
					console.log(i+'--'+v)
				});
				
				$('li').each(function(i,v){
					// v.innerHTml 取出每一个值
					console.log(i+'--'+v.innerHTML)
				})
				
				// var arr=[10,20,30,40,50]
				// $.each(arr,function(i,v){
				// 	console.log(i+"--"+v)
				// })
				
				// $('li').each(function(i,v){
				// 	console.log(i+"--"+v.innerHTML)
				// })
				
				
			})
		</script>
	</head>
	<body>
		<ul>
			<li>葡萄</li>
			<li>西瓜</li>
			<li>水蜜桃</li>
			<li>木瓜</li>
		</ul>
		
	</body>
</html>

03.省市二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var cities = new Array()
				cities[0] = ["武汉市","黄石市","黄冈市","十堰市"]
				cities[1] = ["长沙市","株洲市","湘潭市","衡阳市"]
				cities[2] = ["苏州市","南京市","无锡市","常州市"]
				cities[3] = ["杭州市","温州市","宁波市","嘉兴市"]
				//v的值与数组下标对应，通过v获取省份对应的城市
			$(function(){
				$(".pro").change(function(){
					var index = $(this).val()
					console.log(index)
					var city = $('#city')
					//1.清空city 下拉框的数据
					city.empty()
					//2.遍历对应省份的城市
					$.each(cities[index], function(i,v) {
						console.log(i+'--'+v)
						city.append('<option>'+v+'</option>')
					});
				})
			})
			
			
		</script>
	</head>
	<body>
		<div id="d1">
				<label>省份</label>
			<select class="pro" name='pro' >
				<option>请选择</option>
				<option value="0">湖北</option>
				<option value="1">湖南</option>
				<option value="2">江苏</option>
				<option value="3">浙江</option>
			</select>
			<label>城市</label>
			<select name="city" id="city">
				<option>请选择</option>
			</select>
		</div>
	</body>
</html>

使用jQuery完成下拉列表左右选择

<!DOCTYPE html>
<!-- 
使用js 要追加节点，挂载节点，清空元素
使用jquery 不要考虑清空元素的问题

 -->
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表左右选择</title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				
				// $('#lefta').click(function(){
				// 	// 找到标签 追加元素
				// 	var sel  = $('#left option:selected')
				// 	console.log(sel)
				// 	sel.appendTo($('#right'))
				// })
				
				//1.通过标签的id-设置点击按钮
				$('#lefta').click(function(){
					//2.对option 追加元素 进行设置到右边
					var sel=$('#left option:selected').appendTo($('#right'))
				})
				
				// $('#righta').click(function(){
				// 	$('#right option:selected').appendTo($('#left'))
				// })
				
				//2
				$('#righta').click(function(){
					$('#right option:selected').appendTo($('#left'))
				})
				
			

				
				// $('#leftall').click(function(){
				// 	$('#left option').appendTo($('#right'))
				// })
				
				// $('#rightall').click(function(){
				// 	$('#right option').appendTo($('#left'))
				// })
				
				
				//全部只用option
				$('#leftall').click(function(){
					$('#left option').appendTo($('#right'))
				})
				
				$('#rightall').click(function(){
					$('#right option').appendTo($('#left'))
				})
				
				
				
				$('#left').dblclick(function(){
					$('#left option:selected').appendTo($('#right'))
				})
				
				$('#right').dblclick(function(){
					$('#right option:selected').appendTo($('#left'))
				})
			})
		</script>
	</head>
	<body>
		<table border="1" width="600" align="center">
			<tr>
				<td>
					分类名称
				</td>
				<td>
					<input type="text" name="cname" value="手机数码"/>
				</td>
			</tr>
			<tr>
				<td>
					分类描述
				</td>
				<td>
					<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
				</td>
			</tr>
			<tr>
				<td>
					分类商品
				</td>
				<td>
					<span style="float: left;">
						<font color="green" face="宋体">已有商品</font><br/>
						<select id="left" multiple="multiple" style="width: 100px;height: 200px;" >
							<option>IPhone6s</option>
							<option>小米4</option>
							<option>锤子T2</option>
						</select>
						<p><a id='lefta' href="#" style="padding-left: 20px;" >&gt;&gt;</a></p>
						<p><a id='leftall' href="#" style="padding-left: 20px;" >&gt;&gt;&gt;</a></p>
					</span>
					<span style="float: right;">
						<font color="red" face="宋体">未有商品</font><br/>
						<select id="right" multiple="multiple" style="width: 100px;height: 200px;" >
							<option>三星Note3</option>
							<option>华为6s</option>
						</select>
						<p><a id='righta' href="#" >&lt;&lt;</a></p>
						<p><a id='rightall' href="#" >&lt;&lt;&lt;</a></p>
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type='submit' value="修改"/>
				</td>
			</tr>
		</table>
	</body>
</html>