10道JQuery的小练习

最新推荐文章于 2024-03-30 07:57:54 发布

谭上彪

最新推荐文章于 2024-03-30 07:57:54 发布

阅读量5.7k

点赞数 8

分类专栏： jQuery复习

本文链接：https://blog.csdn.net/qq_40411946/article/details/80895216

版权

jQuery复习专栏收录该内容

2 篇文章 1 订阅

订阅专栏

期末复习的 10 道 jQuery 小练习

1.使用jquery修改div元素的背景色(随意颜色)

<body>
		<div>
			
		</div>
		<script>
			/*
			 1.使用jquery修改div元素的背景色(随意颜色)
			 * 
			 * */
			$('div').css('background',"#d90000")
		</script>
	</body>

2. 使用jquery修改div的子元素p的内容为"我是子元素"

<body>
		<div>
			<p>我是文字</p>
		</div>
		<p>
			我是文字
		</p>
		
		<script>
			/*
			 使用jquery修改div的子元素p的内容为"我是子元素"
			 * */
			$('div p').html('我是子元素')
		</script>
	</body>

3. 使用jquery修改第二个p元素的背景色为"orange"

<body>
		<div>
			<p>我是第一个p元素</p>
			<p>我是第二个p元素</p>
			<p>我是第三个p元素</p>
		</div>
		<script>
			/*
			 使用jquery修改第二个p元素的背景色为"orange"
			 * */
			$('p').eq(1).css('background','orange')
		</script>
	</body>

4. 使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面

考察clone()和text()方法

<body>
		<div>
			<p>我是源元素</p>
		</div>
		<script>
			/*
			 使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面
			 考察clone()和text()方法
			 * */
			
			var p = $('div p').clone().text('我是克隆体')
			$('div').append(p)
		</script>
	</body>

5. 请使用jquery来自动选中页面中的多选框

考察prop()的用法

<body>
		<p><input type="checkbox">多选框1</p>
		<p><input type="checkbox">多选框2</p>
		<p><input type="checkbox">多选框3</p>
		<script>
			/*
			 请使用jquery来自动选中页面中的多选框
			 考察prop()的用法
			 * */
			$('input[type=checkbox]').prop('checked',true)
		</script>
	</body>

6. 删除列表元素中最后一个li元素

考察jquery中的remove()方法

<body>
		<ul>
			<li>元素01</li>
			<li>元素02</li>
			<li>元素03</li>
			<li>元素04</li>
			<li>元素05</li
		</ul>
		<script>
			/*
			 删除列表元素中最后一个li元素
			 考察jquery中的remove()方法
			 * */
			$('ul li:last').remove()
		</script>
	</body>

7. 点击当前的p标签,弹出相对应的元素下标

(点击第一个p元素,弹出0,点击第二个p元素,弹出1........)

<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<script>
			/*
			 点击当前的p标签,弹出相对应的元素下标
			 (点击第一个p元素,弹出0,点击第二个p元素,弹出1........)
			 * 
			 * */
			$('p').click(function(){
				alert($(this).index())
			})
		</script>
	</body>

8. 要求: 点击id为btn的按钮,
1.判断id为username的输入是否为空,如果为空,则弹出你输入的不能为空.

2.判断id为password的输入的个数是否小于6位,如果小于6位,则弹出你输入的长度不可以少于6位

<body>
			<p>
				<input type="text" id="username"/>
			</p>
			<p>
				<input type="password" id="password"/>
			</p>
			<p>
				<button id="btn" type="button">提交</button>
			</p>
		<script>
//			要求:	点击id为btn的按钮,
//			1.判断id为username的输入是否为空,如果为空,则弹出你输入的不能为空.
//			2.判断id为password的输入的个数是否小于6位,如果小于6位,则弹出你输入的长度不可以少于6位
			
			$('#btn').click(function(){
				if($('#username').val().length==0){
					alert('输入不能为空')
				}else if($('#password').val().length<6){
					alert('长度不可以少于6位')
				}
			})

		</script>
	</body>

9. 要求:利用,jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px

<style>
			.box{
				width:100px;
				height:100px;
				position:absolute;
				top: 50px;
				left: 10px;
				border: 1px solid #666;
			}

		</style>
	</head>
	<body>
		<div class="box"></div>	
		<button id="btn">按钮</button>
		<script>
//			要求:利用,jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px
			$('#btn').click(function(){
				$('.box').stop().animate({
					"left":500+'px'
				})
			})
		</script>
	</body>

10. 要求:利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色

<body>
		<p>我是一段文字</p>
		<script>
			/*
			 要求:利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色 
			 * */
			$('p').css('background','red');
			$('p:first').css('background','red');
			$('p:last').css('background','red');
		</script>
	</body>

（答案不唯一）

谭上彪

关注

8
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
10道JQuery的小练习

期末复习的 10 道 jQuery 小练习 1.使用jquery修改div元素的背景色(随意颜色)&lt;body&gt; &lt;div&gt; &lt;/div&gt; &lt;script&gt; /* 1.使用jquery修改div元素的背景色(随意颜色) * * */ $('div').css('background',"...
复制链接

扫一扫