jquery 基本选择器的使用

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #stylesheet #border #table #xhtml #javascript

jQuery笔记专栏收录该内容

2 篇文章

订阅专栏

本文通过一个具体的HTML表格示例，展示了如何使用jQuery的选择器来操作DOM元素，包括设置样式、添加类等常见操作。

:odd,elements,eq,:head,:first,:last,not(),first(),last(),addClass(),css() 示例：

去除mce:及css和JavaScript注释便可测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="Styles/demo.css" mce_href="Styles/demo.css" rel="stylesheet" type="text/css" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .tablecss { padding: 10px 50px 10px 50px; margin: 0px; border: thin solid #008000; } .tableBackColor { background-color: #C0C0C0; } </style> <mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div> <h1> jquery 选择器的使用</h1> <h2> :odd,elements,eq,:head,:first,:last,not(),first(),last(),addClass(),css()示例：</h2> <table> <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> </table> </div> </body> </html>

运行效果