1.1jQuery 概述
1、为什么使用 jQuery(遇到的问题)
选择器功能弱
DOM操作繁琐之极
浏览器兼容性不好
动画效果弱
2、什么是 jQuery(概念)
jQuery （javaScriptQuery）JavaScript 代码库
官方网站：http://jquery.com/
3、目前 jQuery 有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能
不再新增。因此一般项目来说，使用1.x版本就可以了，最
终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功
能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4 (2016年5月20日)
3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这
个版本。目前该版本是官方主要更新维护的版本。最新版本：
3.2.1（2017 年 3 月 20 日）
1.2、jQuery 中$的含义
作用 1：$(function)
1.相当于 window.onload=function(){}
2.功能比window.onload更强大
1) window onload一个页面只能写一个,但是可
以写多个$() 而不冲突
2) window onload要等整个页面加载完后再执
行（包括图片、超链接、音视频等），
但是$的执行时间要早
3.完整形式是$(document).ready(…….);
作用 2：$(selector)
选择器
jQuery具有强大的选择器功能
其他作用后续用到再总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行变色-CSS</title>
<style type="text/css">
.datalist{
border:1px solid #007108;
font-family:Arial;
border-collapse:collapse;
background-color:#d9ffdc;
font-size:14px;
}
.datalist th{
border:1px solid #007108;
background-color:#00a40c;
color:#FFFFFF;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108;
text-align:left;
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
padding-right:10px;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//js的方式实现各行变色的效果
/* window.onload=function(){
//获得所有的tr对象
var tr =document.getElementsByTagName("tr");
for(var i =0;i<tr.length;i++){
if(i%2==0){
tr[i].style.backgroundColor="red";
}else {
tr[i].style.backgroundColor="green";
}
}
}*/
//JQ实现的
$(function(){
$("tr:odd").css("background-color","red");
})
/*
window.onload=function(){
alert("123");
}
window.onload=function(){
alert("456");
}*/
$(function(){
alert("123");
})
jQuery(function(){
alert("456");
})
$(document).ready(function(){
alert("789");
})
</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 class="altrow"> <!-- 偶数行 -->
<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 class="altrow"> <!-- 偶数行 -->
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr> <!-- 奇数行 -->
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr> <!-- 奇数行 -->
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr> <!-- 奇数行 -->
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr> <!-- 奇数行 -->
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr> <!-- 奇数行 -->
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr> <!-- 奇数行 -->
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr> <!-- 奇数行 -->
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>
View Code
