css3filter(滤镜)属性和jquery过滤器.filter()

た入场券 2021-09-14 16:38 541阅读 0赞

一.css3filter(滤镜)属性

(1).语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
    
    brightness(%) 亮度(值越大越亮)               eg:brightness(200%)
    blur(px) 设置模糊(值越大越模糊)              eg:blur(5px)
    contrast(%)调整图像的对比度　                eg:contrast(200%)
    drop-shadow 设置阴影效果                     eg:drop-shadow(0px 6px 11px #000)
    grayscale(%)灰度(值越大越灰)   值在0%到100%之间    eg:grayscale(50%)
    hue-rotate(deg)色相旋转(超过360是又绕一圈)　值为angle  eg:hue-rotate(90deg)
    invert(%) 反色　　　　　　     值在0%和100%之间    eg:invert(100%);
    opacity(%) 透明度　　　　　    值在0%和100%之间    eg:opacity(30%); 
    saturate(%) 饱和度　　　　                         eg:saturate(400%);
    sepia(%) 褐色　　　　　　      值在0%和100%之间    eg:sepia(100%)
    url
    
    注意：1.drop-shadow(h-shadow v-shadow blur spread color)	
    <offset-x> <offset-y> (必须)设定水平、垂直方向阴影距离
    blur(可选)值越大，越模糊 
    spread(可选)正值会使阴影扩张和变大，负值会是阴影缩小.
    color(可选)
    2.filter: url(svg-url#element-id)

IE8 及更低版本浏览器通常使用 opacity 属性。

(2).列子

.filter{
    		overflow: hidden;
    	}
    	.filter img{
    		float: left;
    		margin: 25px;
    	}
    	.filter-img{
           -webkit-filter:contrast(108%) hue-rotate(21deg) brightness(125%) drop-shadow(0px 6px 11px #000);
           filter:contrast(108%) hue-rotate(21deg) brightness(125%) drop-shadow(0px 6px 11px #000);
    	}
    	<div class="filter">
    		<img src="images/w.jpg" alt="">
    		<img class="filter-img" src="images/w.jpg" alt="">
    	</div>

![SouthEast][]

二.jquery过滤器.filter()

(1).简述

这个方法主要用来遍历列表中的元素，或者有着并列关系的元素，filter()方法其实是个过滤选择器，旨在从众多的并列的“兄弟姐妹”中查找到符合匹配条件的那一来。

(2).语法

a.  .filter( selector )一个用于匹配元素的选择器字符串。

所提供的选择器是对每个元素进行测试;这个选择器匹配的所有元素将包含在结果中。

<ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
      <li>list item 6</li>
    </ul>
    <script>
    	$('li').filter(':even').css('background-color', 'red');
    </script>

结果是1，3，和5项的背景变为红色，因为他们匹配这个选择器（记得:even 和 :odd使用基于0的索引）

b.  .filter(function(index)\{..\})一个函数用作测试集合中的每个元素。this 是当前DOM元素。

接受一个函数作为参数，然后根据函数的返回值判断，如果返回值是true，这个元素将被保留，如果返回值是false，这个元素将被剔除。

<ul>
      <li><strong>list</strong> item 1 - 1 个strong </li>
      <li><strong>list</strong> item <strong>2</strong> -2个 <span>strong</span></li>
      <li><strong>list</strong> item <strong>3</strong> -3个 <strong>strong</strong></li>
      <li>list item 3</li>
      <li>list item 5</li>
      <li>list item 6</li>
    </ul>
    	$( "li" ).filter(function( index ) {
    		console.log(index)//索引
    		return $( "strong", this ).length === 3;
    	}).css( "background-color", "red" );
    
    //注意: $( "strong", this ).length === 3;this是li对象，这种写法后面那个是作用域，在li中含有3个<strong>标签的。JQuery中$()返回的是个对象，所以判断某个元素是否存在，要根据取到的长度来判断，if($("#aa").length>0){...}
    </script>

再来，使用索引

$( "li" ).filter(function( index ) {
    		console.log(index % 3 == 2)
    		 return index % 3 == 2;
    	}).css( "background-color", "red" );

这对代码将会导致第三和第六列表项背景变为红色，因为它使用模运算符（ % ）选择每一个项目和index值，除以3时，余2 。

c.  .filter(element) 一个或多个DOM元素来匹配当前元素集合

<ul>
      <li class="filter-css">list item 1</li>
      <li>list item 2</li>
      <li class="filter-css">list item 3></li>
      <li>list item 3</li>
      <li class="filter-css">list item 5</li>
      <li>list item 6</li>
    </ul>
    $( "li" ).filter(".filter-css").css( "background-color", "red" );

结果是为含有 "filter-css" 类的 li添加红色背景。

d. .filter( jQuery object ) 现有jQuery对象，用于进一步筛选当前元素集合

$( "li" ).filter( $(".filter-css")).css( "background-color", "red" );

效果跟c 是一样的。

(3).列子

当索引为0或是含有 "filter-css" 类的 li添加红色背景。

<!DOCTYPE html>  
    <html >  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>测试</title>  
    </head>  
    <body >
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li class="filter-css">list item 3></li>
      <li>list item 3</li>
      <li>list item 5</li>
      <li>list item 6</li>
    </ul>
    <script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
    <script>
    $(document).ready(function(){
    	$( "li" ).filter(function (index) {
              		return index == 0 || $(this).attr("class") == "filter-css";
             	}).css( "background-color", "red" );
    });
    </script> 
    </html>

[SouthEast]: /images/20210813/48cc294d639f447fac944d5a22e2d998.png