• 
  
• 
  
  
  

day01 JQuery1. JQuery 基础1. 概念

一个JavaScript的框架，简化JS开发

jQuery是一个快速、简洁的JavaScript框架，设计宗旨是“write less,do more”.封装js的常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和ajax交互。

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

2. 快速入门

• 步骤：
  • 下载JQuery
    • 目前有三个大版本：
      1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
          2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
          3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求， 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
           目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日
    • jquery-xxx.js和jquery-xxx.min.js区别：
      • jquery-xxx.js：开发版本，给程序员看的，有良好的缩进和注释
      • jquery-xxx.min.js：生产版本，程序中使用，没有缩进，体积小一些，程序加载更快。
        
        
      
      
  • 导入jQuery的js文件：导入min.js文件
  • 使用  var div1=$("#div1"); alert(div1.html())
    
    
  
  

3. jquery对象和js对象的区别和转换

• jQuery对象在操作时更加方便
• jQuery对象和js对象方法不通用
• 相互转换
  • jq --> js : jq对象[索引] 或者 jq对象.get(索引)
  • js --> jq:  $(js对象)
    
    
  
  

2. 选择器

筛选具有相似特征的元素(标签)

1. 基本操作学习

• 事件绑定
  
  // 1. 获取b1按钮
  $("#b1").click(function(){
    alert("abc");
  });
• 入口函数
  
  $(function(){
    
  });
• window.onload和$(function)的区别
  • window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉
  • $(function) 可以定义多次的
    
    
• 样式控制：css方法
  
  // $("#div1").css("background-color","red")
  $("#div1").css("backgroundColor","pink");
  

2.1 基本选择器1. 标签选择器(元素选择器)

语法：$("html标签名")获取所有匹配标签名称的元素

2. id选择器

语法：$("#id的属性值") 获取与指定id属性值匹配的元素

3. 类选择器

语法：$(".class的属性值") 获取与指定class属性值匹配的元素

4. 并集选择器

语法：$("选择器1，选择器2....") 获取多个选择器选中的所有元素

2.2 层级选择器1. 后代选择器

语法：$("A B") 选择A元素内部的所有B元素（包括孙子）

2. 子选择器

语法：$("A > B") 选择A元素内部的所有B子元素（儿子）

2.3 属性选择器1. 属性名称选择器

语法：$("A[属性名]") 包含指定属性的选择器

2. 属性选择器

语法：$("A[属性名]='值'")包含指定属性等于指定值的选择器

3. 复合属性选择器

语法：$("A[属性名1]='值1'[]...")包含多个属性条件的选择器

2.4 过滤选择器1. 首元素选择器

语法：:first 获得选择的元素中的第一个元素

2. 尾元素选择器

语法：:last 获取选择的元素中的最后一个元素

3. 非元素选择器

语法：:not(selector) 不包括指定内容的元素

4. 偶数选择器

语法：:even 偶数，从0开始计数

5. 奇数选择器

语法： :odd奇数，从0开始计数

6. 等于索引选择器

语法：:eq(index) 指定索引元素

7. 大于索引选择器

语法：:gt(index) 大于指定索引元素

8. 小于索引选择器

语法：:lt(index) 小于指定索引元素

9. 标题选择器

语法：:header 获取标题(h1~h6) 元素，固定写法

2.5 表单过滤选择器1. 可用元素选择器

语法：:enabled 获取可用元素

2. 不可用元素选择器

语法： :disabled 获取不可用元素

3. 选中选择器

语法：:checked 获取单选/复选框选中的元素

​        :selected 获取下拉框选中的元素

3. DOM操作1. 内容操作

• html() 获取/设置元素的标签体内容 <a><font>内容</font></a>--><font>内容</font>
• text() 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a>-->内容
• val()  获取/设置元素的value属性值
  
  

2. 属性操作

• 通用属性操作
  • attr() 获取/设置元素的属性
  • removeAttr() 删除属性
  • prop() 获取/设置元素的属性
  • removeProp() 删除属性
    
    
  
  

attr 和 prop区别：

