Jq

###jQuery

• 什么是jQuery
  1. 是一个JavaScript框架
  2. 让程序员写的更少 实现的更多
  3. 简化原生js代码
  4. jQuery本身就是通过js语言所写的一个js文件
  5. 可以像css一样通过选择器查找元素
     js: var div = document.getElementById(“id”);
     jq: $("#id")
  6. 可以像css一样批量添加样式
     js: var imgs = document.getElementsByTagName(“img”);
     for(var i=0;i<imgs.length;i++){
     imgs[i].style.display=“none”;
     }
     jq: $(“img”).css(“display”,“none”);
  7. 可以解决部分兼容性问题
     ####引入jQuery
• 由于jq本身就是一个js文件 所以引入方式和一个普通的js文件一样通过Script标签的src属性引入
  ####js对象和jq对象互相转换

1. js转jq
   var jq = $(js);
2. jq转js
   var js = jq[0];
   ###选择器
   ####基础选择器
3. 标签名选择器 $(“div”)
4. id选择器 $("#id")
5. 类选择器 $(".class")
6. 分组选择器 $(“div,#id,.class”)
7. 任意元素选择器 $("*")
   ####层级选择器
8. $(“div span”) 匹配div里面所有的span
9. $(“div>span”) 匹配div里面span子元素
10. $(“div+span”) 匹配div的弟弟span元素
11. $(“div~span”) 匹配div的弟弟们span元素

• 和层级相关的方法
  1. 匹配元素的所有兄弟元素
     $("#abc").siblings(); //得到id为abc元素的所有兄弟
     $("#abc").siblings(“div”); //得到id为abc元素的所有div兄弟
  2. 匹配元素的哥哥
     $("#abc").prev(); 得到元素的哥哥元素
     $("#abc").prev(“p”); 得到元素的哥哥p元素
  3. 匹配元素的哥哥们
     $("#abc").prevAll(); 得到元素的所有哥哥元素
     $("#abc").prevAll(“span”); 得到元素的所有哥哥元素
  4. 匹配元素的弟弟
     $("#abc").next(); 得到元素的弟弟元素
     $("#abc").next(“p”); 得到元素的弟弟p元素
  5. 匹配元素的弟弟们
     $("#abc").nextAll(); 得到元素的弟弟们元素
     $("#abc").nextAll(“p”); 得到元素的弟弟们p元素
     ####过滤选择器

12. $(“div:first”) 匹配所有div中的第一个div元素
13. $(“div:last”) 匹配所有div中最后一个div元素
14. $(“div:even”) 匹配所有div中下标为偶数的div元素
15. $(“div:odd”) 匹配所有div中下标为奇数的div元素
16. $(“div:eq(n)”) 匹配所有div中下标值为n的div元素
17. $(“div:lt(n)”) 匹配所有div中下标值小于n的div元素
18. $(“div:gt(n)”) 匹配所有div中下标值大于n的div元素
19. $(“div:not(.abc)”) 匹配所有div中class值不为abc
    ####内容选择器
20. $(“div:has§”) 匹配包含p子元素的div
21. $(“div:empty”) 匹配空的div
22. $(“div:parent”) 匹配非空的div
23. $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
    ####可见选择器
24. $(“div:hidden”) 匹配所有隐藏的div
25. $(“div:visible”) 匹配所有可见的div

• 和隐藏显示相关的方法
  $("#abc").hide(); 隐藏
  $("#abc").show(); 显示
  $("#abc").toggle(); 隐藏、显示切换
  ####属性选择器

26. $(“div[id]”) 匹配包含id属性的div元素
27. $(“div[id=‘xxx’]”) 匹配id值为xxx 的div元素
28. $(“div[id!=‘xxx’]”) 匹配id值不为xxx的div元素
    ####子元素选择器
29. $(“div:first-child”) 匹配是div元素，并且是第一个子元素
30. $(“div:last-child”) 匹配是div元素，并且是最后一个子元素
31. $(“div:nth-child(n)”) 匹配是div元素，并且是第n个子元素 从1开始
    ####表单选择器
32. $(":input") 匹配form表单中所有的控件
33. $(":password") 匹配所有密码框
34. $(":radio") 匹配所有单选
35. $(":checkbox") 匹配所有多选
36. $(":checked") 匹配所有选中的单选、多选、下拉选
37. $(“input:checked”) 匹配所有选中的单选和多选
38. $(":selected") 匹配所有选中的下拉选

###选择器回顾

• 基础选择器

39. 标签名 $(“div”)
40. id #id
41. 类 .class
42. 分组 div,#id,.class
43. 任意元素 *

• 层级

44. div span div里面所有span
45. div>span div里面所有span子元素
46. div+span div的弟弟span元素
47. div~span div的弟弟们span元素
48. .siblings(“div”) 所有div兄弟
49. .next() 弟弟元素
50. .nextAll() 弟弟们元素
51. .prev() 哥哥元素
52. .prevAll() 哥哥们元素

• 过滤选择器

53. div:first 第一个div
54. div:last 最后一个div
55. div:even 偶数
56. div:odd 奇数
57. div:eq(n) 第n个
58. div:lt(n) 下标小于n
59. div:gt(n) 下标大于n
60. div:not(.abc) class值不是abc的div

• 内容选择器

61. div:has§ 包含p子元素
62. div:empty 空的div
63. div:parent 非空div
64. div:contains(‘xxx’) 包含xxx文本的div

• 可见选择器

65. div:hidden 匹配所有隐藏div
66. div:visible 匹配所有显示div
67. .show() 显示
68. .hide() 隐藏
69. .toggle() 切换显示状态

• 属性选择器

70. div[id] 包含id属性
71. div[id=‘abc’] id等于abc的div
72. div[id!=‘abc’] id不等于abc的div

• 子元素选择器

73. div:first-child 第一个div子元素
74. div:last-child 最后一个 div子元素
75. div:nth-child(n) 第n个 div 子元素

• 表单选择器

76. :input 匹配所有控件
77. :password 密码框
78. :radio 单选
79. :checkbox 多选
80. :checked 匹配选中的 单选多选下拉选
81. input:checked 匹配选中的单选和多选
82. :selected 匹配所有选中的下拉选
    ###创建和添加元素
83. 创建元素
    var d = $(“
    abc
    ”);
84. 添加元素
    父元素.append(d); //添加到最后面
    父元素.prepend(d);//添加到最前面
85. 插入元素
    $("#abc").before(新元素);
    $("#abc").after(新元素);
86. 删除元素
    $("#abc").remove();
    ####获取和修改元素的文本内容
    $("#abc").text();
    $("#abc").text(“xxx”);
    ####获取和修改元素的html内容
    $("#abc").html(); 获取
    $("#abc").html(“

    abc

    ”);
    ####获取和修改元素的css样式
    $("#abc").css(“left”); 获取left的属性值
    $("#abc").css(“left”,“100px”); 赋值
    $("#abc").css({“width”:“100px”,“height”:“200px”});
    ####获取和修改元素的属性
    $("#abc").attr(“class”); 获取
    $("#abc").attr(“class”,“c1”); 赋值

###获取元素的子元素和父元素
87. 元素对象.children()
88. 元素对象.parent()

###课程回顾：
89. jQuery js框架 写的更少实现的更多
90. 页面加载完成事件 $(function(){ })
91. js->jq var jq = $(js);
92. jq-js var js = jq[0];
93. 选择器

• 基础选择器 div #id .class div,#id *
• 层级 div span div>span div+span div~span .siblings() .prev() .prevAll() .next() .nextAll()
• 过滤选择器 div：first/last/even/odd/eq(n)/lt(n)/gt(n)/not(xxx)
• 内容选择器 div:has§/empty/parent/contains(‘xxx’)
• 可见选择器 div:hidden/visible .show() .hide() .toggle()
• 属性选择器 div[id!=“xxx”]
• 子元素选择器 div:first-child/last-child/nth-child(n)
• 表单选择器 :input :password :radio :checkbox :checked input:checked :selected

94. 创建元素 var d = $("
    ");
95. 添加 prepend() append()
96. 插入 兄弟元素.before() 兄弟元素.after()
97. 删除 元素.remove();
98. 文本相关 .text(“xxx”);
99. html相关 .html(“xxxxxx”);
100. css相关 .css(“color”,“red”) .css({"":"","":""})
101. 属性相关 .attr(“id”,“xxx”);
102. 元素的子元素们 .children()
103. 元素的上级元素 .parent();

###jQuery事件相关

1. 常见事件

• 鼠标事件： 点击事件 click 鼠标移入事件mouseover 鼠标移出mouseout 鼠标按下mousedown 鼠标抬起mouseup 鼠标移动mousemove
• 键盘事件： 键盘按下 keydown 键盘抬起 keyup
• 状态改变事件： 页面加载完成$(function(){}) 获取焦点focus 失去焦点blur 表单提交submit 值改变change 窗口尺寸改变resize

2. 事件模拟
   元素对象.trigger(“事件名”);

3. 鼠标移入移出事件合并
   元素对象.hover(鼠标移入执行方法,鼠标移出执行方法);
   ###动画相关
   if(this.value==“隐藏”){
   $(“img”).hide(3000,function(){
   alert(‘动画做完了’);
   });
   }else if(this.value==“显示”){
   $(“img”).show(2000,function(){
   alert(‘xxx’);
   });
   }else if(this.value==“淡出”){
   $(“img”).fadeOut(1000);
   }else if(this.value==“淡入”){
   $(“img”).fadeIn(2000);
   }else if(this.value==“上滑”){
   $(“img”).slideUp(2000);
   }else if(this.value==“下滑”){
   $(“img”).slideDown(2000);
   }else{//自定义
   $(“img”).animate({“left”:“200px”},1000)
   .animate({“top”:“200px”},1000)
   .animate({“left”:“0px”},1000)
   .animate({“top”:“0px”},1000)
   .animate({“width”:“200px”},1000)
   .animate({“width”:“100px”},1000)
   .fadeOut(3000,function(){
   $(“img”).remove();
   });
   }

    });
   

   });

