1 jquery是什么
<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
2 什么是jquery对象
Jquery对象是通过jquery包装DOM对象后产生的对象。Jquery对象是jquery独有的。如果一个对象是jquery对象，那么他就可以使用jquery里的方法。
var $variable = jq对象
var variable = DOM对象
jQuery转换成DOM对象:
$variable[0]
jquery的基础语法：
$(selector).action()
3 寻找元素（选择器和筛选器）
1 选择器
基本选择器
$("*") $("#id") $(".class") $("element"元素名) $(".class,p,div")
<p>p</p>
<p id="p2">pp</p>
<p class="p3">ppp</p>
<div>DIV</div>
<div class="outer">
<p>ppp</p>
<div class="inner">
<p>pppp</p>
</div>
</div>
<p>ppppppppp</p>
$("*").css("color","red") ; ##通配符
$("p").css("color","red"); ##根据标签查找
$("#p2").css("color","red");##根据id查找
$(".p3").css("color","red");##根据类名查找
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div"只包括后面的标签)
$(".outer p").css("color","red");##后代
$(".outer+p").css("color","red");##毗邻
$(".outer~p").css("color","red");##兄弟
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div"只包括后面的标签)
$(".outer p").css("color","red");##后代
$(".outer+p").css("color","red");##毗邻
$(".outer~p").css("color","red");##兄弟
属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
<input type="text" alex="123">
<script src="jquery-3.2.1.js"></script>
<script>
$("[alex]").css("color","red")##引用属性
</script>
表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
<input type="text" name="alex" value="123">
<script src="jquery-3.2.1.js"></script>
<script>
$("[type='text']").css("color","red")
</script>
筛选器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
<ul>
<li class="item active">111</li>
<li class="item">222</li>
<li class="item">333</li>
<li class="item items">444</li>
<li class="item">555</li>
</ul>
<div class="div1">
<div class="div2">
<p id="p1">ppp</p>
</div>
<p class="p2">pppppp</p>
<a href=""></a> </div>
<script src="jquery-3.2.1.js"></script>
<script>
$("li").eq(2).css("color","red") ##查找索引值为2的标签
var $res=$("li").hasClass("item");##判断li标签是否有类名item
console.log($res)
>>true
</script> 查找筛选器
$("div").children(".test") $("div").find(".test") <div class="div1">
<div class="div2">
<p id="p1">PPP</p>
</div>
<p class="p2">PPPPP</p>
<a href="">click</a>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".div1").children(".p2").css("color","yellow");##查找类名为div1的孩子
$(".div2").find("#p1").css("color","red")
$(".test").next() $(".test").nextAll() $(".test").nextUntil() ##同级下面 $(".div2").next(".p2").css("color","blue")
$("ul li").nextAll(".item").css("color","red") $("div").prev() $("div").prevAll() $("div").prevUntil() ##同级上面 $(".p2").prev("div").css("color","red") $(".test").parent() $(".test").parents() $(".test").parentUntil()