如何用jquery实现以下四个功能

MrSakura0 2018-01-18 11:33:04
新人,那种看得懂代码写不出来的那种,耽误大佬们一点时间给个答案。我结合答案再搜索jquery,dom理解以下,谢谢!
1.用each函数实现五个p段落,将p段落中的内容打出来
2.页面中有五个button按钮,点击每个button按钮会将button中间的内容答出来
3.页面中有两个按钮,用jquery实现点击出现按钮显示div内容,消失按钮让div内容消失
4.页面中有一个下拉列表,一个div,列表里面选项是red,blue,yellow,点击相应的颜色让div背景颜色变成相同颜色
...全文
265 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
MrSakura0 2018-01-18
  • 打赏
  • 举报
回复
谢谢大佬,看懂了。正好纠结jquery HTML 还有js之间的联系。老师讲了加上你的代码思路清楚多了
天际的海浪 2018-01-18
  • 打赏
  • 举报
回复

<p>aa</p>
<p>bb</p>
<p>cc</p>
<p>dd</p>
<p>ee</p>
<script type="text/javascript">
$(function(){
	$("p").each(function(){
		alert($(this).text());
	})
});
</script>

<button type="button">Button 1</button>
<button type="button">Button 2</button>
<button type="button">Button 3</button>
<button type="button">Button 4</button>
<button type="button">Button 5</button>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		alert($(this).text());
	})
});
</script>

<button type="button" id="button1">显示</button>
<button type="button" id="button2">隐藏</button>
<div id="dd">div内容</div>
<script type="text/javascript">
$(function(){
	$("#button1").click(function(){
		$("#dd").show();
	})
	$("#button2").click(function(){
		$("#dd").hide();
	})
});
</script>

<select id="sel">
	<option selected="selected">red</option>
	<option>blue</option>
	<option>yellow</option>
</select>
<div id="dd" style="background-color: red;">div内容</div>
<script type="text/javascript">
$(function(){
	$("#sel").change(function(event){
		$("#dd").css("background-color",$(this).find(":selected").text());
	});
});
</script>

87,989

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