###jQuery课程回顾

1. 写的更少 实现的更多
2. js-jq var jq = $(js)
3. jq-js var js = jq[0]
4. 选择器

• 基础选择器 div #id .class div,#id *
• 层级选择器 div span div>span div+span div~span
  .siblings() .prev() .prevAll() .next() .nextAll()
• 过滤选择器 div:first/last/even/odd/eq()/lt()/gt()/not()
• 内容选择器 div:has§/empty/parent/contains(‘xxx’)
• 可见选择器 div:hidden/visible .show() .hide() .toggle()
• 属性选择器 div[id!=‘xxx’]
• 子元素选择器 div:first-child/last-child/nth-child(n)
• 表单选择器 :input :radio :password :checkbox :checked input:checked :selected

5. 创建元素 var d = $("
   ");
6. 添加 .prepend() .append()
7. 插入 兄弟.before() 兄弟.after()
8. 删除 元素.remove();
9. 文本相关 .text()
10. html相关 .html()
11. 样式 .css(“color”) .css(“color”,“red”); .css({"":"","":""})
12. 属性 .attr(“属性名”,“值”)
13. 上级元素 parent（） 子元素们 .children()
14. 事件

• 去掉on
• 事件模拟 元素.trigger(“事件名”);
• 移入移出合并 元素.hover(function(){},function(){});

15. 动画
    隐藏hide(3000) 显示 show() 淡出fadeOut() 淡入fadeIn() 上滑slideUp() 下滑slideDown() 自定义animate({},时间);

####雪花作业

1. 雪花尺寸随机20-40
2. 雪花越小移动速度越快
3. 雪花落地后一秒融化
   （淡出 淡出后删除）