在jquery中， 可以通过“:even”选择器获得偶数行对象， 使用css()方法设置background颜色， 从而实现隔行变行的效果 。 下面小编举例讲解如何使用jQuery实现隔行变色效果 。
文章插图
需要这些哦
html+jquery
代码编纂器：Dreamweaver CS5
方式/
1新建一个html文件， 定名为test.html， 用于讲解若何利用jQuery实现隔行变色结果 。
文章插图
2在test.html文件内， 引入jquery.min.js库文件， 当作功加载该文件， 才能利用jquery中的方式 。
文章插图
3在test.html文件内， 利用table标签， tr标签， td标签建立一个五行三列的表格， 为了展示好的结果， 设置表格的边框为1px， 内边距为10px 。
文章插图
4在test.html文件内， 利用button标签建立一个按钮， 按钮名称为“隔行变色” 。
文章插图
5在test.html文件中， 给button按钮绑定onclick点击事务， 当按钮被点击时， 执行trcolor函数 。
文章插图
6在js标签中， 建立trcolor()函数， 在函数内， 经由过程元素名称获得tr行对象， 利用css()方式设置background为粉红色， 即表格行的布景颜色为粉红色， 再经由过程“:even”选择器选择表格的偶数行对象， 利用css()方式设置background为橙色 。
文章插图
7【如何使用jQuery实现隔行变色效果】在浏览器打开test.html文件， 点击按钮， 查看实现的结果 。
文章插图
文章插图
总结：11、建立一个test.html文件 。
2、在文件内， 利用table标签， tr标签， td标签建立一个五行三列的表格， 同时建立一个button按钮， 用于触发执行js函数 。 。
3、在js标签内， 建立函数， 在函数内， 经由过程元素名称获得tr行对象， 利用css()方式设置background为粉红色， 即表格行的布景颜色为粉红色， 再经由过程“:even”选择器选择表格的偶数行对象， 利用css()方式设置background为橙色 。
4、点击按钮， 实现隔行变色 。
注重事项css()常用于设置css属性， 实现css的结果 。
以上内容就是如何使用jQuery实现隔行变色效果的内容啦， 希望对你有所帮助哦！
推荐阅读
- 如何使用视信云会议
- 怎样使用Git方式安装ThinkPHP5框架
- AI绘图软件如何构造出任意形状走向的文字图片
- POTPLAYER如何设置为播放时置顶
- 如何使用【买省么】购物省钱
- Excel POISSON.DIST函数的使用方法
- 阳台如何养香雪兰，需要注意什么
- 阳台如何养燕子掌，需要注意什么
- 阳台如何养海棠花，需要注意什么
- 阳台如何养蔷薇花，需要注意什么