JQuery学习笔记

JQuery基础

1.概念：快速简洁的Javascript框架，简化js开发

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的 JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less， Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.快速入门

1.版本问题

1.x 兼容ie678，使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4

2.x 不兼容ie678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x，最终版本：2.2.4

3.x 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。

2.JQuery-xxx.js 与 JQuery.min.js

1. JQuery-xxx.js：开发版本。给程序员看的
2. JQuery.min.js：生产版本，程序使用。

3.使用$()获取，括号里面是选择器

4.js与jq对象的相互转换

1.两者的的对象方法是不通用的

1. jq -> js： jq对象[索引]或者jq对象.get（索引）
   js ->jq： $(js对象)

3.选择器

1.基本选择器

1.标签（元素）选择器
  *语法： $("html标签名")
2.id选择器
  *语法： $("id属性值")
3.类选择器
  *语法： $(".class的属性值")
4.并集选择器
  *语法： $("选择器1，选择器2.....")
--以上都能获取与之匹配的元素

2.层级选择器

1.后代选择器
  *语法： $("A  B") 选择A元素内的所有B元素(包含孙子辈)
2.子选择器
  *语法： $("A > B") 选择A元素内的所有B子元素(只有儿子辈)

3.属性选择器

1.属性名称选择器
 *语法：$("A[属性名]") 包含指定属性的选择器
2.属性选择器
 *语法：$("A[属性名='值']") 包含指定属性等于属性值选择器
3.复合属性选择器
 *语法：$("A[属性名='值'][ ]...") 包含多个属性的选择器  
4. ^以什么开始 $以什么结束 *包含什么
    例： div[title*='abc']

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） 获得标题元素，固定写法

5.表单过滤选择器

1.可用元素选择器
    *语法：enabled 获得可用元素
2.不可用元素选择器
     *语法：disabled 获得不可用元素
3.选中选择器
     *语法：checked 获得单选/复选框选中的元素
     *语法：selected 获得下拉框选中的元素

4.DOM操作

1.内容操作

1.html()
    $().html（）：获取/设置元素的标签体内容
2.text()
    $().text（）：获取/设置元素的标签体纯文本内容
3.val()
    $().val():获取/设置元素的value属性值

2.属性操作

2.1通用属性操作

1.attr():获取/设置元素的属性
    $().attr("",""); <--新增自定义属性，后括号为属性值，prop同理！
2.removeattr()：删除属性
3.prop()：获取/设置元素的属性
4.removeprop()：删除属性

*attr prop区别：
    prop一般用于操作元素的固有属性
    attr一般用于操作元素的自定义属性

2.2对class属性操作

1.addClass():添加class属性值
2.removeClass():删除class属性值
3.toggleClass():切换class属性值
    *意思是有变无 无变有，相互转换

3.CRUD操作

1.append():父元素将子元素追加到末尾
    *对象1.append（对象2）：将对象2添加到对象1元素内部的末尾
2.prepend():父元素将子元素追加到开头
    *对象1.append（对象2）：将对象2添加到对象1元素内部的开头
3.appendTo():同append
    *对象1.appendTo（对象2）：将对象1添加到对象2元素内部的末尾
4.prependTo():同prepend

5.after():添加元素到元素后边
    *对象1.after（对象2）：将对象2添加到对象1后边，平行关系
6.before():添加元素到元素前边
7.insertAfter():
    *对象1.after（对象2）：将对象1添加到对象2后边，平行关系
8.insertBefore():

9.remove():移除元素，将对象删除掉
10.empty（）：将对象的后代全部删除，但保留当前对象和他的属性

6.进阶部分

1.动画：三种方式显示和隐藏元素

1.默认显示和隐藏方式

hide：隐藏
show：显示

$("#hide").click(function(){
         $("p").hide();
    });

$("#show").click(function(){
         $("p").show();
    });

$("button").click(function(){
    $("p").hide(1000);//1000为毫秒值
});

toggle：

2.滑动显示和隐藏

3.淡入淡出显示和隐藏

2.遍历

jq.each（）

3.事件绑定

1.jq对象.事件方法（回调函数）

2.on/off事件绑定

3.时间切换toggle，jq对象.toggle（fn1，fn2...）-->点击一次，便往下执行一次，执行完跳回第一个。