1：获取jQuery
进入jQuery官网：http://jquery.com
2：在页面中引入jQuery
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
3：使用jQuery弹出提示框
eg:
<script> $(document).ready(function() { alert("我的第一个jQuery示例！"); }); </script>
4:window.onload 与$(document).ready()类似
5:jQuery语法规则
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
语法：$(selector).action() ;
6：jQuery操作页面元素
使用addClass( )方法为元素添加样式
语法：
jQuery 对象.addClass([样式名])；
使用css( )方法设置元素样式
语法：
css("属性","属性值") ; css({"属性1":"属性值1","属性2":"属性值2"...}) ;
使用show( )、hide( ) 方法设置元素的显示和隐藏
语法：
$(selector).show( ); $(selector).hide( );
7：jQuery代码风格
“$”等同于“jQuery”
链式操作（对一个对象进行多重操作，并将操作结果返回给该对象）
隐式迭代（设置一个风格其他的元素都保留改风格样式）
8：dom对象和jquery对象之间的区别
DOM对象，即是我们用传统的方法（iavascript）获得的对象，
Jquery对象即是用jquery类库的选择器获得的对象
jQuery对象是通过jQuery包装DOM 对象后产生的对象，它是jQuery独有的
jQuery对象中无法使用DOM对象的任何方法
9：基本选择器
$("h1").css("color", "blue"); //标签选择器
$(".price").css({"background":"#efefef","padding":"5px"});//类选择器
$("#author").css("clor", " #083499"); //id选择器
$(".intro,dt,dd").css("color", " #ff0000"); //并集选择器
$("*").css("font-weight", "bold"); //全局选择器
10：层次选择器
$(".textRight p").css("color","red"); //后代选择器
$(".textRight>p").css("color", "red"); //子选择器
$("h1+p").css("text-decoration", "underline"); //相邻元素选择器
$("h1~p").css("text-decoration", "underline"); //同辈元素选择器
11：属性选择器
$("#news a[class]").css("background","#c9cbcb");//a标签带有class属性 $("#news a[class=‘hot‘]").css("background", "#c9cbcb"); // class为hot $("#news a[class!=‘hot‘]").css("background", "#c9cbcb");// class不为hot $("#news a[href^=‘www‘]").css("background","#c9cbcb");//以www开头 $("#news a[href$=‘html‘]").css("background", "#c9cbcb");//以html结尾 $("#news a[href*=‘k2‘]").css("background","#c9cbcb"); //包含"k2"的元素
12：基本过滤选择器
:eq(index) 选取索引等于index的元素（index从0开始） $("li:eq(1)" )选取索引等于1的<li>元素
:gt(index) 选取索引大于index的元素（index从0开始） $("li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index) 选取索引小于index的元素（index从0开始） $("li:lt(1) " )选取索引小于1的<li>元素（注：小于1，不包括1）
:header 选取所有标题元素，如h1~h6 $(":header" )选取网页中所有标题元素
:focus 选取当前获取焦点的元素 $(":focus" )选取当前获取焦点的元素
:animated 选择所有动画 $(":animated" )选取当前所有动画元素
eg:
// 标题元素 $(".contain :header").css({"background":"#2a65ba",…});
// 第一个、最后一个元素 $(".contain li:first").css({"font-size":"16px",…}); $(".contain li:last").css("border","none");
// 偶数、奇数元素 $(".contain li:even").css("background","#f0f0f0"); $(".contain li:odd").css("background","#cccccc");
// 小于、大于某个索引值 $(".contain li:lt(2)").css({"color":"#708b02"}); $(".contain li:gt(3)").css({"color":"#b66302"});
13:可见性过滤选择器
通过元素显示状态来选取元素
:visible 选取所有可见的元素 $(":visible")选取所有可见的元素
:hidden 选取所有隐藏的元素 $(":hidden") 选取所有隐藏的元素
eg:
$("p:hidden").show(); $("p:visible").hide();