<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> // alert('jquery里选择器很多, 只需要掌握常用的选择器, 其他选择器在需要的时候再去jquery查询.') //jquery读取元素, 和css元素式样相仿. $(function(){ var $div01 = $('#div01'); var $div23 = $('.div'); var $li = $('.list li'); // $div01.css({'color:violet'}); // 语法错误,css({})传入style风格的时候, 属性和参数需分别用引号包裹, 中间夹冒号:,jQuery的大括号内慎用;分号 $div01.css({'color':'violet'}); $div23.css({'color':'green'}); // 带'-'的样式属性.可以写成驼峰式,也可以写成'-'; $li.css({'background-color':'pink','color':'black'}) }) </script> </head> <!-- <style type="text/css"> #div01{ color: red; } .div{ color: green; } .list li{ background-color: pink; } </style> --> <body> <div id="div01">这是第一个div元素</div> <div class="div">这是第2个div元素</div> <div class="div">这是第3个div元素</div> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>