jQuery 简介
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
官方下载地址：http://jquery.com/download/
选择器
基本选择器: $("*"), $("#id"), $(".class"), $("element"), $(".class,p,div")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<script>
$("*").css("color","red");
$("*").css("color","red").css("background", "yellow");
$("div").css("color","red");
$("#p1").css("color","red");
$(".div1").css("color","red");
$(".div1, #p1").css("color","red");
</script>
</body>
层级选择器: $(".outer div"), $(".outer>div"), $(".outer+div"), $(".outer~div")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<p>hello p4</p>
<dir class="outer">
<div>
<p>hello p2</p>
</div>
<p>hello p3</p>
</dir>
<p>hello p5</p>
<p>hello p6</p>
<script>
$(".outer p").css("color","red"); // outer 下所有的 p 元素
$(".outer>p").css("color","red"); // outer 下的子 p 元素
$(".outer+p").css("color","red"); // outer 下面的一个 p 元素
$(".outer~p").css("color","red"); // outer 下面所有的 p 元素
</script>
</body>
基本筛选器: $("li:first"), $("li:eq(2)"), $("li:even"), $("li:gt(1)")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div">hello div
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<script>
$(".div li:first").css("color","green");
$(".div li:last").css("color","green");
$(".div li:eq(2)").css("color","green");
$(".div li:lt(2)").css("color","green");
$(".div li:gt(1)").css("color","green");
</script>
</body>
属性选择器: $('[id="div1"]'), $('["lily="luck"][id]')
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p lily="good">hello p1</p>
<p lily="luck">hello p2</p>
<script>
$("[lily]").css("color","pink");
$("[lily='luck']").css("color","pink");
</script>
</body>
表单选择器: $("[type='text']")----->$(":text") 注意只适用于input标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text">
<input type="button">
<script>
$("[type='button']").css("width","200px");
$(":button").css("width","200px");
</script>
</body>
筛选器
查找筛选器: $("div").children(".test"), $("div").find(".test")
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div>hello4</div>
</div>
<script>
$(".div1").children().css('color',"red")
$(".div1").children(".div2").css('color',"red") // 只找儿子辈
$(".div1").find(".div3").css("color","red") // 后辈都找
</script>
</body>
$(".test").next(), $(".test").nextAll(), $(".test").nextUntil()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div8">hello8</div>
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div class="div4">hello4</div>
<div class="div5">hello5</div>
<div class="div6">hello6</div>
<div class="div7">hello7</div>
</div>
<script>
$(".div2").next().css("color","red");
$(".div2").nextAll().css("color","red");
$(".div2").nextUntil(".div6").css("color","red"); //不包含 .div6
</script>
</body>
$("div").prev(), $("div").prevAll(), $("div").prevUntil()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div8">hello8</div>
<div class="div9">hello9</div>
<div class="div10">hello10</div>
<div class="div2">hello2
<div class="div3">
hello3
</div>
</div>
<div class="div4">hello4</div>
<div class="div5">hello5</div>
<div class="div6">hello6</div>
<div class="div7">hello7</div>
</div>
<script>
$(".div2").prev().css("color","red");
$(".div2").prevAll().css("color","red"); // 在同级下起作用
$(".div2").prevUntil(".div8").css("color","red"); // 不包括 .div8
$(".div3").parent().css('color',"red");
$(".div3").parents().css('color',"red");
$(".div3").parentsUntil("body").css('color','red');
$(".div2").siblings().css('color','red');
</script>
</body>
jQuery 对象和DOM对象 相互转化
# DOM 对象： obj = document.getElementById('sel')
# jQuery 对象： $(obj)
# jQuery 对象：$('#'sel)
# DOM 对象： $('#'sel)[0]