jquery基本选择器
1.jquery中的选择器与css中基本上是一致的,便于熟悉css的开发人员快速掌握
2.绝大多数css选择器可以在jquery中直接使用
3.基本选择器,也叫基础选择器,或者入口选择器,简单选择器,功能就是向jquery提供
一级元素,供后面的过滤器进行操作,最主要的有四类: tag,id,class,*
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style type="text/css"> table, td { border:1px solid #333; } table { border-collapse: collapse; margin: 30px auto; width: 80%; text-align: center; } table caption { font-size: 1.5em; margin-bottom: 15px; } .bg-orange { font-weight: bolder; color: white; background-color: orange; } </style> </head> <body> <table> <caption>用户信息表</caption> <tr id="title"> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> </tr> </table> </body> </html> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> //1. tag标签选择器 // $('td').css('backgroundColor','wheat') //2.id选择器 //把td上的背景去掉,否则会层叠覆盖 $('#title').css('backgroundColor','lightgreen') //3.class类选择器 $('.mark').addClass('bg-orange') //4.*通配选择符 $('tr:nth-child(3) ~ *').css('backgroundColor', 'pink') </script>
Atas ialah kandungan terperinci jquery基本选择器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!