jQuery 对元素的操作CSS及过滤

CSS

1. 可以设置或者获取样式，也可以一次设置多个样式（写为json模式）

    $("#btn").css("width", "200px");//设置
    console.log($("#btn").css("width"));//获取
    $("#btn").css("width", function (index, old) {
        return "150px";
    });
    $("#btn").css({
        "width":"100px",
        "height":"100px"
    });

2. 同理元素属性也可以一次操作多个和移除多个（仍然是removeAttr,不加s,空格隔开）

    $("#btn").attr({
        "data-index":"10",
        "title":"测试二"
    });
    $("#btn").removeAttr("title data-index");

3. cssHooks：给c3样式写不同浏览器的兼容性处理；（了解）
   在标签内看不到兼容性的效果，比如标签内一直都是transform：……
   
   但是其实根据不同浏览器已经修改为标准的兼容性写法，比如输出为：
   

    //自定义样式格式
    //jquery  css3样式兼容处理的
    //官方代码
    (function ($) {
     if (!$.cssHooks) {
     throw("jQuery 1.4.3+ is needed for this plugin to work");
     return;
     }
     function styleSupport(prop) {
     var vendorProp, supportedProp,
     capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
     prefixes = ["Moz", "Webkit", "O", "ms"],
     div = document.createElement("div");
     for (var i = 0; i < prefixes.length; i++) {
     vendorProp = prefixes[i] + capProp;
     if (vendorProp in div.style) {
     supportedProp = vendorProp;
     break;
     }
     }
     div = null;
     $.support[prop] = supportedProp
     return supportedProp;
     }

     var transform = styleSupport("transform");
     if (transform) {
     $.cssHooks.transform = {
     get: function (elem, computed, extra) {
     return $.css(elem, transform);
     },
     set: function (elem, value) {
     console.log(transform);
     elem.style[transform] = value;
     }
     };
     }
     })(jQuery);

     $("#btn").css("transform", "rotatez(45deg)");

位置

overflow-y和overflow-x设置后,如果想让其中一个消失，不重新设置hidden无法取消

1. offset() 获取当前元素的偏移位置的 ，参数都为Number类型，不带像素单位，相对于视口偏移
2. position() 相对父元素的偏移

    //offset()  获取当前元素的偏移位置的    相对于视口偏移
    console.log($(".block").offset().left);/*获取偏移*/
    console.log($(".block").offset().top);
    //position()  相对父元素的偏移
    console.log($(".block").position());
    $(".block").on("scroll", function () {
        console.log($(".block").scrollTop());
        console.log($(".block").scrollLeft());/*获取偏移*/
    });
    $(".block").scrollLeft(30);// 参数为number类型，设置偏移

尺寸

同样可以获取或者设置
margin不计入元素的内外宽高

    console.log($(".box").width());//设置的宽高
    console.log($(".box").height());
    console.log($(".box").innerWidth());//包括padding
    console.log($(".box").innerHeight());
    console.log($(".box").outerWidth());//包括border
    console.log($(".box").outerHeight());
    $(".box").width(function (index,old){
        console.log(index,old);
        return old+100;
    });

过滤

1. jquery 里面的当前对象是 $(this)
2. eq 根据索引（从0开始）匹配元素 ，根据±决定起始从头还是尾
3. hasClass() 检测是否具有什么类 ，直接写类名称，不加“.”
4. filter 的参数为：匹配器 筛选出与指定表达式匹配的元素集合。
   要写符号
5. is 的参数 匹配器 要写符号
6. has 匹配包含特定后代的元素（父）
7. not 删除与指定表达式匹配的元素
8. slice 类似原生的slice，截取数组，取小不取大
9. get()

    console.log($("ul>li").eq(0));
    console.log($("ul>li").eq(-2));
    console.log($("ul>li").first());
    console.log($("ul>li").last());
    console.log($("ul>li").eq(2).hasClass("lilist"));
    console.log($("ul>li").filter("li.lilist"));//选中特定元素，标签.属性
    console.log($("ul>li").eq(2).is(".lilist"));
     $("ul>li").each(function (index){
        var boo=$(this).is(function () {
            return index%2==0;
        })
        console.log(boo);
    });
    var num = $("ul>li").map(function () {
        return $(this)[0];
    });
    //get（）  参数索引   取对应索引的元素  如果不写参数转化为array
    console.log(num.get());
    console.log($("ul").has(".lilist"));
    console.log($("ul>li").not(".lilist"));
    console.log($("ul>li").slice(0, 2));