jQuery 对元素的操作CSS及过滤

小灰灰 2023-08-17 15:39 117阅读 0赞

![在这里插入图片描述][20190926234328349.png]

### 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"
        });

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

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

1.  `cssHooks`：给c3样式写不同浏览器的兼容性处理；（了解）  
    在标签内看不到兼容性的效果，比如标签内一直都是`transform：……`  
    ![在这里插入图片描述][20190926235051938.png]  
    但是其实根据不同浏览器已经修改为标准的兼容性写法，比如输出为：  
    ![在这里插入图片描述][20190926235001736.png]

//自定义样式格式
        //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不计入元素的内外宽高

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70_pic_center]

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;
        });

### 过滤 ###

![在这里插入图片描述][20190927002436436.png]

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));

[20190926234328349.png]: /images/20230810/2ac0b444e7494b3faaefc739332db454.png
[20190926235051938.png]: /images/20230810/e69dab951da143a4aaaa5e0e9be57eba.png
[20190926235001736.png]: /images/20230810/800664d0f7784dedb196a5ef226fcff9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70_pic_center]: /images/20230810/0640e7a7083b4df1819e2a7ba1d70e91.png
[20190927002436436.png]: /images/20230810/385edf855b09493390e1481b63f45b9b.png