| jQuery的引入与原生JavaScript实现对比 | 您所在的位置：网站首页 › thymeleaf引入jquery › jQuery的引入与原生JavaScript实现对比 |
jQuery的引入与原生JavaScript实现对比
原生javascript实现动态隔行变色
.a {
background-color: greenyellow;
}
.b {
background-color: yellowgreen;
}
.c {
background-color: yellow;
}
function fun1(){
//获取所有的行
var arr=document.getElementsByTagName("tr")
//对所有的行动态实现隔行变色
for(var i=0;i
arr[i].className='a';
}else if(i%2==1){
arr[i].className='b'
}else{
arr[i].className='c'
}
}
}
Name
Class
Birthday
Constellation
Mobile
isaac
W13
Jun 24th
Can
1118159
fresheggs
W610
Nov 5th
Scorpio
1038818
girlwing
W210
Sep 16th
Virgo
1307994
tastestory
W15
Nov 29th
Sagittarius
1095245
或者
.a {
background-color: greenyellow;
}
.b {
background-color: yellowgreen;
}
.c {
background-color: yellow;
}
window.onload=function(){
//获取所有的行
var arr=document.getElementsByTagName("tr")
//对所有的行动态实现隔行变色
for(var i=0;i
arr[i].className='a';
}else if(i%2==1){
arr[i].className='b'
}else{
arr[i].className='c'
}
}
}
Name
Class
Birthday
Constellation
Mobile
isaac
W13
Jun 24th
Can
1118159
fresheggs
W610
Nov 5th
Scorpio
1038818
girlwing
W210
Sep 16th
Virgo
1307994
tastestory
W15
Nov 29th
Sagittarius
1095245
使用jquery方式实现
.a {
background-color: greenyellow;
}
.b {
background-color: yellowgreen;
}
.c {
background-color: yellow;
}
$(function(){
$("tr:odd").css("backgroundColor","yellowgreen")
$("tr:even").css("backgroundColor","lightyellow")
$("tr:first").css("backgroundColor","greenyellow")
})
Name
Class
Birthday
Constellation
Mobile
isaac
W13
Jun 24th
Can
1118159
fresheggs
W610
Nov 5th
Scorpio
1038818
girlwing
W210
Sep 16th
Virgo
1307994
tastestory
W15
Nov 29th
Sagittarius
1095245
总结:
关于jQuery的使用需要先导入jQuery的js文件,jQuery本身就是一个JS文件。jQuery.min.js是jQuery文件的压缩版,生产环境下推荐压缩版,$是jQuery是使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。 作用1：页面加载函数 jQuery(document).ready(function(){});和$(document).ready(function({}));简写为$(function(){})相当于window.onload=function(){}但是功能比window.onload更强大window.onload一个页面只能写一个,但是可以写多个$()而不冲突,window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等)，但是$()的执行时间要早 作用2：选择器标志 $(selector) |
【本文地址】
公司简介
联系我们