fullstack.web/www/MetaSelector/index.html
2022-12-22 14:57:51 +08:00

159 lines
7.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="viggo" />
<title>Fullstack Club | 全栈工程师俱乐部</title>
<link rel="shortcut icon" href="../assets/images/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
<link rel="stylesheet" href="../assets/css/fonts/linecons/css/linecons.css">
<link rel="stylesheet" href="../assets/css/fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<link rel="stylesheet" href="../assets/css/xenon-core.css">
<link rel="stylesheet" href="../assets/css/xenon-components.css">
<link rel="stylesheet" href="../assets/css/xenon-skins.css">
<link rel="stylesheet" href="../assets/css/nav.css">
<link rel="stylesheet" href="../assets/css/custom-style.css">
<script src="../assets/js/jquery-1.11.1.min.js"></script>
<meta property="og:type" content="article">
<meta property="og:url" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
</head>
<body class="page-body boxed-container">
<nav class="navbar horizontal-menu navbar-fixed-top">
<div class="navbar-inner">
<div class="navbar-brand">
<a href="../index.html" class="logo">
<img src="../assets/images/bt8-expand-light.png" width="100%" alt="" class="hidden-xs">
</a>
</div>
<div class="navbar-mobile-clear"></div>
</div>
</nav>
<div class="page-container">
<div class="main-content" style="">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<h4 class="text-gray"></h4>
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<h1 id="metaselector">MetaSelector</h1>
<p>元数据选择器,用于文件、笔记、物体筛选,服务器规划、微服务调度等众多领域。</p>
<p>规则参考了 CSS 属性选择器JQuery 属性选择器。</p>
<ul>
<li>便于生成、书写</li>
<li>便于解析、阅读</li>
<li>便于执行</li>
<li>支持 url 形式属性编码</li>
<li>支持异步属性加载</li>
</ul>
<p>多语言支持</p>
<ul>
<li><code>java</code> 实现去往 <a href="https://github.com/CheneyWong/MetaSelector.js">这里</a></li>
<li><code>javascript</code> 实现去往<a href="https://github.com/CheneyWong/MetaSelector">这里</a></li>
<li>语法实验室去往这里。</li>
</ul>
<h2 id="语法介绍">语法介绍</h2>
<p>元数据以属性(attribute) 和值 (value) 的形式描述,包裹在 <code>[]</code> 之中。</p>
<h3 id="基本选择器">基本选择器</h3>
<ul>
<li><code>[attribute]</code> 包含某个属性</li>
<li><code>[attribute=undefined]</code> 不包含某个属性</li>
<li><code>[attribute=value]</code> 属性等于某值</li>
<li><code>[attribute*=value]</code> 属性包含某个值</li>
<li><code>[attribute|=value]</code> 属性以某值标记的开头value 后面必须有内容且不能紧跟字母和数字eg. <code>btn-user</code><code>btn-*</code><code>btn-</code><code>btn.user</code>)。</li>
<li><code>[attribute^=value]</code> 属性以某值开头</li>
<li><code>[attribute$=value]</code> 属性以某值结尾</li>
<li><code>[attribute!=value]</code> 属性不等于某值</li>
</ul>
<h3 id="特殊符号">特殊符号</h3>
<ul>
<li>特殊符号组1<code>[</code>,<code>]</code>,<code>=</code>,<code>*</code>,<code>|</code>,<code>^</code>,<code>$</code>,<code>!</code>,<code>,</code></li>
<li>特殊符号组2<code>'</code>,<code>&quot;</code></li>
<li>特殊符号组3<code>/</code></li>
<li>特殊符号组4<code>undefined</code></li>
</ul>
<blockquote>
<p>特殊符号使用注意</p>
</blockquote>
<ul>
<li>默认属性和值中间不能包含特殊符号组1</li>
<li>如果属性和值中确实需要使用特殊符号组1那么需要将属性或值用单引号或双引号包裹起来。此时可以使用特殊符号组1但是不能使用特殊符号组2</li>
<li>当操作符是 <code>=</code> 时, 属性或值如果以 <code>//</code> 包裹起来,则以正则规则处理。</li>
<li><code>undefined</code> 表示不存在, 字符串 <code>undefined</code> 也等于不存在。</li>
<li>空格(其他空白字符)不是特殊符号,按照其原本的样子匹配,属性和值都可以以空白开头和结尾,书写时请注意避免不必要的空白。</li>
</ul>
<h2 id="数值选择器">数值选择器</h2>
<ul>
<li><code>[attribute==number]</code> 属性等于某值</li>
<li><code>[attribute&gt;number]</code> 属性大于某值</li>
<li><code>[attribute&gt;=number]</code> 属性大于等于某值</li>
<li><code>[attribute&lt;number]</code> 属性小于某值</li>
<li><code>[attribute&lt;=number]</code> 属性小于等于某值</li>
</ul>
<h2 id="组合选择器">组合选择器</h2>
<ul>
<li>逻辑与 <code>[s1][s2]</code></li>
<li>逻辑或 <code>[s1],[s2]</code></li>
<li>组合逻辑 <code>[s1],[s2][s3],[s4]</code> 逻辑与总是优先于逻辑或执行。</li>
</ul>
<h2 id="联系">联系</h2>
<p>postmaster(a)fullstack.club</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="main-footer sticky footer-type-1 fixed">
<div class="footer-inner">
<div class="footer-text">
<strong>本站内容源自互联网如有内容侵犯了你的权益请联系删除相关内容联系邮箱postmaster@fullstack.club <br/>© 2021 - 2022 By <a href="https://www.fullstack.club">FullStack Club</a> | <a href="http://beian.miit.gov.cn/">浙ICP备14009836号-5</a><br/></strong>
</div>
<div class="go-up">
<a href="#" rel="go-top">
<i class="fa-angle-up"></i>
</a>
</div>
</div>
</footer>
</div>
</div>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/TweenMax.min.js"></script>
<script src="../assets/js/resizeable.js"></script>
<script src="../assets/js/joinable.js"></script>
<script src="../assets/js/xenon-api.js"></script>
<script src="../assets/js/xenon-toggles.js"></script>
<script src="../assets/js/xenon-custom.js"></script>
<textarea tabindex="-1" style="position: absolute; top: -999px; left: 0px; right: auto; bottom: auto; border: 0px; padding: 0px; box-sizing: content-box; word-wrap: break-word; overflow: hidden; transition: none; height: 0px !important; min-height: 0px !important; font-family: Arimo, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-transform: none; word-spacing: 0px; text-indent: 0px; line-height: 18.5714px; width: 53px;" class="autosizejs" id="autosizejs"></textarea>
</body>
</html>