• 如果操作是是元素的固有属性，建议使用prop
• 如果操作的是元素自定义的属性，建议使用attr
  
  

• 对class属性操作
  • addClass():  添加class属性值
  • removeClass(): 删除class属性值
  • toggleClass(): 切换class属性
  • css()
    
    
  
  

toggleClass("one"): 判断如果元素对象上存在class="one",则将属性值one删掉；如果不存在class="one"，添加

• CRUD操作
  • append(): 父元素将子元素追加到末尾
    • 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
      
      
  • prepend()：父元素将子元素追加到开头
    • 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
      
      
  • appendTo():
    • 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾
      
      
  • prependTo()：
    • 对象1.prependTo(对象2)：将对象1添加到对象2元素内部，并且在开头
      
      
  • after()：添加元素到元素后边
    • 对象1.after(对象2)：将对象2添加到对象1后边，对象1和对象2是兄弟关系
      
      
  • before(): 添加元素到元素前边
    • 对象1.before(对象2)：将对象2添加到对象1前边，对象1和2是兄弟
      
      
  • insertAfter()：
    • 对象1.insertAfter(对象2)：将对1添加到对象2后边，对象1和对象2是兄弟关系
      
      
  • insertBefore()
    • 对象1.insertBefore(对象2)：将对象1添加到对象2前边，对象1和2是兄弟
      
      
  • remove(): 移除元素
    • 对象.remove() 将对象删除掉
      
      
  • empty(): 清空元素的所有后代元素
    • 对象.empty() 将对象的后代元素全部清空，但是保留当前对象及其属性节点。
      
      
    
    
  
  

jquery高级1. 动画1. 三种方式显示和隐藏元素

• 默认显示和隐藏方式
  • show([speed],[easing],[fn])
    • 参数
      • speed 动画的速度。三个预定义的值("slow","normal","fast")或表示
      • easing：用来切换效果，默认“swing”，可用参数“linear”
        • swing: 动画执行效果：先慢，中间快，最后又慢
        • linear：动画执行时速度是匀速
          
          
      • fn: 在动画完成时执行的回调函数，每个元素执行一次
        
        
      
      
  • hide()
  • toggle()
    
    
• 滑动显示和隐藏
  • slideDown(xxx)
  • slideUp(xxx)
  • slideToggle(xxx)
    
    
• 淡入淡出显示和隐藏方式
  • fadeIn(xxx)
  • fadeOut(xxx)
  • fadeToggle(xxx)
    
    
  
  

2. 遍历

• js的遍历方式
  
  

• for(初始化值;循环结束条件;步长)
  
  

• jq的遍历方式
  • jq对象.each(callback)
    • 语法：jquery对象.each(function(index,element(){}));
      • index：就是元素在集合中的索引
      • element：就是集合中的每一个元素对象
      • this：集合中的每一个元素对象
        
        
    • 回调函数返回值
      • false：如果当前function返回为false，则结束循环break
      • true：如果当前function返回为true，结束本次循环，继续下次循环continue
        
        
      
      
  • $.each(object,[callback])
  • for...of: jquery 3.0版本之后提供的方式
    • for(元素对象 of 容器对象)
      
      
    
    
  
  

不管用js方式或jq方式去遍历数组，里面得到的对象都是JS对象，如果要调用JQ方式需要先转换！

3. 事件绑定

• jquery标准的绑定方式
  • jq对象.事件方法(回调函数);
    • 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
      
      
    
    
• on绑定事件/off解除绑定
  • jq对象.on("事件名称",回调函数)
  • jq对象.off("事件名称")
    • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
      
      
    
    
• 事件切换：toggle
  • jq对象.toggle(fn1,fn2...)
  • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
    
    
  
  

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

4. 插件

增强jquery的功能

• 实现方式
  • $.fn.extend(object)  对象级别  对当前页面的方法的抽取，重复利用
    • 增强通过Jquery获取的对象的功能  $("#id")
      
      
  • $.extend(object)  全局级别 直接使用，一般用于实现一些算法
    • 增强JQuery对象自身的功能  $/jQuery
      
      
    
    
  
  

