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)