<!doctype html>
无标题文档 $(document).ready(function(){ $("button.button1").click(function(){ $("li").addClass("myclass")}/* 通过元素选择器将所有的li的背景颜色设置为黄色 */ ); $("button.button2").click(function(){ $("#li1").html("桌球")}/* 通过id选择器将id为li1的文本值改为桌球*/ ); $("button.button3").click(function(){ $("li,button").addClass("class1")}/* 通过并列选择器将按钮以及列表的字体颜色改为红色*/ ); $("button.button4").click(function(){ $("div ul li").addClass("class2")}/* 通过祖先后代选择器将所有的li的字体风格改变*/ ); $("button.button5").click(function(){ $("#ul1>li").addClass("class3")}/* 通过父子选择器*/ ); $("button.button6").click(function(){ $("#li1+li").addClass("class4")}/* 通过前后选择器*/ ); $("button.button7").click(function(){ $("#li1~li").addClass("class5")} ); }) .myclass{background:#F4F33B} .myclass1{color: red}; .myclass2{color: yellow}; .myclass3{color: blue}; .myclass4{color: green}; .myclass5{color: black};
改变li的背景颜色
将羽毛球改为桌球
将颜色改为红色
将颜色改为黄色
将颜色改为蓝色
将颜色改为绿色
将颜色改为黑色
- 羽毛球
- 乒乓球
- 篮球
- 足球
- 橄榄球
