JavaWeb笔记(15)-JQuery基础

1. JQuery：

1. JQuery：一个快速简介的Javascript框架
    * 优化了文档操作
    * 优化了事件处理
    * 优化了动画设计
    * 优化了Ajax交互
    * ...
2. 本质：一些js文件，封装了js的原生代码
3. 版本：
    目前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插件不支持这个版本。
		 目前该版本是官方主要更新维护的版本。

2. JQuery使用步骤

1. 下载JQuery
    a. 保持兼容性：使用1.x版本
    b. 常用：3.x版本
2. 导入JQuery的js文件
    a. 查看版本：jquery-x.xx.x.js
    b. 开发版本：jquery-x.xx.x.min.js -- 没有缩进，体积小
3. 使用：
    a. JQuery对象和JS对象的区别
        1. JQuery对象：通过JQuery方式获取的对象
            var divs_JQuery = $("div1");
            * JQuery方式获取所有名称为div的html元素对象
            * divs_JQuery为HTMLCollection类型
        2. JS对象：通过JS原生方式获取的对象
            var divs_JS = document.getElementByTagName("div1");
            * JS方式获取所有名称为div的html元素对象
            * divs_JS为Object类型
        3. 异同
            divs_JQuery和divs_JS都可以当作数组使用
            但是只有divs_JQuery对象才能使用JQuery的成员方法
            只有divs_JS对象才能使用JS的成员方法，两者的方法是不通用的
    b. JQuery对象和JS对象的转换
        1. JQuery对象 --> JS对象：
            * JQuery对象[索引]
            * JQu对象.get(索引)
        2. JS对象 --> JQuery对象
            * $(JS对象)
    c. 相互转换可以使用两者中便利的方法

3. JQuery中的选择器

1. 基本语法：
    a. 事件绑定：
        1. JQuery对象.事件(函数对象);
            $("#btn_test").click(function () {
                //按键点击事件的响应代码
            });
    b. 入口函数：
        1. 在JS中使用window.onload = function() {}控制DOM文档加载完成生效
        2. 在JQuery中，入口函数表示为：
            $(function() {
                //DOM文档加载完成后生效的代码
            });
        3. 两者区别：
            * window.onload只能注册一次，后者会覆盖前者
            * $(function() {})能注册多次
    c. 样式控制：
        1. JQuery对象.css("属性名","属性值");
2. 选择器：
    a. 基本选择器：
        1. 标签选择器：
            $("HTML标签名")
        2. id选择器：
            $("#id属性值")
        3. 类选择器：
            $(".class属性值")
        4. 并集选择器：
            $("选择器1, 选择器2, ... ")
    b. 层级选择器：
        1. 后代选择器：
            $("标签名A 标签名B") -- 选择A元素内部包含子标签内部的所有B元素
        2. 子选择器：
            $("标签名A > 标签名B") -- 选择A元素中仅为子元素的B元素
    c. 属性选择器：
        1. 属性名称选择器：
            $("标签名[属性名]")
        2. 属性和属性值选择器：
            $("标签名A[属性名='属性值']")
            $("标签名A[属性名!='属性值']") -- 选中属性的属性值不等于指定属性值，或者不包含该属性的元素
            $("标签名A[属性名^='值']") -- 选中属性的属性值以指定属性值开头的元素
            $("标签名A[属性名$='值']") -- 选中属性的属性值以指定属性值结束的元素
            $("标签名A[属性名*='值']") -- 选中属性的属性值包含指定属性值的元素
        3. 复合属性选择器：
            $("标签名A[属性名='值'][]...") -- 选中多个属性都满足要求的元素
    d. 过滤选择器：
        1. 首元素选择器：
            $("标签名:first")
        2. 尾元素选择器：
            $("标签名:last")
        3. 非元素选择器：
            $("标签名:not(选择器A)") -- 选中标签中不满足选择器A的元素，如$("div:not(.one)")
        4. 顺序选择器：
            $("标签名:even") -- 选择标签名的索引为偶数的标签，索引从0开始
            $("标签名:odd") -- 选择标签名的索引为奇数的标签，索引从0开始
            $("标签名:eq(索引)") -- 选择标签名的索引为指定数的标签，索引从0开始
            $("标签名:gt(索引)") -- 选择标签名的索引大于指定数的标签，索引从0开始
            $("标签名:lt(索引)") -- 选择标签名的索引小于指定数的标签，索引从0开始
        5. 标题选择器：
            $("header:h1~h6") -- 选择h1~h6中的某类标签
    e. 表单选择器：
        1. 可用元素选择器：
            $("标签名:enabled") -- 选择可用的标签，如$("input[type='text']:enabled")
        2. 不可用元素选择器：
            $("标签名:disabled") -- 选择可用的标签，如$("input[type='text']:disabled")
        3. 复选框选中元素选择器：
            $("标签名:checked") -- 选择可用的标签，如$("input[type='checkbox']:checked")
        4. 下拉框选中元素选择器：
            $("标签名:selected") -- 选择可用的标签，如$("select > option:selected")
                                 -- 下拉框中添加属性multiple="multiple"可以选择多个下拉元素
3. DOM操作：
    a. 内容操作：
        1. html()：获取/设置元素的标签体内容，包含子标签
        2. text()：获取/设置元素的标签体纯文本内容
        3. val()：获取/设置元素的value属性值
        注意：
            * 获取为空参函数，函数返回值为获取的内容element.val()
            * 设置为带参函数，参数为设置的内容element.val("newValue")
    b. 属性操作：
        * 通用操作：
            1. attr()：获取/设置(新增)元素的属性值 -- 操作标签的自定义属性时使用
            2. removeAttr():删除属性
            3. prop()：获取/设置(新增)元素属性值 -- 操作标签的固有属性时使用，固有属性查看标签的文档
            4. removeProp()：删除属性
        * class属性操作：
            1. addClass()：添加class属性
            2. removeClass()：删除class属性
            3. toggleClass()：切换class属性
                -- toggleClass("class属性值A")表示如果该元素存在class="属性值A"，则删除该属性值A
                -- 如果不存在class="属性值A"，则将属性值A添加到class属性中
    c. CRUD操作：
        1. 父元素.append(子元素)：父元素将子元素追加到末尾
        2. 父元素.prepend(子元素)：父元素将子元素添加到开头
        3. 子元素.appendTo(父元素)：将子元素添加到父元素的末尾
        4. 子元素.prependTo(父元素)：将子元素添加到父元素的开头
        5. 元素1.after(元素2)：将元素2添加到元素1后面
        6. 元素1.before(元素2)：将元素2添加到元素1前面
        7. 元素1.insertAfter(元素2)：将元素1添加到元素2后面
        8. 元素1.insertBefore(元素2)：将元素1添加到元素2前面
        9. 元素.remove()：将对象删除
        10. 元素.empty()：清空对象的所有子元素节点
    d. clone()
        * 复制一个DOM元素对象返回
            元素对象.clone()+