什么JQuery:
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的JS代码和HTML页面代码进行分离
JQ入门：
1 2 3 4 56 7 8 9 38 39 40 41
JQ和JS对象之间的转换：
1 2 3 4 56 7 30 31 32 33 34 35 这里的内容一会要被JS/JQ代码修改掉363738 这里的内容一会要被JS/JQ代码修改掉11113940 41
动画效果：
1 $(function(){ 2 //隐藏页面图片 3 $("#btn2").click(function(){ 4 //获得img 5 // $("#img1").hide(10000); 6 // $("#img1").slideUp(500); 7 // $("#img1").fadeOut(5000); 8 $("#img1").animate({ width:"1366px",opacity:"0.2"},5000); 9 });10 });
网页定时弹出广告：
1 2 3 4 56 7 15 33 34 35 36 37
36 37
JQuery中的选择器
让我们能够更加精确找到我们要操作的元素
-
ID选择器 : #ID的名称
-
类选择器: 以 . 开头 .类名
-
元素选择器: 标签的名称
-
通配符选择器: *
-
选择器,选择器: 选择器1,选择器2
表单选择器：
1 $(function(){2 $(":text").css("background-color","yellow");3 4 $("#btn1").click(function(){5 $("select option:selected").css("background-color","chartreuse");6 alert($("option:selected").size());7 });8 });
层级选择器：
1 8
过滤器：
1
选择器：
1
属性选贼器：
全选和全部选：
1 $(function(){ 2 //绑定点击事件 3 //this 代表的是当前函数的所有者 4 $("#checkAll").click(function(){ 5 //获取当前选中状态 6 // alert(this.checked); 7 //获取所有分类项的checkbox 8 // 选择器[属性名称='属性值'] 9 // $("input[type='checkbox']:gt(0)").prop("checked",this.checked);10 11 //使用层级选择器来实现 tbody > tr > td > input12 // $("tbody > tr > td > input").prop("checked",this.checked); //这个可行13 14 // #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]15 $("input").prop("checked",this.checked);16 17 });18 });
省市联动：JQ遍历
1 2 3 4 56 7 48 49 50 51 57 58 61 62
下拉列表左右选择：
1 2 3 4 56 14 15 29 30 31 32
| 分类名称 | 3536 |
| 分类描述 | 3940 |
| 分类商品 | 4344 45 57 58 70 | 71
| 74 75 | 76|