jquery学习总结

第一部分

首先jquery要引入外包  官网下载http://jquery.com/download/

再引入函数两种写法用的比较多的是第二种

$(document).ready(function(){})

$(function(){})

js中入口函数是页面中所有资源（包括图片和文件）加载完成之后才开始执行

jquery中入口函数只会等待文档树价加载完成就会执行，并不会等待图片，文件加载

第二部分

jquery与dom区别 转换

jquery其实就是dom对象的包装集类似于衣服和洗衣机的关系

 jquery对象转换为dom第一种 var $li=$("li")(推荐)第二种$li.get(0)

dom对象转化为jquery var $obj=$(domObj);//$(document).ready(function(){})就是典型的dom对象转化为jquery

第三部分：

jquery选择器：1基本选择器 2,层级选择器  3过滤选择器 4筛选选择器

1：id选择器（"#id"）类选择器（".class"） 标签选择器（"div"） 并集选择器("div,p,li")用逗号分隔，只要符合条件之一就可以获取所有的div li p元素

    交集选择器("div.redClass")  选择器1和选择器2之间没有空格 class为redClass的div元素 注意区分后代选择器

2：子代选择器 $（"ul>li"）用>获取儿子层级的元素并不会获取孙子的  后代选择器$("ul li")使用空格表示可以获取ul下的所有li元素

3：过滤选择器都带冒号：例如：eq（index）$("li:eq(2)").css("color","red")获取li元素，选取索引号为2的元素，索引号index从0开始  ：odd是奇数 ：even是偶数

4 ：和过滤有点类似用法不同 

children（selector）$("ul").children("li")相当于$("ul>li")相当于子类选择器

 find(selector)   $("ul").find("li")相当于后代选择器

sibings(selector) $("#first").siblings("li")查找兄弟节点

parent()  $("#first").parent()找爸

eq（index）相当于$("li:eq(2)")

next   $("li").next()找下一个兄弟

prev  $("li").prev()

【案例：下拉菜单】this+children+mouseenter+mouseleave

【案例：突出展示】siblings+find

【案例：手风琴】next+parent

【案例：淘宝精品】index+eq

第四部分（重点）

jquery操作样式

css操作 

1，设置单样式  css（name，value）；例  $("#one").css("background","gray")

2 设置多样式  css（obj）例 $("#one").css({"background":"gray","width":"400px"})

获取样式：css（name）要获取name的全名例如$("div").css("backgroundColor")

class操作

1 添加样式 addClass（name）name为添加样式的类名 例$("div").addClass("one")

移除样式 removeClass（name）name为添加样式的类名 例$("div").removeClass("one")

判断是否有样式hasClass（name）

切换样式toggleClass（name）