• 
  
• 
  
  
  

day01 JQuery1. JQuery 基础1. 概念

一个JavaScript的框架，简化JS开发

jQuery是一个快速、简洁的JavaScript框架，设计宗旨是“write less,do more”.封装js的常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和ajax交互。

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

2. 快速入门

• 步骤：
  • 下载JQuery
    • 目前有三个大版本：
      1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
          2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
          3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求， 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
           目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日
    • jquery-xxx.js和jquery-xxx.min.js区别：
      • jquery-xxx.js：开发版本，给程序员看的，有良好的缩进和注释
      • jquery-xxx.min.js：生产版本，程序中使用，没有缩进，体积小一些，程序加载更快。
        
        
      
      
  • 导入jQuery的js文件：导入min.js文件
  • 使用  var div1=$("#div1"); alert(div1.html())
    
    
  
  

3. jquery对象和js对象的区别和转换

• jQuery对象在操作时更加方便
• jQuery对象和js对象方法不通用
• 相互转换
  • jq --> js : jq对象[索引] 或者 jq对象.get(索引)
  • js --> jq:  $(js对象)
    
    
  
  

2. 选择器

筛选具有相似特征的元素(标签)

1. 基本操作学习

• 事件绑定
  
  // 1. 获取b1按钮
  $("#b1").click(function(){
    alert("abc");
  });
• 入口函数
  
  $(function(){
    
  });
• window.onload和$(function)的区别
  • window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉
  • $(function) 可以定义多次的
    
    
• 样式控制：css方法
  
  // $("#div1").css("background-color","red")
  $("#div1").css("backgroundColor","pink");
  

2.1 基本选择器1. 标签选择器(元素选择器)

语法：$("html标签名")获取所有匹配标签名称的元素

2. id选择器

语法：$("#id的属性值") 获取与指定id属性值匹配的元素

3. 类选择器

语法：$(".class的属性值") 获取与指定class属性值匹配的元素

4. 并集选择器

语法：$("选择器1，选择器2....") 获取多个选择器选中的所有元素

2.2 层级选择器1. 后代选择器

语法：$("A B") 选择A元素内部的所有B元素（包括孙子）

2. 子选择器

语法：$("A > B") 选择A元素内部的所有B子元素（儿子）

2.3 属性选择器1. 属性名称选择器

语法：$("A[属性名]") 包含指定属性的选择器

2. 属性选择器

语法：$("A[属性名]='值'")包含指定属性等于指定值的选择器

3. 复合属性选择器

语法：$("A[属性名1]='值1'[]...")包含多个属性条件的选择器

2.4 过滤选择器1. 首元素选择器

语法：:first 获得选择的元素中的第一个元素

2. 尾元素选择器

语法：:last 获取选择的元素中的最后一个元素

3. 非元素选择器

语法：:not(selector) 不包括指定内容的元素

4. 偶数选择器

语法：:even 偶数，从0开始计数

5. 奇数选择器

语法： :odd奇数，从0开始计数

6. 等于索引选择器

语法：:eq(index) 指定索引元素

7. 大于索引选择器

语法：:gt(index) 大于指定索引元素

8. 小于索引选择器

语法：:lt(index) 小于指定索引元素

9. 标题选择器

语法：:header 获取标题(h1~h6) 元素，固定写法

2.5 表单过滤选择器1. 可用元素选择器

语法：:enabled 获取可用元素

2. 不可用元素选择器

语法： :disabled 获取不可用元素

3. 选中选择器

语法：:checked 获取单选/复选框选中的元素

​        :selected 获取下拉框选中的元素

3. DOM操作1. 内容操作

• html() 获取/设置元素的标签体内容 <a><font>内容</font></a>--><font>内容</font>
• text() 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a>-->内容
• val()  获取/设置元素的value属性值
  
  

2. 属性操作

• 通用属性操作
  • attr() 获取/设置元素的属性
  • removeAttr() 删除属性
  • prop() 获取/设置元素的属性
  • removeProp() 删除属性
    
    
  
  

attr 和 prop区别：

