JQuery基础
        概念:
                一个JavaScript框架,简化js的开发
                框架是半成品
                JavaScript框架:本质就是一些js文件,封装了js的原生代码

        快速入门
                步骤
                        1.下载JQuery
                                JQuery-*.js与JQuery-*.min.js区别
                                        JQuery-*.js:开发版本,给程序员看的,有良好的缩进和注释,体积会大一些
                                        JQuery-*.min.js(压缩版):生产版本,程序中使用,没有缩进,体积小一些,程序加载更快
                        2.导入JQuery的js文件
                                导入JQuery-*.min.js
                        3.使用
                                JQuery的api
        JQuery对象和js对象区别与转换
                区别:-->都可以当做数组使用,可以调用length,查看长度
                        1.JQuery对象在操作时,更加方便
                        2.JQuery对象和js对象方法不通用
                        3.两者相互转换:
                                JQuery-->js:JQuery对象[索引]或者JQuery对象.get(索引)
                                js-->JQuery:$(js对象)

                        **区别:
                                   1.方法不通用
                                   2.JQuery可以封装js
                        **转换:
                                JQuery-->js:
                                        JQuery对象.get(0)
                                        JQuery对象[0]
                                js-->JQuery:
                                        $(js对象)


        选择器:筛选具有相似特征的元素(标签)
                基本语法学习:
                        1.事件绑定:
                                $(选择器).click(function(){});
                        2.入口函数(dom文档加载完成之后执行该函数中的代码):
                                $(function(){});

                                window.onload = function(){}和$(function(){});
                                        window.onload = function(){}只能定义一次,后边定义的会把前边定义的覆盖
                                        $(function(){}) 可以定义多次
                                                $(function(){
                                                        alert(123);
                                                        alert(234);
                                                });
                        3.样式控制:
                                $(function(){
                                        $(选择器).css("要设置的对应的样式名称","要设置的值")
                                });
                分类:
                        1.基本:
                                标签(元素)选择器
                                        $("标签名称")
                                id选择器
                                        $("#id的属性值")
                                类选择器
                                        $(".类的属性值")
                                并级选择器
                                        $("选择器1,选择器2..")
                        2.层级选择器
                                后代选择器
                                        $("选择器A 选择器B"),选择A所有的后代的样式进行改变
                                子选择器或子元素选择器
                                        $("选择器A>选择器B"),只能选择B选择器进行样式改变

                        3.属性选择器
                                **属性名称选择器  
                                        $("A[属性名称]")
                                **属性选择器     
                                        $("A[属性名称='属性值']")
                                复合属性选择器(看api)  
                                        $(A["属性名称='属性值']....")
                        4.过滤选择器 --> 写法:如 $("div:first")
                                1.首元素选择器:
                                        :first
                                2.尾元素选择器
                                        :last
                                3.偶数选择器
                                        :even   从零开始算
                                4.奇数选择器
                                        :odd   从零开始数
                                5.非元素选择器
                                        :not(选择器)
                                6.标题选择器
                                        :header
                        5.表单属性选择器
                                1.可用元素选择器
                                        :enabled
                                        例子:如 $("input[type='text']:enabled").val("aaa")
                                2.不可用元素选择器
                                        :disabled
                                3.选中选择器:用于多选框时
                                        :checked
                                        例子:如 alert($("input[type='checkbox']:checked").length);
                                4.选中选择器:用于下拉列表时       
                                        :selected
                                        $("job>option:selected")
                                5.表单选择器
                                        针对input标签的
                                        type为指定类型的

                                        :text-->input[type='text']

                                        :input  -->所有表单标签都属于被选中状态
        DOM操作
                1.内容相关操作(在括号内添加参数为设置,不加参数为获取的方法)
                        1.html():获取/设置元素的标签体内容-->带标签,设置即是替换,之前内容不会存在
                                html()相当于js中的innerHTML属性
                        2.text():获取/设置元素的标签体的纯文本内容-->不带标签,设置也是替换内容,之前的文本内容被替换了
                        3.val():获取/设置元素的value的属性值
                                设置:需要在val()的括号中传入需要修改后的值
                2.属性操作
                        1.通用属性操作-->括号内,一个值代表获取,两个值代表设置
                                attr():获取/设置元素的属性值
                                removeAttr():删除属性
         **推荐使用:prop():获取/设置元素的属性值
                                removeProp("属性名"):删除属性

                                attr与prop的区别:
                                        1.如果操作的是元素的固有的属性(原始属性),则建议使用prop
                                        2.如果操作的是元素的自定义的属性(根据要求添加的属性),则建议使用attr
                        2.对Class属性操作
                                addClass():添加Class属性值
                                        可以添加多个不同的属性
                                        不可以添加多个同样的属性
                                removeClass():删除Class属性值
                                toggleClass():切换Class属性值

                3.CRUD操作
                        操作文档对象,动态操作

                   *1.append():父元素将子元素追加到末尾

                        2.prepend():父元素将子元素追加到开头
                   *3.appendTo():
                                        append 反视角
                        4.prependTo():
                                        prepend反视角

                        5.after():添加元素到元素后边
                                对象1.after(对象2):将对象2添加到对象1后边,对象1和对象2是兄弟关系
                        6.before():添加元素到元素前边
                                对象1.after(对象2):将对象2添加到对象1前边,对象1和对象2是兄弟关系
                   *7.insertAfter():
                   *8.insertBefore():

                   *9.remove():移除元素(删除所有匹配的元素)
                                对象.remove():将对象删除掉-->自己删除自己
                        10.empty():清空元素的所有后代元素
                                对象.empty():将对象所有后代元素清空,但不包括属性节点


                        注意-->需要记的:
                                a.append(b)         a是父亲,b是孩子,b作为孩子添加到a的最后位置
                                a.appendTo(b)        b是父亲,a是孩子,a作为孩子添加到b的最后位置

                                a.insertBefore(b) 把a添加到b的前面   a和b是兄弟关系
                                a.insertAfter(b)  把a添加到b的后面   a和b是兄弟关系

JQuery基础
        概念:
                一个JavaScript框架,简化js的开发
                框架是半成品
                JavaScript框架:本质就是一些js文件,封装了js的原生代码

        快速入门
                步骤
                        1.下载JQuery
                                JQuery-*.js与JQuery-*.min.js区别
                                        JQuery-*.js:开发版本,给程序员看的,有良好的缩进和注释,体积会大一些
                                        JQuery-*.min.js(压缩版):生产版本,程序中使用,没有缩进,体积小一些,程序加载更快
                        2.导入JQuery的js文件
                                导入JQuery-*.min.js
                        3.使用
                                JQuery的api
        JQuery对象和js对象区别与转换
                区别:-->都可以当做数组使用,可以调用length,查看长度
                        1.JQuery对象在操作时,更加方便
                        2.JQuery对象和js对象方法不通用
                        3.两者相互转换:
                                JQuery-->js:JQuery对象[索引]或者JQuery对象.get(索引)
                                js-->JQuery:$(js对象)

                        **区别:
                                   1.方法不通用
                                   2.JQuery可以封装js
                        **转换:
                                JQuery-->js:
                                        JQuery对象.get(0)
                                        JQuery对象[0]
                                js-->JQuery:
                                        $(js对象)


        选择器:筛选具有相似特征的元素(标签)
                基本语法学习:
                        1.事件绑定:
                                $(选择器).click(function(){});
                        2.入口函数(dom文档加载完成之后执行该函数中的代码):
                                $(function(){});

                                window.onload = function(){}和$(function(){});
                                        window.onload = function(){}只能定义一次,后边定义的会把前边定义的覆盖
                                        $(function(){}) 可以定义多次
                                                $(function(){
                                                        alert(123);
                                                        alert(234);
                                                });
                        3.样式控制:
                                $(function(){
                                        $(选择器).css("要设置的对应的样式名称","要设置的值")
                                });
                分类:
                        1.基本:
                                标签(元素)选择器
                                        $("标签名称")
                                id选择器
                                        $("#id的属性值")
                                类选择器
                                        $(".类的属性值")
                                并级选择器
                                        $("选择器1,选择器2..")
                        2.层级选择器
                                后代选择器
                                        $("选择器A 选择器B"),选择A所有的后代的样式进行改变
                                子选择器或子元素选择器
                                        $("选择器A>选择器B"),只能选择B选择器进行样式改变

                        3.属性选择器
                                **属性名称选择器  
                                        $("A[属性名称]")
                                **属性选择器     
                                        $("A[属性名称='属性值']")
                                复合属性选择器(看api)  
                                        $(A["属性名称='属性值']....")
                        4.过滤选择器 --> 写法:如 $("div:first")
                                1.首元素选择器:
                                        :first
                                2.尾元素选择器
                                        :last
                                3.偶数选择器
                                        :even   从零开始算
                                4.奇数选择器
                                        :odd   从零开始数
                                5.非元素选择器
                                        :not(选择器)
                                6.标题选择器
                                        :header
                        5.表单属性选择器
                                1.可用元素选择器
                                        :enabled
                                        例子:如 $("input[type='text']:enabled").val("aaa")
                                2.不可用元素选择器
                                        :disabled
                                3.选中选择器:用于多选框时
                                        :checked
                                        例子:如 alert($("input[type='checkbox']:checked").length);
                                4.选中选择器:用于下拉列表时       
                                        :selected
                                        $("job>option:selected")
                                5.表单选择器
                                        针对input标签的
                                        type为指定类型的

                                        :text-->input[type='text']

                                        :input  -->所有表单标签都属于被选中状态
        DOM操作
                1.内容相关操作(在括号内添加参数为设置,不加参数为获取的方法)
                        1.html():获取/设置元素的标签体内容-->带标签,设置即是替换,之前内容不会存在
                                html()相当于js中的innerHTML属性
                        2.text():获取/设置元素的标签体的纯文本内容-->不带标签,设置也是替换内容,之前的文本内容被替换了
                        3.val():获取/设置元素的value的属性值
                                设置:需要在val()的括号中传入需要修改后的值
                2.属性操作
                        1.通用属性操作-->括号内,一个值代表获取,两个值代表设置
                                attr():获取/设置元素的属性值
                                removeAttr():删除属性
         **推荐使用:prop():获取/设置元素的属性值
                                removeProp("属性名"):删除属性

                                attr与prop的区别:
                                        1.如果操作的是元素的固有的属性(原始属性),则建议使用prop
                                        2.如果操作的是元素的自定义的属性(根据要求添加的属性),则建议使用attr
                        2.对Class属性操作
                                addClass():添加Class属性值
                                        可以添加多个不同的属性
                                        不可以添加多个同样的属性
                                removeClass():删除Class属性值
                                toggleClass():切换Class属性值

                3.CRUD操作
                        操作文档对象,动态操作

                   *1.append():父元素将子元素追加到末尾

                        2.prepend():父元素将子元素追加到开头
                   *3.appendTo():
                                        append 反视角
                        4.prependTo():
                                        prepend反视角

                        5.after():添加元素到元素后边
                                对象1.after(对象2):将对象2添加到对象1后边,对象1和对象2是兄弟关系
                        6.before():添加元素到元素前边
                                对象1.after(对象2):将对象2添加到对象1前边,对象1和对象2是兄弟关系
                   *7.insertAfter():
                   *8.insertBefore():

                   *9.remove():移除元素(删除所有匹配的元素)
                                对象.remove():将对象删除掉-->自己删除自己
                        10.empty():清空元素的所有后代元素
                                对象.empty():将对象所有后代元素清空,但不包括属性节点


                        注意-->需要记的:
                                a.append(b)         a是父亲,b是孩子,b作为孩子添加到a的最后位置
                                a.appendTo(b)        b是父亲,a是孩子,a作为孩子添加到b的最后位置

                                a.insertBefore(b) 把a添加到b的前面   a和b是兄弟关系
                                a.insertAfter(b)  把a添加到b的后面   a和b是兄弟关系