一、什么是jQuery
jQuery是目前最流行的JavaScript程序库，它通过封装原生的JavaScript函数得到一整套定义好的方法。
隔行变色示例（odd是奇数行，even是偶数行）：
<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("tr:odd").css("background-color","gray");
});
</script>
<table>
<tr><td>id</td><td>name</td></tr>
<tr><td>1</td><td>John</td></tr>
<tr><td>2</td><td>Jack</td></tr>
<tr><td>3</td><td>Rose</td></tr>
<tr><td>4</td><td>Mary</td></tr>
</table>
二、jQuery功能
jQuery作为 JavaScript封装的库，他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点：
1.精确选择页面对象
2.进行可靠的CSS样式控制
3.使DOM操作规范化
4.标准化事件控制
5.支持网页特效
6.快速通信
7.扩展JavaScript内核
三、使用JQUERY
示例：
<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('Hi,您好！');
});
</script>
<table>
<tr><td>id</td><td>name</td></tr>
<tr><td>1</td><td>John</td></tr>
<tr><td>2</td><td>Jack</td></tr>
<tr><td>3</td><td>Rose</td></tr>
<tr><td>4</td><td>Mary</td></tr>
</table>
四、jQuery基础知识
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码}); |
$(document).ready()等同于jQuery(document).ready()
$(function(){…})等同于jQuery (function(){…})
常用语法举例
| css(“属性”,“属性值”) | 为元素设置CSS样式的值 |
| addClass() | 为元素添加类样式 |
| next() | 获得元素其后紧邻的同辈元素 |
| html() | 取得第一个匹配元素的html内容 |
click事件
<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("#btn1").click(function(){
$("tr:odd").css("background-color","gray");
});
});
</script>
<table>
<tr><td>id</td><td>name</td></tr>
<tr><td>1</td><td>John</td></tr>
<tr><td>2</td><td>Jack</td></tr>
<tr><td>3</td><td>Rose</td></tr>
<tr><td>4</td><td>Mary</td></tr>
</table>
<input type="button" id="btn1" value="ok">
五、DOM对象与jQuery对象
示例：jquery对象与DOM对象的相互转换
<script type="text/javascript" language="javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("#btn1").click(function(){
document.getElementById("div1").innerHTML="<font color='yellow'>yellow</font>";
});
$("#btn2").click(function(){
$("#div1").html("<font color='green'>green</font>");
});
$("#btn3").click(function(){
//将dom对象转换为jquery对象
//document.getElementById("div1") 此为dom对象
var d1=document.getElementById("div1");
var $d2=$(d1);
$d2.html("<font color='blue'>blue</font>");
});
$("#btn4").click(function(){
//将jquery对象转换为dom对象
//$("#div1") 此为jquery对象
var x=$("#div1")[0];
x.innerHTML="<font color='red'>red</font>";
});
});
</script>
<div id="div1">div1</div>
<input type="button" id="btn1" value="ok1">
<input type="button" id="btn2" value="ok2">
<input type="button" id="btn3" value="ok3">
<input type="button" id="btn4" value="ok4">