jQuery如何引入?
实现隔行变色的效果,在使用jQuery实现效果之前,先使用在HTML中使用class属性直接标记、使用JavaScript来实现动态隔行变色,然后再采用jQuery来实现,可以明显体现到jQuery的方便和简单。
原生JavaScript方式实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a {
background-color: greenyellow;
}
.b {
background-color: yellowgreen;
}
.c {
background-color: yellow;
}
</style>
<script type="text/javascript">
//页面加载后调用一个匿名函数
window.onload = function() {
//获取所有的行
var arr = document.getElementsByTagName("tr");
//对所有的行动态实现隔行变色
for(var i = 0; i < arr.length; i++) {
if(i == 0) {
arr[i].className = "a";
} else if(i % 2 == 1) {
arr[i].className = "b";
} else {
arr[i].className = "c";
}
}
}
</script>
</head>
<body>
<table class="datalist">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Can</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>
使用jQuery方式实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入jQuery文件-->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$("tr:odd").css("backgroundColor","yellowgreen")
$("tr:even").css("backgroundColor","lightyellow")
$("tr:first").css("backgroundColor","greenyellow")
})
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>
通过案例我们 发现,引入jQuery后我们的js代码变的简单,和write less,do more的目标特别契合
jQuery页面加载函数
页面加载函数是页面加载完毕事件绑定的函数,该函数在后面应用比较多,所以再此处强调一下jQuery中的页面加载函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
/*jQuery(document).ready(function (){
var domS1=document.getElementById("s1");
console.log(domS1.innerText);
})*/
// jQuery 可以简写 $
/*$(document).ready(function (){
var domS1=document.getElementById("s1");
console.log(domS1.innerText);
})*/
$(function(){
var domS1=document.getElementById("s1");
console.log(domS1.innerText);
})
$(function(){
console.log("第二个页面加载函数")
})
$(function(){
console.log("第三个页面加载函数")
})
</script>
</head>
<body>
<span id="s1">测试文字</span>
</body>
</html>
总结:
关于jQuery的使用需要先导入jQuery的js文件,jQuery本身就是一个JS文件。jQuery.min.js是jQuery文件的压缩版,生产环境下推荐压缩版,$是jQuery是使用最多的符号,它有多个作用。这个示例中就使用了$的两个作用。
作用1:页面加载函数
jQuery(document).ready(function(){});和$(document).ready(function({}));简写为$(function(){}),相当于window.οnlοad=function(){}但是功能比window.onload更强大window.onload一个页面只能写一个,但是可以写多个$() 而不冲突,window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等),但是$()的执行时间要早
作用2:选择器标志 $(selector)
选择器。jQuery具有强大的选择器功能,后面会有专门章节进行介绍