1、jquery的导入方法,需要用两个<script type="text/javascript"></script>进行设置。
进入百度程序员类库:
准确导入方式为:
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
</script>
其中jquery代码编写在第二个行中
-
jquery代码的几个选择器:
1、标签选择器,编写方式为:
$('标签名').css('background','red')
2、类选择器
$('.类名').css('background','red')
3、id选择器
$(‘#ID名’).css('background','red')
4、通配符选择器
$('tr:nth-child(3)~*').css(‘background’,'red')
实际例子:
实例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> table{ width: 300px; margin: auto; text-align: center; border-collapse: collapse; } table,td{ border: 1px solid; } td{ width: 10%; height: 10%; } </style> </head> <body> <table> <caption>作业课程</caption> <tr> <th>很大</th> <td class="td1">1</td> <td id="td2">2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> </table> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script type="text/javascript"> $('th').css('color','red') $('.td1').css('background','brown') $('#td2').css('font-weight','bold') $('td:nth-child(3)~*').css('background','orangered') </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例