jquery第一季概述：
什么是jquery:
jquery是一个js框架
这个框架可以帮我快速方便的操作html的css样式，修改html内容，查找html元素
为什么要学习jquery：
>jquery可以兼容大部分浏览
>jquery代码比较简洁
>jquery应用非常广泛
注意:
jquery2.0版本之后不再兼容ie6,7,8
学习之前先问一下：
what why where how
如何使用jquery
1.需要导入jquery-3.1.1.js文件到项目
2.需要在要使用jquery-3.1.1.js的页面中引入该js文件
<script src =""></script>
如何获取一个jquery对象
var $a =$("#one"); 获取id为one的所有元素
$a.val() ; 获取a的value值
$a.html(); 获取a的innerHTML
jquery对象和js对象之间的转换：
js--->jquery
var j =document.getElementById("one");
var $j = $(j);
jquery--->js
var $a =$("#one");
var a = $a.get(0);
在jquery中如何表示页面已经加载完毕？
$(document).ready(function(){
alert("xxx");
})
该方法和window.onload方法之间的区别：
如果我在一个页面写了多个window.onload，那么最后一个window.onload会把前面的覆盖掉。
如果写了多个$(document).ready，不会覆盖，内部会有一个栈队，会依次执行队列里面的每 个$(document).ready
选择器的分类：
基本选择器：
层次选择器：
基本过滤选择器：内容过滤选择器：
可见元素过滤器
属性选择器：
子元素过滤选择器表单选择器
表单对象属性过滤选择器
详解：
基本选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-3.1.1.js"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" />
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
选择器测试的完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-3.1.1.js"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="选择 id为 one 的元素." id="btn1" />
$("#btn1").click(function() {
$("#one").css("background-color", "red");
});
// <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
$("#btn2").click(function() {
$(".mini").css("background-color", "red");
});
// <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
$("#btn3").click(function() {
$("div").css("background-color", "red");
});
// <input type="button" value="选择 所有的元素." id="btn4" />
$("#btn4").click(function() {
$("*").css("background-color", "red");
});
// <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
$("#btn5").click(function() {
$("span,#two").css("background-color", "red");
});
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" />
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>点击 id为one 的元素按钮：效果如下
点击（选择class 为mini的所有元素）按钮，效果图如下：
点击（选择元素名是div 的所有元素）按钮，效果图如下：
点击（选择所有元素）按钮，效果图如下：
点击（选择 所有的span元素和id为two的元素）按钮，效果图如下：
层次选择器的源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择 body内的所有div元素." id="btn1" />
<input type="button" value="在body内,选择子元素是div的。" id="btn2" />
<input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5" />
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>如图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="选择 body内的所有div元素." id="btn1" />
$("#btn1").click(function() {
$("body div").css("background-color", "red");
});
// <input type="button" value="在body内,选择子元素是div的。" id="btn2" />
$("#btn2").click(function() {
$("body>div").css("background-color", "red");
});
// <input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
$("#btn3").click(function() {
$("#one+div").css("background-color", "red");
});
// <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
$("#btn4").click(function() {
$("#two~div").css("background-color", "red");
});
// <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5" />
$("#btn5").click(function() {
$("#two").siblings("div").css("background-color", "red ");
});
});
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择 body内的所有div元素." id="btn1" />
<input type="button" value="在body内,选择子元素是div的。" id="btn2" />
<input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5" />
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>