jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

body { width:760px; }

div{float:left;width:200px;margin:10px20px;font-family:\5FAE\8F6F\96C5\9ED1;}

h3{margin:0;border:1px solid black;color:white;background-color:green;}

p{margin:5px 0;padding:5px 0;border:1px solid black;background-color: green;color:white;}

.highlight1 { color:black; background-color:gold; }

.highlight2 { color:black; background-color:red; }

.highlight3 { color:black; background-color:blue; }

form { clear:both; } button {font:normal 16px/1 \5FAE\8F6F\96C5\9ED1; margin:2px 20px; padding:2px;cursor:pointer; width:350px; height:40px; display:block; }</style>

$(function(){

/*当鼠标单击第一个按钮元素时，选取出所有的内容段落1，并为它们设置一个高亮的样式highlight1；当鼠标单击第二个按钮元素时，选取出所有的内容段落1，并为它们设置一个高亮的样式highlight2；当鼠标单击第三个按钮元素时，选取出所有的内容段落1，并为它们设置一个高亮的样式highlight3。请在页面中填入能够实现上述页面交互效果的jQuery代码，并且规定分别使用三种不同的jQuery选择器来选取所有的内容段落1。*/

$('#btn1').c

});

</script></head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<form>

<button type="button" id="btn1">高亮样式1突出显示所有的内容段落1</button>

<button type="button" id="btn2">高亮样式2突出显示所有的内容段落1</button>

<button type="button" id="btn3">高亮样式3突出显示所有的内容段落1</button>

</form>

</body>

</html>

谁能帮我做出来！

imooc斌

浏览 2102回答 1

1回答

糖小米_

$(function(){ $('#btn1').click(function(){ $('div p:nth-child(2)').addClass('highlight1'); }); $('#btn2').click(function(){ $('div p:contains("2")').addClass('highlight2'); }); $('#btn3').click(function(){ $('div p:last-child').addClass('highlight3'); }); });

随时随地看视频慕课网APP