课程回顾

1. jQuery
2. 引入方式 和普通的js文件引入方式一样
3. 选择器
4. 基础选择器
5. 过滤选择器
   1. div:first
   2. div:last
   3. div:even
   4. div:odd
   5. div:eq(n)
   6. div:lt(n)
   7. div:gt(n)
   8. div:not(.abc)
6. 内容选择器
   1. div:has(p)
   2. div:empty
   3. div:parent
   4. div:contains('xxx')
7. 可见选择器
   1. div:visible 可见
   2. div:hidden 隐藏
   3. show()显示
   4. hide()隐藏
   5. toggle()切换
8. 层级选择器
   1. div p
   2. div>p
   3. div+p
   4. div~P
   5. siblings()
   6. next()
   7. nextAll()
   8. prev()
   9. prevAll()
   10. children()
   11. parent()
9. 属性选择器
   1. div[id]
   2. div[id='abc']
   3. div[id!='abc']
10. 子元素选择器
    1. div:nth-child(n) 从1开始
    2. div:first-child
    3. div:last-child
11. 表单选择器
    1. ：input
    2. :password
    3. :radio
    4. :checkbox
    5. :checked
    6. input:checked
    7. :selected
12. js和jq对象之间的转换
13. js转jq var jq = $(js);
14. jq转js var js = jq[0];
15. 文档操作
16. 创建元素 var div = $("
    ");
17. 添加元素 父元素.append(div);
18. 插入元素 兄弟元素.before/after(div);
19. 删除元素 div.remove();
20. 文本相关 div.text() div.text("abc")
21. html相关 div.html() div.html("

    aaa

    ")
22. 样式 div.css("color") div.css("color","red") div.css({"width":"200px","height":"100px"});
23. 属性 div.attr("id") div.attr("id","xxx")

事件相关

1. 常见事件
2. 页面加载完成事件 $(function(){})
3. 点击事件 click
4. 获取失去焦点 focus blur
5. 鼠标事件 mouseover mouseout mousedown mouseup mousemove
6. 键盘事件 keydown keyup
7. 屏幕尺寸改变 resize
8. 表单提交 submit
9. 获取事件源的方式和js一样
10. 事件模拟 $("input").trigger("click");
11. hover事件合并 //鼠标移入和移出事件 $("span").hover(function(){ $("span").css("color","red"); },function(){ $("span").css("color","blue"); });

和动画相关

    if(this.value=="隐藏"){
            $("img").hide(3000,function(){
                alert("xxx");
            });
        }else if(this.value=="显示"){
            $("img").show(3000);
        }else if(this.value=="上滑"){
            $("img").slideUp(2000);
        }else if(this.value=="下滑"){
            $("img").slideDown(2000);
        }else if(this.value=="淡出"){
            $("img").fadeOut(2000);
        }else if(this.value=="淡入"){
            $("img").fadeIn(2000);
        }else{//自定义
            $("img").animate({"left":"250px"},1000)
            .animate({"top":"250px"},1000)
            .animate({"left":"0px"},1000)
            .animate({"top":"0px"},1000)
            .animate({"width":"100px",
                "height":"100px"},1000)
            .fadeOut(2000,function(){
                $(this).remove();
            });
        }

下雪练习步骤：

1. 创建demo07 让body背景色为黑色
2. 开启定时器 在定时器里面 得到屏幕的宽和高
3. 创建雪花img 对象
4. 得到一个20-40的随机数作为雪花的尺寸
5. 得到一个0-屏幕宽度的随机数作为雪花出现的left的值
6. 通过设置css设置雪花图片的宽高，和left值 ，定位方式为固定定位
7. 把雪花图片添加到body里面
8. 得到一个3000-8000的随机数 为动画持续时间
9. 给雪花设置一个移动动画 设置top值为屏幕高度-雪花尺寸，移动动画结束后做淡出动画,动画做完把图片删除

代码介绍

1. demo01 省市联动练习
2. demo02 购物车练习
3. demo03 员工练习
4. demo04 特价商品练习
5. demo05 事件模拟和hover
6. demo06 动画相关
7. demo07 下雪练习