id、class等各种选择器总结

1.  id              选择器       #
     class        选择器        .
     标签         选择器       标签名
     群组         选择器       用逗号隔开
     全局         选择器         *

2. 后代           元素        选择器     空格
    子代           元素        选择器      >
    紧邻同辈    元素        选择器      +
    相邻同辈    元素        选择器      ~

3.  first()       第一个
     last()       最后一个
     even()     奇数个
     odd()       偶数个
     eq()         指定的那一个（下标）
     gt()          大于本元素的（下标）
     lt()           小于本元素的（下标）

4. 表单域  选择器   :表单名
5. 表单对象属性选择器
                获取选中的复选框元素    :checkbox:checked
                获取选中的单选框元素    :radio:checked
                获取选中的下拉框元素    option:selected
 6. 属性选择器
                普通包含选择器（包含id属性的元素）:标签名[id]
                属性等于选择器                   [id=XXXXX]
                复合属性选择器                   [value=''][id]

7. 　　   搜索父元素
                父    元素 parent()
                祖先元素     parents()
               搜索同辈元素
                    上一个     prev()
                    下一个      next()
                    所有    siblings()
               搜索子元素
                 children()
              过滤操作
                 filter
                 例如：console.log($(":input").filter("[id]"));
                         过滤出input有id的
                 map
                 例如：$(":checkbox:checked").map(function (){return $(this).val();}).get().join(",");
                       多选框数值的接收
8. 　　　  内部追加
                 内部向前追加 【prepend】
                 内部向后追加 【append】
                 外部追加
                 外部向前追加 【before】
                 外部向后追加 【after】
9. 删除
                 删除节点 remove
                 清空节点 empty
10.元素内容
                    操作HTML
                    //设置p中的html内容
                        $("p:first").html("<a href='#'>跳转</a>");
                    //获取p标签中的html内容
                        var t=$("p:first").html();
                        console.log(t);
                   操作文本
                    //获取p标签中的文本
                        var m=$("p:first").text();
                        console.log(m);
                    //设置p标签中的文本
                        $("p:first").text("<a href='#'>跳转</a>");
                   操作值
                    //获取和设置单标签input元素的值
                    //获取id和name的元素的value属性的值
                        var name = $("#name").val();
                        console.log(name);
                    //设置id是btn的元素的value属性的值
                        $("#btn").val("提交");
                        
                 元素属性
                //读取和修改属性
                //.attr("属性名","属性值");
                //读取id为name的type属性值
                    var zhi = $("#name").attr("type");
                    console.log(zhi);
                //修改id为name的type属性值为button
                    $("#name").attr("id","button");
                //删除id是name的value属性
                    $("#button").removeAttr("value");
                    
                元素样式
                //添加样式类 addClass
                    $("#btn").addClass("c");
                //移除样式类 removeClass
                //$("#btn").removeClass();
                //是否包含样式类 hasClass
                    var flag = $("#btn").hasClass("c");
                    console.log(flag);
                    
              元素css
                 //设置css样式
                    //1.链式操作
                        $("div").css("width","100px").css("height","100px").css("background-color","red");
                    //2.对象
                        $("div").css({"width":"200px","height":"200px","background-color":"green"});
                //读取css样式
                    console.log($("div").css("width"));
                    console.log($("div").css("background-color"));
                //元素css位置
                    //position:获取当前元素相对于父元素的偏移
                            var position = $("div").position();    console.log(position);
                //元素css尺寸
                    //width
                        console.log($("#button").width());
                    //height
                        console.log($("#button").height());
                    //innerWidth
                        console.log($("#button").innerWidth());
                    //innerHeight
                        console.log($("#button").innerHeight());
                    //outerWidth
                        console.log($("#button").outerWidth());
                    //outerHeight
                        console.log($("#button").outerHeight());