• 如果操作是是元素的固有属性，建议使用prop
• 如果操作的是元素自定义的属性，建议使用attr
  
  

• 对class属性操作
  • addClass():  添加class属性值
  • removeClass(): 删除class属性值
  • toggleClass(): 切换class属性
  • css()
    
    
  
  

toggleClass("one"): 判断如果元素对象上存在class="one",则将属性值one删掉；如果不存在class="one"，添加

• CRUD操作
  • append(): 父元素将子元素追加到末尾
    • 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
      
      
  • prepend()：父元素将子元素追加到开头
    • 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
      
      
  • appendTo():
    • 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾
      
      
  • prependTo()：
    • 对象1.prependTo(对象2)：将对象1添加到对象2元素内部，并且在开头
      
      
  • after()：添加元素到元素后边
    • 对象1.after(对象2)：将对象2添加到对象1后边，对象1和对象2是兄弟关系
      
      
  • before(): 添加元素到元素前边
    • 对象1.before(对象2)：将对象2添加到对象1前边，对象1和2是兄弟
      
      
  • insertAfter()：
    • 对象1.insertAfter(对象2)：将对1添加到对象2后边，对象1和对象2是兄弟关系
      
      
  • insertBefore()
    • 对象1.insertBefore(对象2)：将对象1添加到对象2前边，对象1和2是兄弟
      
      
  • remove(): 移除元素
    • 对象.remove() 将对象删除掉
      
      
  • empty(): 清空元素的所有后代元素
    • 对象.empty() 将对象的后代元素全部清空，但是保留当前对象及其属性节点。
      
      
    
    
  
  

jquery高级1. 动画1. 三种方式显示和隐藏元素

• 默认显示和隐藏方式
  • show([speed],[easing],[fn])
    • 参数
      • speed 动画的速度。三个预定义的值("slow","normal","fast")或表示
      • easing：用来切换效果，默认“swing”，可用参数“linear”
        • swing: 动画执行效果：先慢，中间快，最后又慢
        • linear：动画执行时速度是匀速
          
          
      • fn: 在动画完成时执行的回调函数，每个元素执行一次
        
        
      
      
  • hide()
  • toggle()
    
    
• 滑动显示和隐藏
  • slideDown(xxx)
  • slideUp(xxx)
  • slideToggle(xxx)
    
    
• 淡入淡出显示和隐藏方式
  • fadeIn(xxx)
  • fadeOut(xxx)
  • fadeToggle(xxx)
    
    
  
  

2. 遍历

• js的遍历方式
  
  

• for(初始化值;循环结束条件;步长)
  
  

• jq的遍历方式
  • jq对象.each(callback)
    • 语法：jquery对象.each(function(index,element(){}));
      • index：就是元素在集合中的索引
      • element：就是集合中的每一个元素对象
      • this：集合中的每一个元素对象
        
        
    • 回调函数返回值
      • false：如果当前function返回为false，则结束循环break
      • true：如果当前function返回为true，结束本次循环，继续下次循环continue
        
        
      
      
  • $.each(object,[callback])
  • for...of: jquery 3.0版本之后提供的方式
    • for(元素对象 of 容器对象)
      
      
    
    
  
  

不管用js方式或jq方式去遍历数组，里面得到的对象都是JS对象，如果要调用JQ方式需要先转换！

3. 事件绑定

• jquery标准的绑定方式
  • jq对象.事件方法(回调函数);
    • 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
      
      
    
    
• on绑定事件/off解除绑定
  • jq对象.on("事件名称",回调函数)
  • jq对象.off("事件名称")
    • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
      
      
    
    
• 事件切换：toggle
  • jq对象.toggle(fn1,fn2...)
  • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
    
    
  
  

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

4. 插件

增强jquery的功能

• 实现方式
  • $.fn.extend(object)  对象级别  对当前页面的方法的抽取，重复利用
    • 增强通过Jquery获取的对象的功能  $("#id")
      
      
  • $.extend(object)  全局级别 直接使用，一般用于实现一些算法
    • 增强JQuery对象自身的功能  $/jQuery